應公司項目需求。 需要在原先完整項目的基礎上將音視頻通話部分與項目進行分離, 形成單獨的組件。 實現在項目中傳入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發佈事件.
結語
做完這些初步完成以項目爲基礎的組件抽離,代碼太次,正在優化。