Why WebRTC｜“淺入深出”的工作原理詳解

WebRTC可以被看作是一個(gè)不需要安裝任何插件或者下載任何額外程序就能運(yùn)行的瀏覽器原生實(shí)時(shí)通信手段。不同的客戶端通過（相同或不同）瀏覽器跳轉(zhuǎn)到同一個(gè) URL 就能實(shí)現(xiàn)實(shí)時(shí)互通、看見彼此。但這只是“上帝視角”的說法，其中包含的技術(shù)框架和實(shí)現(xiàn)細(xì)節(jié)遠(yuǎn)沒那么簡單。

在我們開始討論 WebRTC 是如何工作之前，先來厘清幾個(gè)關(guān)鍵的技術(shù)概念。

P2P

可以實(shí)現(xiàn)實(shí)時(shí)點(diǎn)對(duì)點(diǎn)音視頻（即多媒體）通信是 WebRTC 最為顯著的一個(gè)特征。為了通過 Web 瀏覽器進(jìn)行通信，要求每個(gè)人的 Web 瀏覽器都需要同意“開始接通”，知道對(duì)方的網(wǎng)絡(luò)定位，并且還需要繞過網(wǎng)絡(luò)安全和防火墻保護(hù)并實(shí)時(shí)傳輸所有多媒體通信才能夠得以實(shí)現(xiàn)。

在基于瀏覽器的對(duì)等通信中，如何定位和建立與另一臺(tái)計(jì)算機(jī)的 Web 瀏覽器的網(wǎng)絡(luò)連接并進(jìn)行高效數(shù)據(jù)傳輸是其最大的挑戰(zhàn)之一。

當(dāng)你想要訪問一個(gè)網(wǎng)站時(shí)，一般都是直接輸入網(wǎng)址或者點(diǎn)擊連接跳轉(zhuǎn)來進(jìn)行頁面查看。在這個(gè)過程中，其實(shí)是你向通過提供網(wǎng)頁（HTML，CSS和JavaScript）進(jìn)行響應(yīng)的服務(wù)器發(fā)出了一個(gè)請(qǐng)求。而發(fā)出這個(gè)訪問請(qǐng)求的關(guān)鍵是你向已知且易于定位的服務(wù)器（通過DNS）發(fā)出HTTP請(qǐng)求，并獲得響應(yīng)（即網(wǎng)頁）。

上述場(chǎng)景中出現(xiàn)的問題就可以通過 P2P（點(diǎn)對(duì)點(diǎn)傳輸）技術(shù)來解決，而 WebRTC 本身就是基于點(diǎn)對(duì)點(diǎn)（Peer-to-Peer）連接的，其中的 RTCPeerConnection就是負(fù)責(zé)建立 P2P 連接以及傳輸多媒體數(shù)據(jù)的 API。

日常生活中，我們大都是通過工作或家庭網(wǎng)絡(luò)進(jìn)行互聯(lián)網(wǎng)訪問，這時(shí)候我們的設(shè)備通常是在防火墻和網(wǎng)絡(luò)訪問轉(zhuǎn)換設(shè)備（NAT）的后面，因此并沒有分配靜態(tài)的公共 IP 地址。更進(jìn)一步來看，NAT 設(shè)備會(huì)將防火墻內(nèi)部的私有 IP 地址轉(zhuǎn)換為面向公眾的IP地址，以確保對(duì)可用公共 IP 地址的安全性和 IPv4 限制。

為了使 WebRTC 技術(shù)正常工作，首先會(huì)向 STUN 服務(wù)器請(qǐng)求一個(gè)面向公眾的 IP 地址。如果這個(gè)請(qǐng)求得到了回應(yīng)，并且我們收到了面向公眾的 IP 地址和端口，就可以告訴其他人如何直接和我們建立連接。而別人也可以使用 STUN 或 TURN 服務(wù)器執(zhí)行相同的操作。

接下來，讓我們一起來看看 WebRTC 的最關(guān)鍵的基礎(chǔ)組件架構(gòu)，這對(duì)于我們后續(xù)理解 WebRTC 的工作原理同樣十分重要。

基本組件架構(gòu)

WebRTC 的組件架構(gòu)分為兩層：應(yīng)用層和核心層。上圖中的綠色部分顯示的是 WebRTC 提供的核心功能，而深紫色部分是瀏覽器提供的 JS 的 API（即瀏覽器對(duì) WebRTC 核心層 C++ API 做了一層封裝，封裝成了 JS 接口）。

圖片最上面的淺紫色指入箭頭是上層應(yīng)用，可以在瀏覽器中直接訪問瀏覽器提供的 API，最終調(diào)用到核心層。

WebRTC的核心層中是沒有視頻的渲染的，所有的渲染都需要瀏覽器層自己做。

WebRTC 中其實(shí)涉及了許多復(fù)雜的技術(shù)議題，比如音頻采集、視頻采集、編解碼處理器等。由于我們本章內(nèi)容是希望可以為大家呈現(xiàn)一個(gè)簡單易懂的 WebRTC 工作流程是，因此關(guān)于更多 WebRTC 技術(shù)的實(shí)現(xiàn)細(xì)節(jié)在本章我們先不一一討論，如果感興趣的小伙伴可點(diǎn)擊進(jìn)入#WebRTC#專欄自行查看。

關(guān)于WebRTC的工作流程，我們從“如何實(shí)現(xiàn)一個(gè) 1 對(duì) 1 通話”場(chǎng)景來看可能會(huì)更直觀一些：

1. 雙方先調(diào)用 getUserMedia 打開本地?cái)z像頭；

2. 向信令服務(wù)器發(fā)送加入房間請(qǐng)求；

3. Peer B 接收到 Peer A 發(fā)送的 offer SDP 對(duì)象，并通過PeerConnection的SetLocalDescription方法保存 Answer SDP 對(duì)象并將它通過信令服務(wù)器發(fā)送給 Peer A。

4. 在 SDP 信息的 offer/answer 流程中，Peer A 和 Peer B 已經(jīng)根據(jù) SDP 信息創(chuàng)建好相應(yīng)的音頻 Channel 和視頻 Channel，并開啟Candidate 數(shù)據(jù)的收集，Candidate數(shù)據(jù)（本地IP地址、公網(wǎng)IP地址、Relay服務(wù)端分配的地址）。

5. 當(dāng) Peer A 收集到 Candidate 信息后通過信令服務(wù)器發(fā)送給 Peer B。同樣的過程 Peer B 對(duì) Peer A 也會(huì)再發(fā)送一次。

這樣 Peer A 和 PeerB 就相互交換了媒體信息及網(wǎng)絡(luò)信息，如果能達(dá)到一致(找到交集)，就可以開始通訊了。

為了幫助大家更好地了解 WebRTC 技術(shù)，我們最新一期的「 Agora talk」，邀請(qǐng)到了來自聲網(wǎng)Agora WebRTC 團(tuán)隊(duì)的工程師。

將會(huì)圍繞“下一代 WebRTC -- 實(shí)時(shí)通信的展望” 的主題和大家分享探討更多有用又有趣技術(shù)細(xì)節(jié)。

點(diǎn)擊【閱讀原文】即可進(jìn)行活動(dòng)預(yù)約～