通過WebRTC實現實時視頻通信(一)

tyygming 10年前發布 | 50K 次閱讀 JavaScript webRTC HTML5

通過WebRTC實現實時視頻通信(一)

通過WebRTC實現實時視頻通信(二)

通過WebRTC實現實時視頻通信(三)

WebRTC,名稱源自網頁實時通信(Web Real-Time Communication)的縮寫,是一個支持網頁瀏覽器進行實時語音對話或視頻對話的API。它于2011年6月1日開源并在Google、Mozilla基金會、Opera支持下被包括進萬維網聯盟的W3C推薦標準。

不需要插件的實時通信

想像一下,如果你的手機、電視、電腦都可以通過一個平臺進行通信,想像一下你可以在Web應用中輕松地加入視頻聊天和p2p數據分享,你還沒有興奮嗎?這就是WebRTC

想試一試嗎?WebRTC現在已經被集成到Chrome,Opera和火狐上了,你可以試試這個應用:

apprtc.appspot.com:

  1. 在Chrome、Opera或Firefox中打開apprtc.appspot.com。

  2. 點擊允許按鈕允許應用使用你的攝像頭。

  3. 在新的選項卡,甚至在另外一臺電腦上打開正文顯示的URL。

這里是這個應用的具體教程: later in this article

開始

如果你沒有時間閱讀這個系列的文章,想直接編碼,你可以這樣:

  1. 看一看Gooogle關于WebRTC的幻燈片(here)

  2. 你果你沒有用過getUserMedia,要先學習一下它,教程:HTML5 Rocks article ,Demo:simpl.info/gum

  3. 掌握RTCPeerConnection API,教程:simple example below ,Demo:simpl.info/pc,。

  4. 了解一下WebRTC的實現、防火墻和NAT轉發,教程:apprtc.appspot.com.

  5. 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 實現很多用戶安全協議,比如DTLSSRTP

  • 對數據流和信號量進行編碼加密。

  • 。WebRTC 不是一個插件,可以運行在瀏覽器的沙箱中,組件不需要單獨安裝。

  • 攝像頭和手機必須通過嚴格的授權,只有在顯示用戶界面的時候才能調用。

關于WebRTC安全性的詳細討論不在本文的講解范圍內,如果你想了解更多這方面的問題,可以看一看IETF提供的 WebRTC Security Architecture

開發者工具

    • 當WebRTC會話被創建的時候,chrome://webrtc-internals (opera://webrtc-internals )就會提供會話詳細的數據流和圖表:

      chrome://webrtc-internals 截圖

在哪里使用WebRTC

WebRTC有以下三個API:

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實現了以下的接口:

總結

大家應該大概明白WebRTC的概要了。在下一篇文章中,我們會針對這三個API來具體的講解構建WebRTC的流程。

 本文由用戶 tyygming 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!