簡介

全稱是：

Web browser Real Time Communication特點如下：

是基於瀏覽器的實時音視頻（數據）通信技術

免插件

開源

已被W3C納入HTML5標準

跨平台，跨瀏覽器，跨移動應用

Mac OSX、Windows、iOS、Android、Linux

應用場景

適用於網頁間音視頻實時通信，點對點數據共享，QQ、騰訊視頻已有應用

優勢

1.方便。對於用戶來說，在WebRTC出現之前想要進行實時通信就需要安裝插件和客戶端，但是對於很多用戶來說，插件的下載、軟體的安裝和更新這些操作是複雜而且容易出現問題的，現在WebRTC技術內置於瀏覽器中，用戶不需要使用任何插件或者軟體就能通過瀏覽器來實現實時通信。2.免費。雖然WebRTC技術已經較為成熟，其集成了最佳的音/視頻引擎，十分先進的codec，但是Google對於這些技術不收取任何費用。3.強大的打洞能力。WebRTC技術包含了使用STUN、ICE、TURN、RTP-over-TCP的關鍵NAT和防火牆穿透技術，並支持代理。

缺點

1.傳輸質量難以保證，比如跨地區、跨運營商、低帶寬、高丟包、P2P連接率、呼叫成功率。2.設備端適配，如回聲、錄音失敗等問題層出不窮。這一點在安卓設備上尤為突出。由於安卓設備廠商眾多，每個廠商都會在標準的安卓框架上進行定製化，導致很多可用性問題（訪問麥克風失敗）和質量問題（如回聲、嘯叫）。

WebRTC媒體會話原理

WebRTC內部結構簡化圖

WebRTC架構圖（截圖來自官網https://webrtc.org/）

WebRTC核心技術點，簡要概括為三部分

下文詳細介紹WebRTC核心API和信令伺服器部分

WebRTC 核心API詳解

運用RTCPeerConnection和RTCDataChannel兩個核心API，能夠實現任意數據的點對點交換，官網Demo如下：

該Demo不需要servers，因為呼叫方（發送數據）和呼叫應答方（接收數據）在同一頁面上，這樣能夠清晰的了解RTCPeerConnection API的原理，頁面上的RTCPeerConnection對象可以直接交換數據和消息，而無需使用信令伺服器。 可以用開發者工具查看WebRTC統計信息

Chrome：chrome://webrtc-internals

Opera：opera://webrtc-internals

FireFox：about:webrtc chrome開發者工具中查看WebRTC，如下圖所示：

Demo 代碼分析

以Demo為例，分析Web P2P創建、通信、傳輸數據等流程，具體分析API中各個關鍵屬性、方法、事件的含義和標準操作姿勢 完整源碼見Github

WebRTC核心API兼容性

MediaStream and getUserMedia

Chrome desktop 18.0.1008+; Chrome for Android 29+

Opera 18+; Opera for Android 20+

Opera 12, Opera Mobile 12 (基於Presto引擎)

Firefox 17+

Microsoft Edge

RTCPeerConnection

Chrome desktop 20+ (now 『flagless』, i.e. no need to set about:flags); * * Chrome for Android 29+ (flagless)

Opera 18+ (默認開啟); Opera for Android 20+ (默認開啟)

Firefox 22+ (默認開啟)

RTCDataChannel

Chrome 25中的實驗版本，在Chrome 26+中更穩定（and with Firefox interoperability）; Chrome for Android 29+

Opera 18+中的穩定版本（and with Firefox interoperability）; Opera for * * * Android 20+

Firefox 22+ (默認開啟)

信令伺服器

信令就是協調通訊的過程，為了建立一個webRTC的通訊過程，客戶端需要交換如下信息：

會話控制信息，用來開始和結束通話，即開始視頻、結束視頻這些操作指令。

處理錯誤的消息。

元數據，如各自的音視頻解碼方式、帶寬。

網路數據，對方的公網IP、埠、內網IP及埠。 我們需要一個中間伺服器來在客戶端之間交換信令消息和數據，這個過程在WebRTC裡面是沒有實現的，但WebRTC協議沒有規定與伺服器的通信方式，因此可以採用各種方式，比如WebSocket。初學者可以用NodeJS搭建簡易的信令伺服器，交換雙方的元數據，真實項目里還會有STUN和TURN伺服器 。

下面是NodeJS創建信令伺服器的源碼：

利用WebRTC相關技術有很多可以創新的點，比如業界已有創業團隊在做Web P2P，核心技術就是WebRTC + DASH協議，共享空閑資源，基於此可以做霧CDN，節點都在用戶側，去中心化，這裡還是有很多挖掘空間的。

參考資料

https://webrtc.org/

https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API

https://hpbn.co/webrtc/

https://webrtchacks.com/https://codelabs.developers.google.com/codelabs/webrtc-web/#0

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！