WebRTC學習筆記_Demo收集

1.     WebRTC學習

1.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語言寫的，也不一定與瀏覽器有關。本文是屬於前一種方向。

1.2   WebRTC基本概念學習

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的任務，為此須要借助一個信令server（signaling server）來進行，信令包含3種類型的信息：

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

Network configuration: 兩方的IP地址和port號（局域網內部IP地址需轉換為外部的IP地址）；

Media capabilities: 兩方的瀏覽器支持使用何種codecs以及多高的視頻分辨率。

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

除了信令server，peer跟peer建立連接還須要借助還有一種server（稱為STUN server）實現NAT/Firewall穿越，由於非常多peer是處於私有局域網中，使用私有IP地址，必須轉換為公有IP地址才干相互之間數據傳輸。這當中涉及到一些專業術語包含STUN、TURN、ICE等，詳細的本人還有待學習。網上找到的WebRTC demo好象都用的是Google提供的STUN server。

peer跟peer之間一旦建立連接就能夠直接傳輸音視頻數據流，並不須要借助第三方server中轉。

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。

3.1  http://www.webrtc.org/demo（https://apprtc.appspot.com/）

這是官方的demo，功能非常全，可惜不知為何https://apprtc.appspot.com/這個網址已經連不上了，只是其源代碼還是能夠下載到的，在https://code.google.com/p/webrtc-samples/。此demo沒實用不論什么封裝庫。

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

在我的公司局域網環境里無法執行該demo。

3.2   愛立信實驗室開發的WebRTC 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。

在我的公司局域網環境里無法執行該demo。

3.3   人臉檢測識別

利用WebRTC的getUserMedia從攝像頭獲取圖像進行人臉識別的demo，比如這兩個：

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

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

這兩個demo在PC和手機上的Chrome上都可執行。

3.4   http://www.simpl.info

這個demo演示HTML, CSS and JavaScript的各種feature和用法，包含WebRTC的3個API：getUserMedia、RTCPeerConnection、RTCDataChannel的演示，但遺憾的是RTCPeerConnection的演示僅僅是本地camera的畫面傳回給本地，並沒有實現真正的設備之間音視頻通信。

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

3.5   Framegrabber

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

本人沒有試用過。

3.6   http://webrtc.dennis.is

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

在我的公司局域網環境里無法執行該demo；在家里無線路由器環境下可成功執行，但僅僅能單向傳輸視頻。

3.7   http://v.kainy.cn

國內牛人做的，相當於是漢化版的http://webrtc.dennis.is，自然也是基於webrtc.io實現的，但使用的webrtc.io版本號較老，不支持新版本號Chrome所使用的API名稱webkitRTCPeerConnection，所以無法在新版本號Chrome上執行。詳細介紹在http://blog.kainy.cn/2013/01/webrtc實現的視頻聊天室應用/。

3.8   http://conversat.io

這個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下載信令server源代碼，該信令server是SimpleWebRTC缺省使用的，解開該源代碼后執行node server.js，該服務器監聽8888port，通過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名稱了。

3.9   國內牛人開發的視頻聊天室應用

這個demo是國內牛人趙書劍開發的視頻聊天室，基於webrtc.io實現。

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

經改動后在本人公司局域網成功執行，試過兩個手機和一個筆記本電腦同一時候視頻通信OK。改動和執行步驟：

1.     從http://ishare.iask.sina.com.cn/f/35083616.html下載webrtc.chatdemo.zip，解壓縮，改動當中public\javascripts\client.js中的rtc.connect一行，將實際的server地址寫進去，比如改為：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名稱（隨便起）就可以開始多方視頻通信。

轉自：http://blog.sina.com.cn/s/blog_69a04cf401016gz4.html

本人使用3.8在本地調試執行成功。