webRtc及组件之间通信

应公司项目需求。 需要在原先完整项目的基础上将音视频通话部分与项目进行分离， 形成单独的组件。 实现在项目中传入url， 后弹出model框进行两端音视频通话。

通话功能

通话功能的流程是通过页面上的某个按钮执行init()方法。 因为用了腾讯云的音视频技术。 所以需要在腾讯云服务器创建房间， 还有公司本地服务器创建房间做通话两端的中间人角色。

import rtc from 'path';

rtc.init(
    obj,           // 创建房间基本信息字段
    'p1',          // 获取腾讯云信息
    'p2',          // 本地服务器创建房间
    'p3',          // 心跳接口
    'p4',          // 退出本地服务器房间
    heart,         // 心跳回调 根据返回值查看视频过程
    eventcb,       // 腾讯云服务器 发生事件回调  可不传
    1,             // 是否需要混流   可不传
    'p5',          // 混流接口   可不传
);

在页面中引入rtc组件并执行init()方法， 传入路径，监听通话过程的回调等。

在rtc组件中：

const rtc = {
  ...  // 保存信息变量

  init(obj, u1, u2, u3, u4, heart, eventcb, isMixed = 0, u5 = '') {
    ... // 全局保存传入字段

    axios.post(u1, Qs.stringify(params)).then((res) => {

      const opt = {
        ...  // 房间信息
      };
       
      const RTC = that.create(opt);

      Object.keys(that.events).forEach((key) => {
        if (!eventcb) {
          that.eventcb = function (rs) {
            return rs.tip;
          };
        } else {
          that.eventcb = eventcb;
        }

        RTC.on(key, that.events[key]);
      });
    });
  }
}

init()方法中通过传入的路径， 首先调用后台初始化接口， 获取创建房间必要的参数信息。 同时将信息存入全局变量中。 执行create()。 开始在服务器及腾讯云服务器创建房间。 在create中 return RTC; 说明房间创建成功。 events 定义了腾讯云事件通知， 遍历key， value, RTC.on 进行监听. eventcb为传入的事件回调。

create(opt) {
    const self = this;

    const RTC = new WebRTCAPI(opt, function () {
      const params = {   
        ... // 创建本地服务器房间
      };

      axios.post(self.u2, Qs.stringify(params)).then((res) => {
        const createOpt = {
          ...  // 创建腾讯服务器房间
        };

        RTC.createRoom(createOpt, function() {
          console.log('创建房间');

          self.heartbeat();
        })
      });
    });

    return RTC;
  },

heartbeat( ) 递归调用心跳函数， 对通话过程进行监听， 比如一端退出房间通过与后台商定的code值， 即使在本地服务器退出房间等。

events: {
    onRemoteStreamUpdate(data) { 
      ...  // 远端流 新增/更新

      if (!rtc.connect) {
        rtc.connect = 1; // 开始通话
        rtc.instance.$emit('connection', rtc.connect);
      }

      rtc.eventcb(....);  回调返回信息
    },
    onRemoteStreamRemove(data) {
      ...  // 远端流断开

      rtc.eventcb(....);
    },
    onRelayTimeout(data) { 
      ...  //  server 超时断开
    
      rtc.eventcb(....);
    }
  },

eventcb 如果传入能确保在执行init( )方法的页面得到通话过程中的事件执行信息。

组件通信

init( )与rtc.js 可以通过回调传参的方式进行通信， 但rtc.js 与 通话面板之间无法通过这种方式进行信息传递。 比如需要在rtc.js 通知 model通话开始, 这时需要开始计时等。 vuex, bus无法在这种情况下使用. 所以通过 Vue.extend( ) ， 在Vue构造器上创建子类。 注册到全局。 使用vm.$emit 及 vm.$om 发布订阅事件

import rtcContainer from './view.rtc';

init( ... ) {

  ...

  const callPanel = Vue.extend(rtcContainer);

  this.instance = new callPanel({
    propsData: {
      // 传值
    }
  }).$mount();

  document.body.appendChild(this.instance.$el);
}

如果$mount( )不传值，没有挂载节点， 也会生成callpanel实例。这是一个坑，而后将其挂载到body上。 在需要的地方$emit发布事件.

结语

做完这些初步完成以项目为基础的组件抽离，代码太次，正在优化。