使用 WebRTC 構建簡單的前端視頻通信

01-23

在傳統的 Web 應用中，瀏覽器與瀏覽器之間是無法直接相互通信的，必須藉助伺服器的幫助，但是隨著 WebRTC 在各大瀏覽器中的普及，這一現狀得到了改變。

WebRTC（Web Real-Time Communication，Web實時通信），是一個支持網頁瀏覽器之間進行實時數據傳輸（包括音頻、視頻、數據流）的技術，谷歌於2011年5月開放了工程的源代碼，目前在各大瀏覽器的最新版本中都得到了不同程度的支持。

這篇文章里我們採用 WebRTC 來構建一個簡單的視頻傳輸應用。

一、關於 WebRTC 的一些基本概念

傳統的視頻推流的技術實現一般是這樣的：客戶端採集視頻數據，推流到伺服器上，伺服器再根據具體情況將視頻數據推送到其他客戶端上。

但是 WebRTC 卻截然不同，它可以在客戶端之間直接搭建基於 UDP 的數據通道，經過簡單的握手流程之後，可以在不同設備的兩個瀏覽器內直接傳輸任意數據。

這其中的流程包括：

採集視頻流數據，創建一個 RTCPeerConnection
創建一個 SDP offer 和相應的回應
為雙方找到 ICE 候選路徑
成功創建一個 WebRTC 連接

下面我們介紹這其中涉及到的一些關鍵詞：

1、RTCPeerConnection 對象

RTCPeerConnection 對象是 WebRTC API 的入口，它負責創建、維護一個 WebRTC 連接，以及在這個連接中的數據傳輸。目前新版本的瀏覽器大都支持了這一對象，但是由於目前 API 還不穩定，所以需要加入各個瀏覽器內核的前綴，例如 Chrome 中我們使用 webkitRTCPeerConnection 來訪問它。

2、會話描述協議（SDP，Session Description Protocol）

為了連接到其他用戶，我們必須要對其他用戶的設備情況有所了解，比如音頻視頻的編碼解碼器、使用何種編碼格式、使用何種網路、設備的數據處理能力，所以我們需要一張「名片」來獲得用戶的所有信息，而 SDP 為我們提供了這些功能。

一個 SDP 的握手由一個 offer 和一個 answer 組成。

3、互動式連接建立（ICE，Interactive Connectivity Establishment）

通信的兩側可能會處於不同的網路環境中，有時會存在好幾層的訪問控制、防火牆、路由跳轉，所以我們需要一種方法在複雜的網路環境中找到對方，並且連接到相應的目標。WebRTC 使用了集成了 STUN、TURN 的 ICE 來進行雙方的數據通信。

二、創建一個 RTCPeerConnection

首先我們的目標是在同一個頁面中創建兩個實時視頻，一個的數據直接來自你的攝像頭，另一個的數據來自本地創建的 WebRTC 連接。看起來是這樣的：

首先我們創建一個簡單的 HTML 頁面，含有兩個 video 標籤：

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #theirs{ position: absolute; top: 100px; left: 100px; width: 500px; } #yours{ position: absolute; top: 120px; left: 480px; width: 100px; z-index: 9999; border:1px solid #ddd; } </style></head><body><video id="yours" autoplay></video><video id="theirs" autoplay></video></body><script type="text/javascript" src="./main.js"></script></html>

下面我們創建一個 main.js 文件，先封裝一下各瀏覽器的 userMedia 和 RTCPeerConnection 對象：

function hasUserMedia() { navigator.getUserMedia = navigator.getUserMedia || navigator.msGetUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; return !!navigator.getUserMedia;}function hasRTCPeerConnection() { window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection; return !!window.RTCPeerConnection;}

然後我們需要瀏覽器調用系統的攝像頭 API `getUserMedia` 獲得媒體流，注意要打開瀏覽器的攝像頭限制。Chrome由於安全的問題，只能在 https 下或者 localhost 下打開攝像頭。

沒有意外的話，現在應該能在頁面中看到一個視頻了。

下一步是實現 startPeerConnection 方法，建立傳輸視頻數據所需要的 ICE 通信路徑，這裡我們以 Chrome 為例：

我們使用這個函數創建了兩個連接對象，在 config 里，你可以任意指定 ICE 伺服器，雖然有些瀏覽器內置了默認的 ICE 伺服器，可以不用配置，但還是建議加上這些配置。下面，我們進行 SDP 的握手。

由於是在同一頁面中進行的通信，所以我們可以直接交換雙方的 candidate 對象，但在不同頁面中，可能需要一個額外的伺服器協助這個交換流程。

三、建立 SDP Offer 和 SDP Answer

瀏覽器為我們封裝好了相應的 Offer 和 Answer 方法，我們可以直接使用。

和 ICE 的連接一樣，由於我們是在同一個頁面中進行 SDP 的握手，所以不需要藉助任何其他的通信手段來交換 offer 和 answer，直接賦值即可。如果需要在兩個不同的頁面中進行交換，則需要藉助一個額外的伺服器來協助，可以採用 websocket 或者其它手段進行這個交換過程。

四、加入視頻流

現在我們已經有了一個可靠的視頻數據傳輸通道了，下一步只需要向這個通道加入數據流即可。WebRTC 直接為我們封裝好了加入視頻流的介面，當視頻流添加時，另一方的瀏覽器會通過 `onaddstream` 來告知用戶，通道中有視頻流加入。

yourConnection.addStream(stream);theirConnection.onaddstream = function(e) { theirVideo.src = window.URL.createObjectURL(e.stream);}

以下是完整的 main.js 代碼：