初探 WebRTC — 手把手建立線上視訊 (3)
前言
本系列主要介紹使用 WebRTC 搭配 Socket.io 建立一對一的視訊。上禮拜提到 WebRTC 的流程與一大堆專有名詞的講解,這禮拜可以專心在 code 上面了!
題外話:馬拉松一開始都禮拜一就寫完文章,最近因為在忙 side project,都變成週末才開始還債啦(逃
連結:
1. 初探 WebRTC — 手把手建立線上視訊 (1)
2. 初探 WebRTC — 手把手建立線上視訊 (2)
3. 初探 WebRTC — 手把手建立線上視訊 (3)
目錄
- 本地端設置
- Signaling Server 設置
- 安裝 socket.io - 建立 P2P 連線
- 建立連線
- 增加監聽
- 送出 Offer
本地端設置
首先先設定好 HTML:
從簡而來,我們只有三個 button
和兩個 video
,一個遠端一個本地。
再來我們把本地影像包進 function
,搭配取得裝置名稱:
如果不知道在做啥的話可以回去看看一二回)
Signaling Server 設置
工欲善其事,必先利其器,我們要來設置可以傳送 SDP 的 Server。
安裝 socket.io
記得是要在 Node 環境下!
$ npm install socket.io --save
引入在 Node.js 裡:
接著我大概講解一下,後端 socket.io 會接收訊息並作為 Signaling Server
傳遞 SDP,目前是寫成傳送給房間內的另一個人 ( 房間限制兩位 )。
關於 socket.io 可參考 Socket.io 基本教學
- 傳送房號給
joinRoom
加入房間。 findNowRoom
查看使用者是不是已在房間內,是的話就離開並加入新房間。peerconnectSignaling
傳送各自的 SDP。
建立 P2P 連線
接著我們可以開始進入這張圖了!
建立連線
首先要連線到 Signaling Server
以及建立 P2P 連線並增加本地流,另外順便把 joinRoom Btn 設置好:
可以使用 CDN 或安裝 socket.io-client
$ npm install socket.io-client --save<!-- CDN --!>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
在建立 P2P 時可以先設定使用的 iceServer
,這邊則是使用 Google 提供的!
回顧:
ICE
包裝了STUN
與TURN
,是幫助我們穿越 NAT 時的一個協定。
增加監聽
接下來我們要設定 P2P 連線監聽,也就是流程圖的第二紅框區:
關於 onIceconnectionStateChange
則是說明 Ice Server
目前的狀態,有等待中、失敗、找尋中等等,可以參考此篇文章。
接著我們可以整合以上 function
並初始化:
深呼吸一下,準備進入最後階段啦 ~
送出 Offer
回到剛剛連到 Signaling Server
,但我們還沒設定到 Socket 監聽等等的。接下來要先來設定,關於說明會打在註解上。
這邊做的事大概就是判斷 peerconnectSignaling
傳回來的東西是 SDP 還是 ICE 候選位置,在個別下去做不同的動作。
到了最後一步,也就是送出 Offer
:
當我們點選 Button 就會送出 Offer
,並開始等待對方回傳 Answer
,因為 ICE
相關的監聽也都設定好了,就會穩穩的照著流程圖跑!
再來就是邊緣的開啟兩個視窗自己視訊吧!
結論
上週講了一大堆的專有名詞沒 code,這週反而是相反(哭笑不得
看完這系列,希望可以大致了解 WebRTC 的實作方式!
當然講解的只是簡單版本,太分散覺得難看的話可以參考 Gif 完整版本。
其實也只多了訊息傳送…音訊視訊開關而已啦!