初探 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 完整版本。
其實也只多了訊息傳送…音訊視訊開關而已啦！