iep-ui/es/webRtc/src/main.js

An enterprise-class UI design language and Vue-based implementation

import WebRtcPanel from './panel';
import NERTCCalling from 'iep-webrtc-sdk';
import { WebRtcProps } from '../interface';

export default {
  name: 'WebRtc',
  props: WebRtcProps(),
  data: function data() {
    return {
      isOpenPanel: false,
      neCall: undefined,
      personInfo: {
        name: '',
        avatar: '',
        account: '',
        password: ''
      }
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.watchPerson = this.$watch('receiveAccount', function (e) {
      if (e) {
        _this.personInfo = {
          name: _this.$props.receiveName,
          avatar: _this.$props.receiveAvatar,
          account: _this.$props.receiveAccount,
          password: _this.$props.receivePassword
        };
        _this.neCall = new NERTCCalling({
          debug: _this.$props.debug
        });
        _this.neCall.setupAppKey({
          appKey: _this.$props.appKey
        });
        _this.neCall.login({
          account: _this.$props.sendAccount,
          token: _this.$props.sendPassword,
          quickReconnect: true
        });
      }
    }, {
      deep: true,
      immediate: true
    });
  },
  beforeDestroy: function beforeDestroy() {
    var _this2 = this;

    if (this.neCall) {
      this.neCall.logout();
    }
    this.watchPerson();
    setTimeout(function () {
      if (_this2.neCall) {
        _this2.neCall.destroy();
      }
    }, 100);
  },
  render: function render() {
    var _this3 = this;

    var h = arguments[0];

    return h(
      'div',
      { 'class': 'webRtc' },
      [h(
        'a-button',
        {
          attrs: {
            type: 'primary',
            size: 'small',
            disabled: this.$props.disabled,
            icon: 'video-camera'
          },
          on: {
            'click': function click() {
              if (!_this3.$props.disabled) {
                _this3.isOpenPanel = true;
              }
            }
          }
        },
        ['\u89C6\u9891\u901A\u8BDD']
      ), this.isOpenPanel ? h(WebRtcPanel, {
        ref: 'webRtcPanel',
        attrs: { getToken: this.$props.getToken,
          callTimeout: this.$props.callTimeout,
          person: this.personInfo,
          neCall: this.neCall
        },
        on: {
          'close': function close() {
            return _this3.handlePanelClose();
          }
        }
      }) : null]
    );
  },

  methods: {
    handlePanelClose: function handlePanelClose() {
      this.isOpenPanel = false;
    }
  }
};