通過(guò)WebRTC實(shí)現(xiàn)實(shí)時(shí)視頻通信（一）
通過(guò)WebRTC實(shí)現(xiàn)實(shí)時(shí)視頻通信（一）
WebRTC，名稱(chēng)源自網(wǎng)頁(yè)實(shí)時(shí)通信（Web Real-Time Communication）的縮寫(xiě)，是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話(huà)或視頻對(duì)話(huà)的API。它于2011年6月1日開(kāi)源并在Google、Mozilla基金會(huì)、Opera支持下被包括進(jìn)萬(wàn)維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn)。
不需要插件的實(shí)時(shí)通信
想像一下，如果你的手機(jī)、電視、電腦都可以通過(guò)一個(gè)平臺(tái)進(jìn)行通信，想像一下你可以在Web應(yīng)用中輕松地加入視頻聊天和p2p數(shù)據(jù)分享，你還沒(méi)有興奮嗎？這就是WebRTC。
想試一試嗎？WebRTC現(xiàn)在已經(jīng)被集成到Chrome，Opera和火狐上了，你可以試試這個(gè)應(yīng)用：
-
在Chrome、Opera或Firefox中打開(kāi)apprtc.appspot.com。
-
點(diǎn)擊允許按鈕允許應(yīng)用使用你的攝像頭。
-
在新的選項(xiàng)卡，甚至在另外一臺(tái)電腦上打開(kāi)正文顯示的URL。
這里是這個(gè)應(yīng)用的具體教程： later in this article。
開(kāi)始
如果你沒(méi)有時(shí)間閱讀這個(gè)系列的文章，想直接編碼，你可以這樣：
-
你果你沒(méi)有用過(guò)getUserMedia，要先學(xué)習(xí)一下它，教程：HTML5 Rocks article ，Demo：simpl.info/gum。
-
掌握RTCPeerConnection API，教程：simple example below ，Demo：simpl.info/pc,。
-
了解一下WebRTC的實(shí)現(xiàn)、防火墻和NAT轉(zhuǎn)發(fā)，教程：apprtc.appspot.com.
-
webRTC使用大頭照拍攝：gbtags.com/gb/share/2491.htm
或者你可以直接跳到這一步：在WebRTC codelab上一步一步的學(xué)習(xí)如何構(gòu)建一個(gè)完整的視頻聊天應(yīng)用程序，包括一個(gè)簡(jiǎn)單的信號(hào)服務(wù)器。
關(guān)于WebRTC的小故事
其實(shí)一個(gè)Web開(kāi)發(fā)的終極挑戰(zhàn)就是通過(guò)音頻和視頻進(jìn)行實(shí)時(shí)通信，視頻通信應(yīng)該像文本通信一樣自然，如果沒(méi)有它，我們?cè)谟脩?hù)交互方面的創(chuàng)新能力會(huì)受到限制。
在過(guò)去，實(shí)時(shí)通信都比較復(fù)雜，需要非常豐富的音頻和視頻技術(shù)才能被進(jìn)行開(kāi)發(fā)。 完整的實(shí)現(xiàn)實(shí)時(shí)通信需要整合大量的數(shù)據(jù)和服務(wù)，在Web上實(shí)現(xiàn)尤其困難。
2008年，Gmail視頻聊天火了。2011年谷歌發(fā)布了Hangouts，收購(gòu)了GIPS，GIPS是一個(gè)RTC方向的公司，然后開(kāi)源了它的相關(guān)技術(shù)，在同年5月，愛(ài)立信構(gòu)建了 第一個(gè)WebRTC的實(shí)現(xiàn)。
Hangouts 是谷歌在2013年的Google I/O大會(huì)上發(fā)布了統(tǒng)一消息服務(wù)，整合了此前的Google Talk、Google+ Messenger和 Hangouts視頻聊天服務(wù)等產(chǎn)品。新的Hangouts完全基于云計(jì)算技術(shù)，將成為谷歌其他服務(wù)的一大支柱。盡管谷歌在熱門(mén)的移動(dòng)消息應(yīng)用市場(chǎng)動(dòng)作較 慢，但谷歌正在為未來(lái)的發(fā)展做準(zhǔn)備。從表面來(lái)看，Hangouts是類(lèi)似WhatsApp和Facebook Messenger的又一款消息應(yīng)用。
WebRTC目前用做實(shí)時(shí)通信、免費(fèi)視頻插件、音頻和視頻數(shù)據(jù)傳輸。以下是實(shí)際的應(yīng)用：
-
很多Web服務(wù)已經(jīng)使用了RTC，但是都需要下載插件或是原生app，比如Skype，F(xiàn)acebook和Google Hangouts。
-
下載安裝更新插件非常麻煩。
-
插件不容易發(fā)現(xiàn)問(wèn)題，測(cè)試很困難，大部分都需要授權(quán)，開(kāi)發(fā)成本太高。
安全性
這里有幾個(gè)實(shí)時(shí)通信應(yīng)用可以出現(xiàn)的安全性問(wèn)題：
-
未加密的媒體數(shù)據(jù)流可以會(huì)在瀏覽器或通信途中被獲取。
-
應(yīng)用可能會(huì)在用戶(hù)不知情的情況下記錄視頻和其它信息。
-
惡意軟件或病毒可能被安裝在一個(gè)不起眼的插件或應(yīng)用中。
WebRTC通過(guò)各種特性避免了這些問(wèn)題：
-
對(duì)數(shù)據(jù)流和信號(hào)量進(jìn)行編碼加密。
-
。WebRTC 不是一個(gè)插件，可以運(yùn)行在瀏覽器的沙箱中，組件不需要單獨(dú)安裝。
-
攝像頭和手機(jī)必須通過(guò)嚴(yán)格的授權(quán)，只有在顯示用戶(hù)界面的時(shí)候才能調(diào)用。
關(guān)于WebRTC安全性的詳細(xì)討論不在本文的講解范圍內(nèi)，如果你想了解更多這方面的問(wèn)題，可以看一看IETF提供的 WebRTC Security Architecture。
開(kāi)發(fā)者工具
-
當(dāng)WebRTC會(huì)話(huà)被創(chuàng)建的時(shí)候，chrome://webrtc-internals (opera://webrtc-internals )就會(huì)提供會(huì)話(huà)詳細(xì)的數(shù)據(jù)流和圖表：
chrome://webrtc-internals 截圖
-
跨瀏覽器的 interop notes
-
adapter.js 是一個(gè)JavaScript 的WebRTC適配， 由Google貢獻(xiàn)，它可以解決瀏覽器差異化的規(guī)范的變化。
-
想了解更多WebRTC信號(hào)量，可以通過(guò)apprtc.appspot.com 查看輸出日至。
-
如果你覺(jué)得麻煩可以用WebRTC 框架 甚至是完整的 WebRTC 服務(wù)。
-
Chrome bugsBug報(bào)告：crbug.com/new 。Opera：bugs.opera.com/wizard/ 。Firefox：bugzilla.mozilla.org。
在哪里使用WebRTC
WebRTC有以下三個(gè)API：
-
MediaStream (別名 getUserMedia)
getUserMedia 可以在Chrome, Opera 和 Firefox中實(shí)現(xiàn)。 你可以看看這個(gè)跨平臺(tái)的Demo：simpl.info/gum 和Chris Wilson的 例子 ，讓getUserMedia作為音頻的輸入。
RTCPeerConnection 是在Chrome中和Android設(shè)備中使用，經(jīng)過(guò)幾次迭代之后RTCPeerConnection現(xiàn)在支持 Chrome and Opera 作為webkitRTCPeerConnection，F(xiàn)irefox 作為mozRTCPeerConnection。
RTCDataChannel 支持Chrome 25, Opera 18 和Firefox 22 以上的版本。
通常有報(bào)道說(shuō)一個(gè)平臺(tái)支持WebRTC，一般都說(shuō)他們支持getUserMedia，而不支持其它RTC組件，開(kāi)發(fā)的時(shí)候需要先弄清楚。
我的第一個(gè)WebRTC項(xiàng)目
WebRTC 項(xiàng)目需要做以下幾件事情：
-
取到音頻、視頻或其它數(shù)據(jù)的數(shù)據(jù)流。
-
得到網(wǎng)絡(luò)信息，如IP地址和端口，通過(guò)網(wǎng)絡(luò)和其它WebRTC客戶(hù)端交換數(shù)據(jù)，解決防火墻的NAT轉(zhuǎn)發(fā)的問(wèn)題。
-
協(xié)調(diào)信號(hào)來(lái)報(bào)告錯(cuò)誤，啟動(dòng)或關(guān)閉會(huì)話(huà)。
-
交換媒體和客戶(hù)端信息，處理如分辨率和編碼解碼器問(wèn)題。dia and client capability, such as resolution and codecs.
-
數(shù)據(jù)流通信。
為了實(shí)現(xiàn)數(shù)據(jù)流之間的通信，WebRTC實(shí)現(xiàn)了以下的接口:
-
MediaStream: 取得數(shù)據(jù)流，比如從攝像頭和手機(jī)中獲取。
-
RTCPeerConnection: 音頻和視頻通話(huà)，設(shè)備加密和帶寬管理。
-
RTCDataChannel: 點(diǎn)對(duì)點(diǎn)通信。
總結(jié)
大家應(yīng)該大概明白WebRTC的概要了。在下一篇文章中，我們會(huì)針對(duì)這三個(gè)API來(lái)具體的講解構(gòu)建WebRTC的流程。
浙公網(wǎng)安備 33010602011771號(hào)