WebRTC學習筆記

1.     WebRTC學習

本人最早接觸WebRTC是在2011年底，那時Google已經在Android源碼中加入了webrtc源碼，放在/external/webrtc/，但是Android并沒有用到它，更沒有被浏覽器使用。當時試圖在Android 2.3（Gingerbread）高通平台的手機上用H.264 硬體codec替換掉WebRTC預設使用的VP8軟codec，費了不少勁勉強換掉後效果很差隻得放棄。

最近得知Google最新版的Chrome for Android已經支援WebRTC，應老闆的要求搭一個手機浏覽器上視訊通信的demo，為此在網上搜集各種資料，發現經過一年多的發展，國内外研究和使用WebRTC的人明顯多起來，可用的demo也很多。在此做一個筆記，留作日後參考。

目前基于WebRTC的開發其實有兩個方向，一個是基于浏覽器的WebRTC應用開發，程式設計語言主要是JavaScript、HTML等，這也是WebRTC作為HTML5标準的組成部分原本的目的；另一個是C層面的移植和開發，作為一款非常強大的開源軟體，很多領域的軟體項目都可以利用到WebRTC的音視訊通信和處理能力，這些場合的應用程式可能是C語言寫的，也不一定與浏覽器有關。本文是屬于前一種方向。

WebRTC的官方資料可以從其官網http://www.webrtc.org/和W 3C網站http://www.w3.org/TR/webrtc/上看到。

學習WebRTC基礎知識比較好的網站是《Getting Started with WebRTC》，網址是http://www.html5rocks.com/en/tutorials/webrtc/basics/，這個也是官網上推薦的。

對浏覽器來說，WebRTC其實就是提供了3個API：

MediaStream (即getUserMedia)，用于擷取媒體資料，例如來自攝像頭和麥克風的視訊流和音頻流；

RTCPeerConnection，用于peer跟peer之間呼叫和建立連接配接以便傳輸音視訊資料流；

RTCDataChannel，用于peer跟peer之間傳輸音視訊之外的一般資料。

需要注意的是這幾個API的名稱在不同浏覽器及同一浏覽器的不同版本之間略有差異，比如PeerConnection在FireFox上叫做mozRTCPeerConnection，而在目前版本的Chrome上叫做webkitRTCPeerConnection，将來WebRTC标準化完成後會把這些字首去掉使用統一的名稱。

目前網上找到的WebRTC demo都隻用到了getUserMedia和RTCPeerConnection這兩個API，另一個API即RTCDataChannel似乎目前還不太成熟。

WebRTC是實作peer to peer的實時通信（可以兩個或多個peer之間），在能夠通信前peer跟peer之間必須建立連接配接，這是RTCPeerConnection的任務，為此需要借助一個信令伺服器（signaling server）來進行，信令包括3種類型的資訊：

Session control messages: 初始化和關閉通信，及報告錯誤；

Network configuration: 雙方的IP位址和端口号（區域網路内部IP位址需轉換為外部的IP位址）；

Media capabilities: 雙方的浏覽器支援使用何種codecs以及多高的視訊分辨率。

WebRTC并未規定使用何種信令機制和消息協定，象SIP、XMPP、XHR、WebSocket這些技術都可以用作WebRTC的信令通信。

除了信令伺服器，peer跟peer建立連接配接還需要借助另一種伺服器（稱為STUN server）實作NAT/Firewall穿越，因為很多peer是處于私有區域網路中，使用私有IP位址，必須轉換為公有IP位址才能互相之間傳輸資料。這其中涉及到一些專業術語包括STUN、TURN、ICE等，具體的本人還有待學習。網上找到的WebRTC demo好象都用的是Google提供的STUN server。

peer跟peer之間一旦建立連接配接就可以直接傳輸音視訊資料流，并不需要借助第三方伺服器中轉。

2.     WebRTC封裝庫

WebRTC的目的是為了簡化基于浏覽器的實時資料通信的開發工作量，但實際應用程式設計還是有點複雜，尤其調用RTCPeerConnection必須對如何建立連接配接、交換信令的流程和細節有較深入的了解。是以有高人為我們開發了WebRTC封裝庫，将WebRTC的調用細節封裝起來，包裝成更簡單的API，使開發應用程式更簡單。封裝庫的另一個目的是為了屏蔽不同浏覽器之間的差異，例如上面說的API名稱的差異。當然，這些庫都是開源的，可以根據自己的需要重新修改。

目前網上找到的有兩種WebRTC封裝庫，一個是webrtc.io，網址是https://github.com/webRTC/webRTC.io，上面有詳細說明和使用方法，有很多demo使用它；另一個是SimpleWebRTC，網址是https://github.com/HenrikJoreteg/SimpleWebRTC，貌似比webrtc.io用起來更簡單。

3.     WebRTC demo試用

網上可以找到一堆WebRTC demo，在code.google.com上也能找到不少WebRTC應用項目的源碼。有些demo是直接調用WebRTC API開發的，但大多數是調用上述兩種WebRTC封裝庫開發的。由于WebRTC API的名稱在不同浏覽器及同一浏覽器的不同版本之間存在差異，是以不是所有demo都能運作在所有浏覽器上。

為了找到一個可在公司區域網路環境中跑在手機上的WebRTC demo，本人試用了不少demo，下面選幾個有代表性的介紹，其中有兩個經修改後已在本人公司的區域網路環境中運作成功。

先說一下本人的測試環境：手機上的浏覽器是Chrome for Android 26.0.1410.49，運作在Android 4.1.2上，這個Chrome版本本身是beta版，支援WebRTC但預設是關閉WebRTC功能的，需要在chrome://flags中使能WebRTC并重新開機Chrome，或者在啟動Chrome時增加指令行選項--enable-webrtc。本人在PC上運作WebRTC的浏覽器是Chrome 26.0.1410.43，作業系統是Windows 7。

這是官方的demo，功能很全，可惜不知為何https://apprtc.appspot.com/這個網址已經連不上了，不過其源碼還是可以下載下傳到的，在https://code.google.com/p/webrtc-samples/。此demo沒有用任何封裝庫。

這個demo所使用的信令機制使用了XHR和Google App Engine Channel API ，具體我不懂。

在我的公司區域網路環境裡無法運作該demo。

據說是第一個基于浏覽器的WebRTC視訊通信demo，愛立信為此還開發了一個浏覽器用于支援WebRTC，好象也是基于WebKit的，叫做Bowser browser（當時市場上可能還沒有支援WebRTC的浏覽器），該項目網址是https://labs.ericsson.com/apps/bowser。這個Bowser browser好象隻支援Ubuntu 11.04 and 11.10（見https://labs.ericsson.com/apis/web-real-time-communication/downloads）。

該demo的網址是http://webrtc.labs.ericsson.net:8082。

利用WebRTC的getUserMedia從攝像頭擷取圖像進行人臉識别的demo，例如這兩個：

http://neave.com/webcam/html5/face/

http://www.raymondcamden.com/demos/2012/mar/29/test1.html

這兩個demo在PC和手機上的Chrome上都可運作。

這個demo示範HTML, CSS and JavaScript的各種feature和使用方法，包括WebRTC的3個API：getUserMedia、RTCPeerConnection、RTCDataChannel的示範，但遺憾的是RTCPeerConnection的示範隻是本地camera的畫面傳回給本地，并沒有實作真正的裝置之間音視訊通信。

該項目的源碼在https://github.com/samdutton/simpl。

這是一個基于WebRTC實作螢幕共享（screensharing）的Chrome擴充，源碼在https://github.com/samdutton/rtcshare，有關介紹可參考這篇文章：http://blog.sina.com.cn/s/blog_51396f890102es7k.html。

本人沒有試用過。

這個demo是基于庫webrtc.io實作的，是webrtc.io官方的demo，使用WebSocket作為信令手段。

在我的公司區域網路環境裡無法運作該demo；在家裡無線路由器環境下可成功運作，但隻能單向傳輸視訊。

國内牛人做的，相當于是漢化版的http://webrtc.dennis.is，自然也是基于webrtc.io實作的，但使用的webrtc.io版本較老，不支援新版本Chrome所使用的API名稱webkitRTCPeerConnection，是以無法在新版本Chrome上運作。具體介紹在http://blog.kainy.cn/2013/01/webrtc實作的視訊聊天室應用/。

這個demo是基于庫SimpleWebRTC實作的，是SimpleWebRTC官方的demo，使用WebSocket作為信令手段。

在我的公司區域網路環境裡無法運作該demo；在家裡無線路由器環境下可成功運作，且可雙向傳視訊，支援多個peer同時視訊通信。

經修改後在本人公司區域網路成功運作，試過兩個手機和一個筆記本電腦同時視訊通信OK。修改和運作步驟：

1.     從http://www.nodejs.org/download/下載下傳nodejs最新版并安裝，我是在Windows7 64位上安裝的；

2.     在指令行下依次運作如下指令（安裝運作signaling server所需的子產品）：

npm install express

npm install yetify

npm install getconfig

npm install node-uuid

npm install socket.io

3.     從https://github.com/andyet/signalmaster下載下傳信令伺服器源碼，該信令伺服器是SimpleWebRTC預設使用的，解開該源碼後運作node server.js，該伺服器監聽8888端口，通過WebSocket與浏覽器通信。

4.     在同一台PC上運作apache server，将從http://conversat.io網站扒下來的檔案放到該server上（可在Chrome浏覽器中打開http://conversat.io然後滑鼠右鍵單擊在菜單中選“另存為”、“網頁，全部”即可），修改其中的 index.html 和 simplewebrtc.js，将其中 url 改為'http://10.100.156.83:8888'（其中IP位址是我的PC在公司區域網路中的IP位址）。

5.     在同一區域網路中的其他裝置上打開Chrome浏覽器，位址欄輸入http://10.100.156.83，輸入相同的room名稱（随便起）即可開始多方視訊通信，也可修改上述index.html中的“var room”一行，設定為固定的room名稱，就不需要每次在每個裝置上手工輸入room名稱了。

這個demo是國内牛人趙書劍開發的視訊聊天室，基于webrtc.io實作。

該項目源碼和文檔下載下傳位址是http://ishare.iask.sina.com.cn/f/35083616.html，源碼在https://github.com/zsj2145676。

1.     從http://ishare.iask.sina.com.cn/f/35083616.html下載下傳webrtc.chatdemo.zip，解壓縮，修改其中public\javascripts\client.js中的rtc.connect一行，将實際的伺服器位址寫進去，例如改為：rtc.connect("ws://10.100.156.83:8001", room);

2.     同上文3.8節步驟1、2安裝nodejs

3.     運作node app.js，注意該demo本身已包含http server，不需要其他的比如apache server

4.     在同一區域網路中的其他裝置上打開Chrome浏覽器，位址欄輸入http://10.100.156.83:8000，輸入相同的room名稱（随便起）即可開始多方視訊通信。