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/

和W3C網站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之間一旦建立連接配接就可以直接傳輸音視訊資料流，

并不需要借助第三方伺服器中轉。

二. WebRTC封裝庫

WebRTC的目的是為了簡化基于浏覽器的實時資料通信的開發工作量，

但實際應用程式設計還是有點複雜，尤其調用RTCPeerConnection必須對如何建立連接配接、

交換信令的流程和細節有較深入的了解。

是以有高人為我們開發了WebRTC封裝庫，将WebRTC的調用細節封裝起來，包裝成更簡單的API，

使開發應用程式更簡單。

封裝庫的另一個目的是為了屏蔽不同浏覽器之間的差異，例如上面說的API名稱的差異。

當然，這些庫都是開源的，可以根據自己的需要重新修改。

目前網上找到的有兩種WebRTC封裝庫，

1) webrtc.io，網址是https://github.com/webRTC/webRTC.io，

   上面有詳細說明和使用方法，有很多demo使用它；

2) SimpleWebRTC，網址是https://github.com/HenrikJoreteg/SimpleWebRTC，

   貌似比webrtc.io用起來更簡單。

三、 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/ 不能直接從國内上去，需要FQ才行，

它的源碼原來是在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

前面這個在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作為信令手段。

在家裡無線路由器環境下可成功運作，且可雙向傳視訊，支援多個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. 安裝node.js

從http://www.nodejs.org/download/下載下傳nodejs最新版并安裝，

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

3.運作node app.js，注意該demo本身已包含http server，

  不需要其他的http server,比如apache server

4.在同一區域網路中的其他裝置上打開Chrome浏覽器，

位址欄輸入http://10.100.156.83:8000，

輸入相同的room名稱（随便起）即可開始多方視訊通信。

我對照做了安裝和修改，測試失敗，

能看到房間有人進來和退出，但無法進行檔案和視訊聊天。