連接過程涉及到多個環節，這裡就不一一截圖了，可以直接去演示地址查看。簡單分析一下我們要做的事情：

*加入房間後，獲取到房間的所有在線成員。

* 選擇任一成員進行通話，也就是呼叫動作。這時候就有一些細節問題要處理：不能呼叫自己、同一時刻只允許呼叫一個人且需要判斷對方是否是通話中、呼叫後回復需要有相應判斷（同意、拒絕以及通話中）

* 拒絕或通話中，都沒有後續動作，可以換個人再呼叫。同意之後，就要開始建立點對點連接。

• 加入房間

簡單看一下加入房間的流程：

// 前端
join() {
if (!this.account) return;
this.isJoin = true; // 輸入框彈層邏輯
window.sessionStorage.account = this.account; // 刷新判斷是否登錄過
socket.emit(join, {roomid: this.roomid, account: this.account}); // 發送加入房間請求
}

// 後端
const sockS = {}; // 不同客戶端對應的 sock 實例
const users = {}; // 成員列表
sock.on(join, data=>{
sock.join(data.roomid, () => {
if (!users[data.roomid]) {
users[data.roomid] = [];
}
let obj = {
account: data.account,
id: sock.id
};
let arr = users[data.roomid].filter(v => v.account === data.account);
if (!arr.length) {
users[data.roomid].push(obj);
}
sockS[data.account] = sock; // 保存不同客戶端對應的 sock 實例
// 將房間內成員列表發給房間內所有人
app._io.in(data.roomid).emit(joined, users[data.roomid], data.account, sock.id);
});
});

後端成員列表的處理，是因為做了多房間的邏輯，按每個房間的成員表返回的。你們如果做的時候沒有多房間，則不需要這麼考慮。sockS 的處理，是為了發送私聊消息。

• 呼叫

前面已經說了呼叫的注意事項，所以這裡就一起來講。需要注意的就是消息中需要帶有自己和對方的 account，因為這是判斷成員 sock 的標識，也就是之前存儲在 socks 中的用來發私聊消息的。然後是前面說的三種狀態，在這裡用 type 值 1, 2, 3 來區分，然後給出不同的回復。

// 前端
apply(account) { // 發送請求
// account 對方account self 是自己的account
this.loading = true;
this.loadingText = 呼叫中; // 呼叫中 loading
socket.emit(apply, {account: account, self: this.account});
},
reply(account, type) { // 處理回復
socket.emit(reply, {account: account, self: this.account, type: type});
}
// 收到請求
socket.on(apply, data => {
if (this.isCall) { // 判斷是否在通話中
this.reply(data.self, 3);
return;
}
this.$confirm(data.self + 向你請求視頻通話, 是否同意?, 提示, {
confirmButtonText: 同意,
cancelButtonText: 拒絕,
type: warning
}).then(async () => {
this.isCall = data.self;
this.reply(data.self, 1);
}).catch(() => {
this.reply(data.self, 2);
});
});

// 後端
sock.on(apply, data=>{ // 轉發申請
sockS[data.account].emit(apply, data);
});

後端比較簡單，僅僅是轉發一下請求，給對應的客戶端。其實我們這個例子的後端，基本都是這個操作，所以後面的後端代碼就不貼了，可以去源碼直接看。

• 回復

回復和和呼叫是一樣的邏輯，分別處理不同的回復就好了。

// 前端
socket.on(reply, async data =>{ // 收到回復
this.loading = false;
switch (data.type) {
case 1: // 同意
this.isCall = data.self; // 存儲通話對象
break;
case 2: //拒絕
this.$message({
message: 對方拒絕了你的請求！,
type: warning
});
break;
case 3: // 正在通話中
this.$message({
message: 對方正在通話中！,
type: warning
});
break;
}
});


• 創建連接

呼叫和回復的邏輯基本清楚了，那我們繼續思考，應該在什麼時機創建 P2P 連接呢？我們之前說的，拒絕和通話中都不需要處理，只有同意需要，那就應該在同意請求的位置開始創建。需要注意的是，同意請求有兩個地方：一個是你點了同意，另一個是對方知道你點了同意之後。

本例採取的是呼叫方發送 Offer，這個地方一定得注意，只要有一方創建 Offer 就可以了，因為一旦連接就是雙向的。

socket.on(apply, data => { // 你點同意的地方
...
this.$confirm(data.self + 向你請求視頻通話, 是否同意?, 提示, {
confirmButtonText: 同意,
cancelButtonText: 拒絕,
type: warning
}).then(async () => {
await this.createP2P(data); // 同意之後創建自己的 peer 等待對方的 offer
... // 這裡不發 offer
})
...
});
socket.on(reply, async data =>{ // 對方知道你點了同意的地方
switch (data.type) {
case 1: // 只有這裡發 offer
await this.createP2P(data); // 對方同意之後創建自己的 peer
this.createOffer(data); // 並給對方發送 offer
break;
...
}
});


和微信等視頻通話一樣，雙方都需要進行媒體流輸出，因為你們都要看見對方。所以這裡和之前本地對等連接的區別就是都需要給自己的 RTCPeerConnection 實例添加媒體流，然後連接後各自都能拿到對方的視頻流。在 初始化 RTCPeerConnection 時，記得加上 onicecandidate 函數，用以給對方發送 ICE 候選。

async createP2P(data) {
this.loading = true; // loading動畫
this.loadingText = 正在建立通話連接;
await this.createMedia(data);
},
async createMedia(data) {
... // 獲取並將本地流賦值給 video 同之前
this.initPeer(data); // 獲取到媒體流後，調用函數初始化 RTCPeerConnection
},
initPeer(data) {
// 創建輸出端 PeerConnection
...
this.peer.addStream(this.localstream); // 都需要添加本地流
this.peer.onicecandidate = (event) => {
// 監聽ICE候選信息 如果收集到，就發送給對方
if (event.candidate) { // 發送 ICE 候選
socket.emit(1v1ICE,
{account: data.self, self: this.account, sdp: event.candidate});
}
};
this.peer.onaddstream = (event) => {
// 監聽是否有媒體流接入，如果有就賦值給 rtcB 的 src，改變相應loading狀態，賦值省略
this.isToPeer = true;
this.loading = false;
...
};
}


createOffer 等信息交換和之前一樣，只是需要通過 Socket 轉發給對應的客戶端。然後各自接收到消息後分別採取對應的措施。

socket.on(1v1answer, (data) =>{ // 接收到 answer
this.onAnswer(data);
});
socket.on(1v1ICE, (data) =>{ // 接收到 ICE
this.onIce(data);
});
socket.on(1v1offer, (data) =>{ // 接收到 offer
this.onOffer(data);
});

// 這裡只貼一個 createOffer 的代碼，因為和之前的思路都一樣，只是寫法有些區別
// 建議大家都自己敲一遍，有問題可以交流，也可以去源碼查看。
async createOffer(data) { // 創建並發送 offer
try {
// 創建offer
let offer = await this.peer.createOffer(this.offerOption);
// 呼叫端設置本地 offer 描述
await this.peer.setLocalDescription(offer);
// 給對方發送 offer
socket.emit(1v1offer, {account: data.self, self: this.account, sdp: offer});
} catch (e) {
console.log(createOffer: , e);
}
}

• 掛斷

掛斷的思路依然是將各自的 peer 關閉，但是這裡掛斷方還需要藉助 Socket 告訴對方，你已經掛電話了，不然對方還在痴痴地等。

hangup() { // 掛斷通話 並做相應處理 對方收到消息後一樣需要關閉連接
socket.emit(1v1hangup, {account: this.isCall, self: this.account});
this.peer.close();
this.peer = null;
this.isToPeer = false;
this.isCall = false;
}


參考文章

• WebRTC
• WebRTC 直播時代

交流群

qq前端交流群：960807765，歡迎各種技術交流，期待你的加入

後記

如果你看到了這裡，且本文對你有一點幫助的話，希望你可以動動小手支持一下作者，感謝??。文中如有不對之處，也歡迎大家指出，共勉。

• 本文示例 源碼庫 webrtc-stream
• 文章倉庫 ????fe-code

往期文章：

JavaScript 原型和原型鏈及 canvas 驗證碼實踐

站住，你這個Promise！

??????Vchat — 從頭到腳，擼一個社交聊天系統（vue + node + mongodb）

歡迎關注公眾號 前端發動機，江三瘋的前端二三事，專註技術，也會時常迷糊。希望在未來的前端路上，與你一同成長。

推薦閱讀：