（一）WebRTC手記之初探

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的音視訊流的傳輸。

這裡的流程僅僅是從使用層面上描述了一下，具體内部都做了什麼、怎麼做的，以後的文章中會慢慢細扒，萬事開頭難，自我鼓勵一下。