WebRTC 教程五：WebRTC搭建視頻聊天室

時(shí)間：2023-07-22 09:21:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-22 09:21:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

WebRTC 教程五：WebRTC搭建視頻聊天室：

這篇文章主要介紹了 WebRTC 聊天室的整體演示，以及 WebRTC 視頻聊天的功能設(shè)計(jì)，代碼邏輯以及整體演示。

目錄

• WebRTC 聊天室：總體演示
• WebRTC 視頻聊天: 設(shè)計(jì)
• WebRTC 視頻聊天: 客戶端實(shí)現(xiàn)
• WebRTC 視頻聊天：Full Demo

附上教程（1）：WebRTC信令、架構(gòu)和 API

附上教程（2）：WebRTC API和Leak

附上教程（3）：WebRTC特性，調(diào)試方法以及相關(guān)服務(wù)器搭建方法

附上教程（4）：WebRTC 聊天室設(shè)計(jì)

WebRTC 聊天室：總體演示

講者會(huì)展示整個(gè) WebRTC 聊天室應(yīng)用的 demo。在下載了源碼之后，運(yùn)行 demo 之前，首先需要使用 node 命令運(yùn)行信令服務(wù)器。之后就可以看到已經(jīng)登錄的用戶列表。

點(diǎn)擊用戶，就開(kāi)始創(chuàng)建 RTCDataChannel，并彈出請(qǐng)求用戶界面，

在對(duì)端用戶界面，就會(huì)彈出收到的聊天室請(qǐng)求內(nèi)容，用戶可以選擇接收或者拒絕請(qǐng)求。

如果用戶選擇同意接收請(qǐng)求，就會(huì)創(chuàng)建一個(gè)聊天室，兩個(gè)用戶的狀態(tài)也會(huì)從 "online" 變?yōu)?"busy"。

如果用戶想要退出，可以直接點(diǎn)擊右上角的 "Leave"，即可退出聊天室，用戶狀態(tài)也會(huì)從 "busy" 變回 "online"。

一旦有用戶關(guān)閉了瀏覽器，就等同于退出登錄狀態(tài)，其他用戶也不會(huì)在在線列表中看到該用戶。

講者繼續(xù)講了一些這個(gè)聊天室 demo 的限制：

• 聊天室不支持蘋果的 Safari 瀏覽器；
• 暫時(shí)不支持文件共享；
• 不能存儲(chǔ)聊天記錄；
• 僅支持一對(duì)一聊天。

LinuxC++音視頻開(kāi)發(fā)視頻：免費(fèi)】FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級(jí)開(kāi)發(fā)
【文章福利】：音視頻學(xué)習(xí)資料、視頻和學(xué)習(xí)路線圖資料、以及面試題（資料包括C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等），免費(fèi)分享，有需要的可以加君羊領(lǐng)取哦！~學(xué)習(xí)交流君羊994289133點(diǎn)擊加入領(lǐng)取資料

WebRTC 視頻聊天: 設(shè)計(jì)

對(duì)于客戶端網(wǎng)頁(yè) UI 設(shè)計(jì)，還是選擇 HTML 和 CSS 來(lái)進(jìn)行設(shè)計(jì)，而對(duì)于服務(wù)端邏輯設(shè)計(jì)，選擇用 JavaScript 和 WebSocket 來(lái)進(jìn)行設(shè)計(jì)。

講者介紹了這個(gè)視頻聊天應(yīng)用的一些功能：

• 用戶可以登錄應(yīng)用；
• 服務(wù)端會(huì)保持在線用戶列表；
• 用戶可以請(qǐng)求與其他用戶的視頻聊天；
• 一旦兩個(gè)用戶都就緒，就會(huì)創(chuàng)建一個(gè)視頻聊天室；
• 用戶可以視頻聊天同時(shí)打字聊天；
• 用戶可以退出聊天室；
• 應(yīng)用僅支持一對(duì)一聊天。

對(duì)于客戶端的 UI 設(shè)計(jì)，需要使用 CSS 和 JavaScript 來(lái)創(chuàng)建 HTML 頁(yè)面，通過(guò) Json 信息與信令服務(wù)器交互。信令服務(wù)器則需要處理用戶狀態(tài)，處理用戶的回話，雙方信令轉(zhuǎn)發(fā)等功能。這些信令服務(wù)器部分的代碼可以直接使用上個(gè) WebRTC Chat Room 應(yīng)用的信令服務(wù)器代碼。

WebRTC 視頻聊天: 客戶端實(shí)現(xiàn)

服務(wù)器部分的 node.js 代碼與之前的 demo 相同，講者不再贅述。

講者展示了客戶端 app 的代碼。

一個(gè)用戶 a 向另一個(gè)用戶 b 發(fā)送請(qǐng)求后，首先服務(wù)器會(huì)判斷用戶 b 是否已在會(huì)議中，若用戶可用，則運(yùn)行 getUserMedia() API 來(lái)獲取麥克風(fēng)和相機(jī)。這些都是在 permission_camera_before_call 函數(shù)中處理的。

在獲取了麥克風(fēng)和相機(jī)權(quán)限后，就通過(guò) create_videocall_page 函數(shù)來(lái)創(chuàng)建一個(gè)動(dòng)態(tài)的視頻會(huì)議頁(yè)面，還可以顯示麥克風(fēng)和攝像頭的設(shè)備名。流建立完成后，就可以開(kāi)始創(chuàng)建 RTCPeerConnection，并通過(guò) addTrack API 來(lái)把流加入到 RTCPeerConnection 中。

對(duì)于客戶端的搭建，還需要添加 DataChannel 用于打字聊天。在 DataChannel 搭建完成后，就可以創(chuàng)建請(qǐng)求，并把客戶端用戶本地描述設(shè)置為此請(qǐng)求，最后把這個(gè)新創(chuàng)建好的請(qǐng)求發(fā)送給信令服務(wù)器，并由服務(wù)器轉(zhuǎn)發(fā)給另一個(gè)客戶端。

一旦對(duì)端用戶點(diǎn)擊接收請(qǐng)求后，就會(huì)開(kāi)始創(chuàng)建答復(fù)，并設(shè)置 SDP，答復(fù) ICE 請(qǐng)求。在用戶準(zhǔn)備好后，就會(huì)在兩邊用戶頁(yè)面上彈出聊天窗口，也需要把用戶的狀態(tài)設(shè)置為"busy"。

接下來(lái)講者展示了該應(yīng)用的 demo，首先我們可以在瀏覽器中加載 index.html 頁(yè)面，并通過(guò)用戶名登錄。

在左側(cè)可以看到在線用戶列表，并點(diǎn)擊 call 發(fā)起通話，對(duì)端可以選擇接收或者拒絕。在接收后，還要在左上角允許攝像頭權(quán)限，就會(huì)彈出視頻聊天界面。

除視頻聊天界面外，還可以在右側(cè)進(jìn)行打字聊天。

WebRTC 視頻聊天：Full Demo

講者展示了該視頻聊天的總體演示。在啟動(dòng)聊天應(yīng)用前，需要先把信令服務(wù)器開(kāi)啟。

在打開(kāi) HTML 頁(yè)面之后，通過(guò)用戶名登錄進(jìn)應(yīng)用。

在成功登陸應(yīng)用后，就可以看到主界面，左側(cè)可以看到在線用戶列表?？梢灾苯狱c(diǎn)擊用戶來(lái)發(fā)起聊天請(qǐng)求。

在發(fā)起聊天請(qǐng)求后，左上角會(huì)彈出攝像頭硬件授權(quán)申請(qǐng)，而在接收端會(huì)彈出接收或者拒絕請(qǐng)求窗口。

在另一端接受請(qǐng)求后，就可以看到聊天室界面，其中左側(cè)為視頻畫面，右側(cè)為聊天窗口。

用戶可以在視頻畫面下方選擇關(guān)閉或開(kāi)啟攝像頭或者麥克風(fēng)。在想要退出聊天室時(shí)，直接點(diǎn)擊 Leave 即可退出聊天室。