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