WebRTC現狀及實現概要

1 引言

1.1 編寫目的

本文講述瀏覽器引入 WebRTC（Web Real-Time Communication） 技術的必要性、WebRTC現狀及實現方法。

2011 年以前，瀏覽器之間要實現實時通信需要私有技術，這些技術大部分都是通過插件和客戶端來安裝使用。對於許多用戶來說，插件的下載、安裝和更新是一個複雜、繁瑣和容易出錯的操作。對於開發人員來說，插件的的調試、測試、部署、錯誤修復和維護同樣很難，同時涉及到的一些技術是受版權保護的，整合也是很複雜的。另外，有時很難說服用戶來安裝插件。

 Google 在 2010 年收購了 GIPS（Global IP Solutions）公司獲得 WebRTC 技術，在 2011 年，按 BSD 協議把 WebRTC 開源了，同年 w3c 啓動 WebRTC 計劃，使 WebRTC成爲 HTML5 標準的一部分，目前該規範還在開發中。

Google 通過把 WebRTC 項目開源，希望瀏覽器廠商能夠將該技術內建在瀏覽器中，從而使Web應用開發人員能夠通過HTML標籤和JavaScript API就實現Web音頻、視頻通信功能。Google 在其官網上列出了使用WebRTC技術的四個理由：

1. 互聯網成功的一個關鍵因素是一些核心技術如HTML、HTTP和TCP/IP是開放和免費實現的。目前，在瀏覽器通信領域還沒有免費、高質量、完整的解決方案。WebRTC就是這樣的技術。
2. 該技術的使用已經超過了 8 年，集成了最佳的音頻、視頻引擎，並被部署到數以百萬的終端中，同時這些技術 Google不收取任何費用。
3. 該技術包含了使用STUN、ICE、TURN、RTP-over-TCP的關鍵NAT和防火牆穿透技術，並支持代理。
4. 通過瀏覽器，WebRTC把通訊雙方的信令狀態直接映射到PeerConnection裏面來抽象信令處理，這樣 開發人員按不同的應用場景選擇不同的會話協議，比如 SIP、XMPP/Jingle等等）。

1.2 定義

WebRTC	WebRTC 是 Web Real-Time Communication 的縮寫，它是一項在瀏覽器內部進行實時數據、視頻和音頻通信的技術，是 Google 2010年以6820萬美元收購Global IP Solutions公司而獲得一項技術。
MediaStreamTrack	媒體數據源，一個媒體數據源構成一個 MediaStreamTrack，比如音頻數據源和視頻數據源，多個相互之間有關聯的媒體數據源（比如有同步關係的音頻視頻媒體數據源）構成一個媒體流（MediaStream）。
MediaStream	媒體流，一個媒體流包含 0 個到多個的媒體數據源，媒體流裏面的數據源在呈現（render）必須同步。 MediaStream 通過 getUserMedia 獲得。
DataChannel	數據通道，兩個 WebRTC 終端的連接建立後，它們可以通過這個數據通道傳輸任意類型的數據。
Peer	通過 WebRTC 進行數據交互的節點或用戶或終端，它通常是一個 Web App，它們之間的發現，連接的建立和斷開通過 signalling（信令）控制。
PeerConnection	表示一個 WebRTC 通訊連接對象，它維護與這個通訊連接相關的 MediaStream，處理通訊雙方信令事件，完成通訊數據的傳輸。
Signalling	信令，WebRTC 網絡通過 Signalling 來發現各個 Peer，通過 Signalling 來控制各個 Peer 之間連接的建立和斷開。
STUN	STUN（Session Traversal Utilities for NAT，NAT會話傳輸應用程序）是一種網絡協議，它允許位於NAT（或多重NAT）後的客戶端找出自己的公網地址，查出自己位於哪種類型的NAT之後以及NAT爲某一個本地端口所綁定的Internet端端口。這些信息被用來在兩個同時處於NAT 路由器之後的主機之間建立UDP通信。該協議由RFC 5389定義。
ICE	交互式連接建立（Interactive Connectivity Establishment），一種綜合性的NAT穿越的技術。 ICE 是由IETF的MMUSIC工作組開發出來的一種framework，可整合各種NAT穿透技術，如STUN、TURN、RSIP（Realm Specific IP，特定域IP）等。該framework可以讓SIP的客戶端利用各種NAT穿透方式打穿遠程的防火牆。
TURN	TURN（Traversal Using Relay NAT），是一種資料傳輸協議（data-transfer protocol）。通過中繼服務器，穿透 NAT 或防火牆使兩個 TCP 或 UPD 客戶端建立連接。

2 參考資料

• WebRTC規範 http://www.w3.org/TR/webrtc/ 
• WebRTC官網 http://datatracker.ietf.org/wg/rtcweb/ 
• WebRTC wiki http://en.wikipedia.org/wiki/WebRTC 
• WebRTC實現 http://www.webrtc.org/ 
• Media Capture and Streams http://dev.w3.org/2011/webrtc/editor/getusermedia.html 
• Mozilla對WebRTC的介紹 https://developer.mozilla.org/zh-CN/docs/WebRTC 
• Html5rocks 的 WebRTC 使用例子 http://www.html5rocks.com/en/tutorials/webrtc/basics/

3 現狀

3.1 規範現狀

規範現已經發布 1.0 版，處在草案狀態，現只支持 1 對 1 通訊，不支持 1 對多通訊，也不支持多對多通訊。

按官網的路線圖，預計 2013 年第一季度發佈正式推薦標準。

3.2 Google WebRTC（http://www.webrtc.org/）庫現狀

WebRTC 已經實現了大部分功能，小部分功能還不是很完善，比如：

• MediaStream 裏的音頻無法給 audio 標籤處理，也無法給其它 Web API（比如 Web Audio）處理；
• ICE 尚未完全兼容規範 RFC 5245，將要發佈的 Chrome M23 會有第一個實現；
• DataChannel 尚未實現，這個主要是因爲標準委員會還在討論該規範。

3.3 瀏覽器實現現狀

Windows 環境下，據說 IE 從版本 10 開始支持，Chrome 從版本 20 開始支持，Firefox 從版本 17（預計在 2013 年 1 月發佈）開始支持，Opera 從版本 12 開始支持，愛立信在 2011-05-26（http://labs.ericsson.com/blog/beyond-html5-experiment-with-real-time-communication-in-a-browser）發佈了一個針對 Ubuntu 修改版的 webkit 可以測試 WebRTC 功能。

手機/平板方面，目前只有愛立信在 2012.10.19 發佈的移動瀏覽器 Bowser 支持（https://labs.ericsson.com/blog/bowser-the-world-s-first-webrtc-enabled-mobile-browser）。Bowser 採用自己實現的 WebRTC 框架（沒有使用 webrtc.org 的框架），媒體引擎採用 GStreamer，在 iTunes App Store 和 Google Play 有下載，運行效果如下圖：

4 設計

4.1 系統框架

如上圖，瀏覽器裏的 WebRTC 有兩個明顯不同的層次：

1. 瀏覽器開發人員關注的 WebRTC C++ API 層
2. Web App 開發人員關注的 Web API 層

圖中，各個功能模塊介紹如下：

4.1.1 Your Web App

Web開發者開發的程序，Web開發者可以基於集成WebRTC的瀏覽器提供的web API開發基於視頻、音頻的實時通信應用。

4.1.2 Web API

面向第三方開發者的WebRTC標準API（Javascript），使開發者能夠容易地開發出類似於網絡視頻聊天的web應用，對應規範參考：http://www.w3.org/TR/webrtc/。

4.1.3 WebRTC C++ API

本地C++ API層，使瀏覽器廠商容易實現WebRTC標準的Web API。

4.1.4 Transport / Session

傳輸/會話層，組件來自 libjingle（但不使用或不要求使用 xmpp/jingle 協議）。

1.RTP/SRTP Stack

實時傳輸協議(SRTP 帶加密)，瀏覽器之間建立連接後，通過 RTP 協議傳輸音視頻數據。

2.STUN/ICE

STUN/ICE 組件允許不同網絡環境下的瀏覽器建立直接或間接的通訊連接。

3.Session Management

是一個抽象會話層，執行會話建立和管理功能，這層協議留給應用開發者實現。

4.1.5 VoiceEngine

音頻引擎是包含一系列音頻多媒體處理的框架，包括從視頻採集卡到網絡傳輸端等整個解決方案。功能包括音頻 iSAC 編碼，iLBC 編碼，音頻抖動緩衝處理，回聲消除，噪音抑制等等。

4.1.6 VideoEngine

視頻引擎是包含一系列視頻處理的整體框架，從攝像頭採集視頻到視頻信息網絡傳輸再到視頻顯示整個完整過程的解決方案。功能包括視頻 VP8 編解碼，視頻抖動緩衝處理和圖像質量增強等等。

4.2 概要設計

WebRTC 由三個部分組成：

1.MediaStream

來自本地的音頻視頻流，或者來自遠端瀏覽器的音頻視頻流。

2.PeerConnection

執行音頻視頻調用，支持加密和帶寬控制。

3.DataChannel

採用點對點傳輸，用來傳輸常規數據。

各部分的關係如下圖：

4.2.1 MediaStream 實現

媒體流，一個媒體流包含 0 個到多個的媒體數據源，媒體流裏面的數據在呈現（render）的時候必須同步進行（就是常說的音視頻同步）。WebRTC 客戶端連接建立後傳遞的數據流就是這個東西。 MediaStream 通過 getUserMedia 獲得，MediaStream 的實現由 w3c 規範 Media Capture and Streams（http://dev.w3.org/2011/webrtc/editor/getusermedia.html）定義。

4.2.2 Signalling 實現

Signalling 也叫信令，它不是 WebRTC 的一部分，但對於 WebRTC 應用來說很重要！

 除了使用 PeerConnection 在客戶端（Peer）之間傳輸數據流（MediaStream），還需要一種機制在客戶端之間傳遞控制信息，通過控制信息處理客戶端之間的發現、連接建立、連接維護和連接關閉等任務，這種機制就是通信領域常說的信令（Signalling）。

信令實現的方法和協議 WebRTC 沒有指定，這樣 WebRTC 應用的開發者就可以採用合適他們的協議，比如 SIP、XMPP 等等，採用其它合適的雙向通訊通道，比如 WebSocket、XMLHttpResuest（XHR）、Google Channel API，來完成信令任務。http://apprtc.appspot.com/ 的測試例子就是通過 Google Channel API 來實現的。

啓動一個 WebRTC 會話，WebRTC 需要以下幾個信息：

• 本地客戶端的配置信息；
• 遠程客戶端的配置信息；
• 遠程參與建立P2P連接的信息：主要是 IP 和端口。

客戶端配置信息叫做 SessionDescription，結構必須符合 Session Description Protocol（SDP，http://tools.ietf.org/html/rfc4566）的要求。

信令的處理過程大致如下：

1. 呼叫方發送 offer；
2. 被呼叫方接受這個 offer；
3. 被呼叫方方式 answer；
4. 呼叫方接受 answer。

上述信令處理過程叫做 JSEP（JavaScript Session Establishment Protocol，規範爲http://datatracker.ietf.org/doc/draft-ietf-rtcweb-jsep/）。JSEP 在最新版本的 chromium 裏有實現參考。

4.2.3 PeerConnection 實現

WebRTC 連接對象，負責客戶端信令處理，連接建立，媒體傳輸等任務。

PeerConnection 參與了 WebRTC 應用開發三個主要模塊：發起連接，接受連接和中止連接。

1. 客戶端發起一個連接的調用圖如下：

2. 客戶端接受一個連接的調用圖如下：

3. 客戶端中止一個連接的調用圖如下：

4.2.4 DataChannel 實現

數據通道，現有規範尚未完善，該功能開源庫 webrtc.org 還在開發中，待 webrtc.org 庫實現後再考慮整合和移植。

5 實現

Chrome 從版本 20 開始支持 WebRTC，實現主要參考 chromium 裏的實現進行移植，主要包括以下幾個方面：

• WebKit 庫方面，除了適配，已經支持 WebRTC，操作如下：
  1. 編譯時啓用宏 ENABLE_MEDIA_STREAM；
  2. 採用 http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/Modules/mediastream 下面的所以 idl 文件，並把生成的 cpp 文件添加到 WebCore工程裏；
  3. 把 http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/Modules/mediastream 下面的所有 cpp 文件添加到 WebCore工程裏；
  4. 把 http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/mediastream 下面的所有 cpp 文件添加到 WebCore工程裏；

• 適配開發

  適配的實現主要是要實現 PeerConnection，參考實現是：

  http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/mediastream/chromium

  （chromium 的適配使用了 http://www.webrtc.org/ 庫）

• WebKit已有實現關鍵類介紹

  1. 各種事件：

  2. MediaStream 的定義及協作圖如下：

  3. MediaStream 適配接口

     其中 MeiaStreamCenterBlackBerry 是 BlackBerry 上的實現，MediaStreamCenterChromium 是 Chromium 的實現，MediaStreamCenterGStreamer 是採用 GStream 框架的實現。

  4. PeerConnection

  5. DataChanne（數據通道）

  6. RTCIceServer（RTC Ice 服務器）

  7. RTCIceCandidate（RTC 參與者）

  8. RTCSessionDescription（RTC 會話描述對象）

6 部署

WebRTC Web APP 應用，不像其它 Web APP 應用，網頁提供代碼，瀏覽器支持就可以了。一個典型的 WebRTC Web APP 應用的部署包括以下 3 個部分：

• Web APP 開發

  參考例子爲：http://webrtc-samples.googlecode.com/svn/trunk/apprtc/index.html

• 信令（Signalling）服務器開發及部署

  參考例子爲：http://webrtc-samples.googlecode.com/svn/trunk/apprtc/apprtc.py

• STUN 或 TURN 服務器開發及部署

  STUN 參考：http://en.wikipedia.org/wiki/STUN

  TURN 參考：http://en.wikipedia.org/wiki/Traversal_Using_Relay_NAT

7 測試

• 採用http://apprtc.appspot.com/ 測試。源碼在：http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/。
• 按教程 http://www.html5rocks.com/en/tutorials/webrtc/basics/ 指導開發 Web APP 進行測試。
• 採用目錄 http://svn.webkit.org/repository/webkit/trunk/LayoutTests/fast/mediastream 下的頁面進行測試