webrtc客戶端與TURN和信令伺服器通訊流程圖
阿新 • • 發佈：2019-01-26
WebRTC是HTML5支援的重要特性之一，有了它，不再需要藉助音視訊相關的客戶端，直接通過瀏覽器的Web頁面就可以實現音視訊對聊功能。而且WebRTC專案是開源的，我們可以藉助WebRTC原始碼快速構建自己的音視訊對聊功能。無論是使用前端JS的WebRTC API介面，還是在WebRTC原始碼上構建自己的對聊框架，都需要遵循以下執行流程：
上述序列中，WebRTC並不提供Stun伺服器和Signal伺服器，伺服器端需要自己實現。Stun伺服器可以用google提供的實現stun協議的測試伺服器（stun:stun.l.google.com:19302），Signal伺服器則完全需要自己實現了，它需要在ClientA和ClientB之間傳送彼此的SDP資訊和candidate資訊，ClientA和ClientB通過這些資訊建立P2P連線來傳送音視訊資料。由於網路環境的複雜性，並不是所有的客戶端之間都能夠建立P2P連線，這種情況下就需要有個relay伺服器做音視訊資料的中轉，本文字著原始碼剖析的態度，這種情況就不考慮了。這裡說明一下， stun/turn、relay伺服器的實現在WebRTC原始碼中都有示例，真是個名副其實的大寶庫。
上述序列中，標註的場景是ClientA向ClientB發起對聊請求，呼叫描述如下：
- ClientA首先建立PeerConnection物件，然後開啟本地音視訊裝置，將音視訊資料封裝成MediaStream新增到PeerConnection中。
- ClientA呼叫PeerConnection的CreateOffer方法建立一個用於offer的SDP物件，SDP物件中儲存當前音視訊的相關引數。ClientA通過PeerConnection的SetLocalDescription方法將該SDP物件儲存起來，並通過Signal伺服器傳送給ClientB。
- ClientB接收到ClientA傳送過的offer SDP物件，通過PeerConnection的SetRemoteDescription方法將其儲存起來，並呼叫PeerConnection的CreateAnswer方法建立一個應答的SDP物件，通過PeerConnection的SetLocalDescription的方法儲存該應答SDP物件並將它通過Signal伺服器傳送給ClientA。
- ClientA接收到ClientB傳送過來的應答SDP物件，將其通過PeerConnection的SetRemoteDescription方法儲存起來。
- 在SDP資訊的offer/answer流程中，ClientA和ClientB已經根據SDP資訊建立好相應的音訊Channel和視訊Channel並開啟Candidate資料的收集，Candidate資料可以簡單地理解成Client端的IP地址資訊（本地IP地址、公網IP地址、Relay服務端分配的地址）。
- 當ClientA收集到Candidate資訊後，PeerConnection會通過OnIceCandidate介面給ClientA傳送通知，ClientA將收到的Candidate資訊通過Signal伺服器傳送給ClientB，ClientB通過PeerConnection的AddIceCandidate方法儲存起來。同樣的操作ClientB對ClientA再來一次。
- 這樣ClientA和ClientB就已經建立了音視訊傳輸的P2P通道，ClientB接收到ClientA傳送過來的音視訊流，會通過PeerConnection的OnAddStream回撥介面返回一個標識ClientA端音視訊流的MediaStream物件，在ClientB端渲染出來即可。同樣操作也適應ClientB到ClientA的音視訊流的傳輸。
這裡的流程僅僅是從使用層面上描述了一下，具體內部都做了什麼、怎麼做的，以後的文章中會慢慢細扒，萬事開頭難，自我鼓勵一下。