1.1 ? WebRTC現(xiàn)狀

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

最近得知Google最新版的Chrome for Android已經(jīng)支持WebRTC，
應(yīng)老板的要求搭一個手機瀏覽器上視頻通信的demo，
為此在網(wǎng)上搜集各種資料，發(fā)現(xiàn)經(jīng)過一年多的發(fā)展，
國內(nèi)外研究和使用WebRTC的人明顯多起來，可用的demo也很多。
在此做一個筆記，留作日后參考。


目前基于WebRTC的開發(fā)其實有兩個方向，
一個是基于瀏覽器的WebRTC應(yīng)用開發(fā)，編程語言主要是JavaScript、HTML等，
這也是WebRTC作為HTML5標準的組成部分原本的目的；


另一個是C層面的移植和開發(fā)，作為一款非常強大的開源軟件，
很多領(lǐng)域的軟件項目都可以利用到WebRTC的音視頻通信和處理能力，
這些場合的應(yīng)用程序可能是C語言寫的，也不一定與瀏覽器有關(guān)。
本文是屬于前一種方向。

1.2 WebRTC基本概念學習

WebRTC的官方資料可以從其官網(wǎng)http://www.webrtc.org/
和W3C網(wǎng)站http://www.w3.org/TR/webrtc/上看到。

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

對瀏覽器來說，WebRTC其實就是提供了3個API：
. MediaStream (即getUserMedia)，用于獲取媒體數(shù)據(jù)，例如來自攝像頭和麥克風的視頻流和音頻流；
. RTCPeerConnection，用于peer跟peer之間呼叫和建立連接以便傳輸音視頻數(shù)據(jù)流；
. RTCDataChannel，用于peer跟peer之間傳輸音視頻之外的一般數(shù)據(jù)。

需要注意的是這幾個API的名稱在不同瀏覽器及同一瀏覽器的不同版本之間略有差異，
比如PeerConnection在FireFox上叫做mozRTCPeerConnection，
而在當前版本的Chrome上叫做webkitRTCPeerConnection，
將來WebRTC標準化完成后會把這些前綴去掉使用統(tǒng)一的名稱。

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

WebRTC是實現(xiàn)peer to peer的實時通信（可以兩個或多個peer之間），
在能夠通信前peer跟peer之間必須建立連接，這是RTCPeerConnection的任務(wù)，
為此需要借助一個信令服務(wù)器（signaling server）來進行，信令包括3種類型的信息：
?. Session control messages: 初始化和關(guān)閉通信，及報告錯誤；
?. Network configuration: 雙方的IP地址和端口號（局域網(wǎng)內(nèi)部IP地址需轉(zhuǎn)換為外部的IP地址）；
?. Media capabilities: 雙方的瀏覽器支持使用何種codecs以及多高的視頻分辨率。

WebRTC并未規(guī)定使用何種信令機制和消息協(xié)議，
象SIP、XMPP、XHR、WebSocket這些技術(shù)都可以用作WebRTC的信令通信。

除了信令服務(wù)器，peer跟peer建立連接還需要借助另一種服務(wù)器
（稱為STUN server）實現(xiàn)NAT/Firewall穿越，因為很多peer是處于私有局域網(wǎng)中，
使用私有IP地址，必須轉(zhuǎn)換為公有IP地址才能相互之間傳輸數(shù)據(jù)。
這其中涉及到一些專業(yè)術(shù)語包括STUN、TURN、ICE等，具體的本人還有待學習。
網(wǎng)上找到的WebRTC demo好象都用的是Google提供的STUN server。

peer跟peer之間一旦建立連接就可以直接傳輸音視頻數(shù)據(jù)流，
并不需要借助第三方服務(wù)器中轉(zhuǎn)。

二. WebRTC封裝庫

WebRTC的目的是為了簡化基于瀏覽器的實時數(shù)據(jù)通信的開發(fā)工作量，
但實際應(yīng)用編程還是有點復雜，尤其調(diào)用RTCPeerConnection必須對如何建立連接、
交換信令的流程和細節(jié)有較深入的理解。

因此有高人為我們開發(fā)了WebRTC封裝庫，將WebRTC的調(diào)用細節(jié)封裝起來，包裝成更簡單的API，
使開發(fā)應(yīng)用程序更簡單。
封裝庫的另一個目的是為了屏蔽不同瀏覽器之間的差異，例如上面說的API名稱的差異。
當然，這些庫都是開源的，可以根據(jù)自己的需要重新修改。

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

三、 WebRTC demo試用

網(wǎng)上可以找到一堆WebRTC demo，在code.google.com上也能找到不少WebRTC應(yīng)用項目的源碼。
有些demo是直接調(diào)用WebRTC API開發(fā)的，但大多數(shù)是調(diào)用上述兩種WebRTC封裝庫開發(fā)的。
由于WebRTC API的名稱在不同瀏覽器及同一瀏覽器的不同版本之間存在差異，
所以不是所有demo都能運行在所有瀏覽器上。

為了找到一個可在公司局域網(wǎng)環(huán)境中跑在手機上的WebRTC demo，本人試用了不少demo，
下面選幾個有代表性的介紹，其中有兩個經(jīng)修改后已在本人公司的局域網(wǎng)環(huán)境中運行成功。

先說一下本人的測試環(huán)境：手機上的瀏覽器是Chrome for Android 26.0.1410.49，
運行在Android 4.1.2上，這個Chrome版本本身是beta版，支持WebRTC但缺省是關(guān)閉WebRTC功能的，
需要在chrome://flags中使能WebRTC并重啟Chrome，
或者在啟動Chrome時增加命令行選項--enable-webrtc。
本人在PC上運行WebRTC的瀏覽器是Chrome 26.0.1410.43，操作系統(tǒng)是Windows 7。

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

這是官方的demo，功能很全，
這個網(wǎng)站 https://apprtc.appspot.com/ 不能直接從國內(nèi)上去，需要FQ才行，
它的源碼原來是在https://code.google.com/p/webrtc-samples/上，
現(xiàn)在下不了了。
此demo沒有用任何封裝庫。

這個demo所使用的信令機制使用了XHR和Google App Engine Channel API ，具體我不懂。
在我的公司局域網(wǎng)環(huán)境里無法運行該demo。

3.2 ?愛立信實驗室開發(fā)的WebRTC demo

據(jù)說是第一個基于瀏覽器的WebRTC視頻通信demo，
愛立信為此還開發(fā)了一個瀏覽器用于支持WebRTC，好象也是基于WebKit的，
叫做Bowser browser（當時市場上可能還沒有支持WebRTC的瀏覽器），
該項目網(wǎng)址是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的網(wǎng)址是http://webrtc.labs.ericsson.net:8082。
在我的公司局域網(wǎng)環(huán)境里無法運行該demo。

3.3 ? 人臉檢測識別

利用WebRTC的getUserMedia從攝像頭獲取圖像進行人臉識別的demo，例如這兩個：
http://neave.com/webcam/html5/face/
http://www.raymondcamden.com/demos/2012/mar/29/test1.html
前面這個在PC和手機上的Chrome上都可運行，后面那個不行

3.4 ? http://www.simpl.info

這個demo演示HTML, CSS and JavaScript的各種feature和使用方法，
包括WebRTC的3個API：
?. getUserMedia、
?. RTCPeerConnection、
?. RTCDataChannel的演示，
但遺憾的是RTCPeerConnection的演示只是本地camera的畫面?zhèn)骰亟o本地，
并沒有實現(xiàn)真正的設(shè)備之間音視頻通信。
該項目的源碼在https://github.com/samdutton/simpl。

3.5 ? Framegrabber

這是一個基于WebRTC實現(xiàn)屏幕共享（screensharing）的Chrome擴展，
源碼在https://github.com/samdutton/rtcshare，
有關(guān)介紹可參考這篇文章：http://blog.sina.com.cn/s/blog_51396f890102es7k.html。
沒試用過。

3.6 ? http://webrtc.dennis.is

這個demo是基于庫webrtc.io實現(xiàn)的，是webrtc.io官方的demo，使用WebSocket作為信令手段。
在我的公司局域網(wǎng)環(huán)境里無法運行該demo；
在家里無線路由器環(huán)境下可成功運行，但只能單向傳輸視頻。

3.7 ? http://v.kainy.cn

國內(nèi)牛人做的，相當于是漢化版的http://webrtc.dennis.is，
自然也是基于webrtc.io實現(xiàn)的，但使用的webrtc.io版本較老，
不支持新版本Chrome所使用的API名稱webkitRTCPeerConnection，
所以無法在新版本Chrome上運行。
具體介紹在http://blog.kainy.cn/2013/01/webrtc實現(xiàn)的視頻聊天室應(yīng)用/。

3.8 ? http://conversat.io

這個demo是基于庫SimpleWebRTC實現(xiàn)的，是SimpleWebRTC官方的demo，使用WebSocket作為信令手段。

在我的公司局域網(wǎng)環(huán)境里無法運行該demo；
在家里無線路由器環(huán)境下可成功運行，且可雙向傳視頻，支持多個peer同時視頻通信。


經(jīng)修改后在本人公司局域網(wǎng)成功運行，
試過兩個手機和一個筆記本電腦同時視頻通信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下載信令服務(wù)器源碼，
? ?該信令服務(wù)器是SimpleWebRTC缺省使用的，解開該源碼后運行node server.js，
? ?該服務(wù)器監(jiān)聽8888端口，通過WebSocket與瀏覽器通信。


4. 在同一臺PC上運行apache server，
? ?將從http://conversat.io網(wǎng)站扒下來的文件放到該server上
? （可在Chrome瀏覽器中打開http://conversat.io然后鼠標右鍵單擊在菜單中選
? ?“另存為”、“網(wǎng)頁，全部”即可），修改其中的 index.html 和 simplewebrtc.js，
? ? 將其中 url 改為'http://10.100.156.83:8888'（其中IP地址是我的PC在公司局域網(wǎng)中的IP地址）。


5. 在同一局域網(wǎng)中的其他設(shè)備上打開Chrome瀏覽器，
? ?地址欄輸入http://10.100.156.83，輸入相同的room名稱（隨便起）即可開始多方視頻通信，
? ?也可修改上述index.html中的“var room”一行，設(shè)定為固定的room名稱，
? ?就不需要每次在每個設(shè)備上手工輸入room名稱了。

3.9 ? 國內(nèi)人開發(fā)的視頻聊天室應(yīng)用

這個demo是國內(nèi)人趙書劍開發(fā)的視頻聊天室，基于webrtc.io實現(xiàn)。
該項目源碼和文檔下載地址是:
? 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一行，
將實際的服務(wù)器地址寫進去，例如改為：
? rtc.connect("ws://10.100.156.83:8001", room);


2. 安裝node.js
從http://www.nodejs.org/download/下載nodejs最新版并安裝，
? ?我是在Windows7 64位上安裝的；
在命令行下依次運行如下命令（安裝運行signaling server所需的模塊）：
npm install express
npm install yetify
npm install getconfig
npm install node-uuid
npm install socket.io


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


4.在同一局域網(wǎng)中的其他設(shè)備上打開Chrome瀏覽器，
地址欄輸入http://10.100.156.83:8000，
輸入相同的room名稱（隨便起）即可開始多方視頻通信。


我對照做了安裝和修改，測試失敗，
能看到房間有人進來和退出，但無法進行文件和視頻聊天。

總結(jié)

以上是生活随笔為你收集整理的WebRTC学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。