WebRTC 初體驗

WebRTC 是網絡實時通訊（Web Real-Time Communication）的縮寫，經過它 Web 開發者可以輕易快捷地開發出豐富的實時多媒體應用，而無需下載安裝任何插件。

本文總結了我這兩天探究 WebRTC 過程當中瞭解到的相關知識以及我的看法，而且結合我本身的實踐說明了 WebRTC 的一些基本用法。

概述

WebRTC 容許網絡應用創建瀏覽器之間的點對點鏈接，實現視頻流、音頻流或者其餘任意數據的傳輸。

基本全部現代瀏覽器都支持 WebRTC：

WebRTC 主要提供了三個核心的 API：

• getUserMedia：能夠獲取本地的媒體流，一個流包含幾個軌道，好比視頻和音頻軌道。
• RTCPeerConnection：用於創建 P2P 鏈接以及傳輸多媒體數據。
• RTCDataChannel：創建一個雙向通訊的數據通道，能夠傳遞多種數據類型。

經過這三個 API，咱們能夠獲取本地的音視頻流，而後與其餘瀏覽器創建點對點鏈接並將音視頻流發送給對方，還能夠創建一個創建一個雙向的數據通道，發送文本、文件等實時數據。

獲取本地媒體流

經過 getUserMedia 函數，咱們能夠發起獲取本地媒體流的請求：

navigator.getUserMedia(constraints, successCallback, errorCallback);
複製代碼

函數有三個參數，分別是約束條件，成功的回調和失敗的回調。成功獲取媒體流後，媒體流能夠提供給本地的音頻或視頻元素進行播放、後期處理的 JavaScript 代理，或者發送給另外一端。

下面是一個簡單的示例，訪問攝像機並在頁面中播放視頻：

在 CodePen 上查看。

我添加了 WebRTC Adapter 處理瀏覽器的兼容。當點擊按鈕時，經過 getUserMedia 獲取本地視頻，瀏覽器會彈框詢問用戶是否贊成，成功獲取視頻流以後，將流設置爲 video 的源對象。

點對點鏈接

獲取到本地的媒體流以後，爲了實現音視頻通話，接下來須要作的就是將媒體流發送給對方。在 WebRTC 中，通訊雙方直接創建點對點鏈接，數據不須要通過服務器轉發。

要創建一個鏈接須要知道對方的 IP 地址和端口號，而現實網絡環境中，主機一般都處在 NAT 設備以後，也就是常說的內網中。NAT 設備負責內部通訊地址和外部通訊地址之間的互相轉換，例如將 192.168.0.3 映射成 120.132.92.21:9202。經過 NAT，使用少許的公有 IP 地址就能夠表明較多的私有 IP 地址，有助於解決 IPv4 地址枯竭的問題。若是要與內網中的設備創建鏈接，就須要 NAT 穿透（內網穿透）技術。

WebRTC 經過 ICE（Interactive Connectivity Establishment，交互式鏈接創建）來創建 P2P 鏈接。ICE 是一個框架，它整合了 STUN 和 TURN 協議，爲 NAT 穿透技術提供了統一實現。

RTCPeerConnection

WebRTC 中，咱們經過 RTCPeerConnection 創建通訊雙方的點對點鏈接，該接口提供了建立，保持，監控，關閉鏈接的方法的實現。

爲了創建鏈接，咱們須要一臺信令服務器，用於瀏覽器之間創建通訊時交換各類元數據（信令）。同時，還須要 STUN 或者 TURN 服務器來完成 NAT 穿透。鏈接的創建主要包含兩個部分：信令交換和設置 ICE 候選。

鏈接創建成功以後，能夠經過 addStream 加入流到 RTCPeerConnection 中來傳輸媒體流數據，還能夠監聽 addstream 事件獲取對方發送過來的流。

信令交換

信令交換過程以下：

1. 通訊雙方（甲和乙）各建立一個 RTCPeerConnection（簡稱 pc） 實例。
2. 甲經過 createOffer 方法建立一個包含甲的 SDP 描述的 offer 信令。
3. 甲經過 setLocalDescription 方法，將甲的 SDP 描述設置給甲的 pc 實例。
4. 甲將 offer 信令經過信令服務器發送給乙。
5. 乙經過 setRemoteDescription 方法將甲的 SDP 描述設置給乙的 pc 實例。
6. 乙 createAnswer 方法創建一個包含乙的 SDP描述 answer 信令。
7. 乙經過 setLocalDescription 方法，將乙的 SDP 描述設置給乙的 pc 實例。
8. 乙將 answer 信令經過信令服務器發送給甲。
9. 甲經過 setRemoteDescription 方法將乙的 SDP 描述設置給甲的 pc 實例。

其中 SDP 是會話描述協議，用於描述流媒體的初始化參數。

信令的傳輸一般使用 http、WebSocket、DataChannel 三種方式。

添加 ICE 候選

通訊雙方各自建立配置了 ICE 服務器的 pc 實例，並監聽 icecandidate 事件。當 ICE 候選可用時，將會觸發 icecandidate 事件，通訊雙方須要將 ICE 候選信息經過信令服務器發送給對方。當收到對方發送過來的 ICE 候選時，調用 addIceCandidate 方法，將其添加到 pc 實例中。

示例

下面是一個簡單地示例程序，通訊雙方都是本地，省去了信令交換過程。

在 CodePen 上查看。

參考連接

• webrtc.org/
• 實現WebRTC P2P鏈接
• ICE協議下NAT穿越的實現（STUN&TURN）
• P2P技術之STUN、TURN、ICE詳解
• WebRTC介紹及簡單應用