初識WebRTC

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"本文轉自“雨夜隨筆”公衆號，歡迎關注"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在之前的文章中，我們描述了目前直播常用的協議--RTMP。並也說明了爲什麼目前主流直播平臺沒有采用RTP和基於它的WebRTC。但是我們也要意識到WebRTC在實時音視頻上的廣泛應用，比如視屏會議，屏幕共享等場景。並且目前基於WebRTC進行深度定製的直播平臺也越來越多，所以我們也來聊一聊WebRTC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什麼是WebRTC"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC是Web Real-Time Communication，即網頁實時通信的縮寫，是RTC協議的一種Web實現。項目由Google開源，並和IETF和W3C制定了行業標準，目前已成爲下一代視頻通話的標準。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瀏覽器本身不支持相互之間之間直接建立通信，一般都是通過服務器進行中轉。這樣的問題在於雙方的銅線需要通過兩段信道，使得通信的效率受到了更多的限制。所以如何建立瀏覽器之間的點對點傳輸，一直困擾着開發者，而這就是WebRTC產生的原因。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC允許網絡應用在不借助中間媒介的情況下，建立點對點的連接，從而實現音視頻流和其他數據的傳輸。WebRTC這個項目使得瀏覽器能爲實時通信（RTC）提供簡單的JavaScript接口。實現方式是通過一系列的信令，建立瀏覽器之間的信道。這個信道可以發送任何數據而無需經過服務器。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然WebRTC的內容不僅僅包含上面這些，還包含媒體、加密、傳輸等在內的多項標準和協議。通過提供的原生JavaScript API，在不依賴其他插件的情況下，擁有P2P音視頻和數據分享的能力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然上面所說的不借助中間媒介是指點對點通信時不需要第三方進行轉發。而如果需要依賴WebRTC框架，仍需要另外的服務器來傳輸一些其他的信息，比如雙方的基本信息，在沒建立連接之前獲得對方的IP，協議版本等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的設計"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC的架構圖我們可以在官網（地址見文末）中查到，如下圖："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/57/57e738ed8019aa6a79b4345aeed5c3bb.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以看到整個架構主要分爲幾個部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Web API"},{"type":"text","text":"： 提供給Web開發者的API層。供開發者開發基於視頻和音頻等的實時通信應用。標準有W3C聯盟指定"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"WebRTC C++ API"},{"type":"text","text":"：提供給瀏覽器廠商的API層，供瀏覽器廠商實現WebRTC標準的Web API，其中主要是抽象的對數字信號過程進行處理。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"會話層"},{"type":"text","text":"：一個抽象的會話層，提供會話建立和管理功能，該層協議由應用開發者自定義實現。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"傳輸層"},{"type":"text","text":"：主要包含兩個部分，一個RTP協議棧，另一個是STUN/TURN/ICE層，主要通過STUN和ICE組件來建立不同類型網絡間的連接。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Engine"},{"type":"text","text":"：音視頻引擎，包含一系列多媒體處理的框架，包含從視頻採集卡到網絡傳輸等整個解決方案。音頻引擎負責音頻採集和傳輸，具有降噪、回聲消除等功能。視頻引擎負責網絡抖動優化，互聯網傳輸編解碼優化。這個是WebRTC中極具價值的技術之一，是由Google收購GIPS公司開源的，在整個VoIP界，都算是技術領先的。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"瀏覽器設備廠商自行實現的硬件接口"},{"type":"text","text":"：包含音頻捕捉模塊和視頻捕捉模塊。以及網絡IO接口。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於上面的理解，我們將架構進行進一步簡化來梳理WebRTC的流程："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d6/d633e6bf3279696582a2fd048390b38f.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整個流程是：最底層是硬件設備，上面是音頻捕獲模塊和視頻捕獲模塊。中間部分爲音視頻引擎。在音視頻引擎之上是 一套 C++ API，在 C++ 的 API 之上是提供給瀏覽器的Javascript API。這個就是整個WebRTC的主要流程。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的協議棧"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 "},{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MTIwMTkxNQ==&mid=2247484291&idx=1&sn=70183e3293ee1c6144aca1f615a4e567&chksm=cf68c417f81f4d0129f29c2fcebec94831936f78695f9147949d0692b193a0d32a3000ce1d37&scene=126&sessionid=1597307321&key=8723f2e63c89806b29b9d9e968998dde68a08a0f42638f6bd08d664d7c99829c88e12cfb0620b6619e8fa7a527fa4328d45ce2d28d04ae72cbec3c83740431f86b36605164ff8aeefd945bafa78c7a3b&ascene=1&uin=NTkyMjg4NQ%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=AU7WUvUKActcvEnUFPNamnQ%3D&pass_ticket=HpHSEBKMCE1RvudwEPAVf7gfDj5eLLLh5%2BTYyEVpRP0%3D","title":null},"content":[{"type":"text","text":"爲什麼直播系統不用RTP協議"}]},{"type":"text","text":" 中，我們簡單說了主流音視頻傳輸協議在網絡協議中的位置："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/bb/bb8c3fd79d2931326c9dc9270109be01.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 我們在這張圖可以看到WebRTC主要是基於RTP以及它的伴生協議RTCP。這裏我們看一下WebRTC主要涉及到的網絡協議棧："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/94/94f94d3c7bd8eb8a3c82f6b6fc4ca791.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏分爲兩部分，一部分是左半邊的WebRTC框架中依賴的信令服務器使用的協議，這個我們之後再講。這裏我們主要關注右半邊WebRTC核心的協議棧，包含以下幾個部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"UDP基礎"},{"type":"text","text":"：WebRTC傳輸層協議主要依靠UDP，這個是關鍵，和其他基於TCP協議的傳輸協議相比，傳輸效率更高，成本也更低。這裏WebRTC使用的UDP拓展協議RTP和它的伴生協議RTCP。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"ICE，STUN，TURN"},{"type":"text","text":"：也是傳輸層協議，主要是用於內網穿透，解決獲取與綁定外網映射地址以及keep alive機制。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"DTLS"},{"type":"text","text":"：會話層協議，主要是用於保證數據傳輸的安全。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"SCTP和SRTP"},{"type":"text","text":"：用於在UDP上提供不同流的多路複用、擁塞和流量控制，以及部分可靠的交付和其他服務。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的現狀"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC從發展初期，因爲其強大的功能和先進的設計理念。得到很多瀏覽器廠商的支持，即使是蘋果也在2017年宣佈Safari 11支持WebRTC。所以目前我們從下圖可以看到目前主流的瀏覽器基本上都支持WebRTC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/59/599c85accc2c34e04e3fc38352408845.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"圖片來自："},{"type":"link","attrs":{"href":"https://caniuse.com/#search=webrtc","title":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"https://caniuse.com/#search=webrtc"}]},{"type":"text","text":" "},{"type":"text","marks":[{"type":"italic"},{"type":"strong"}],"text":"WebRTC瀏覽器兼容情況"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"WebRTC的使用範圍"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過上面的瞭解，很多人都認爲WebRTC就應該在瀏覽器端使用，但是現實情況反而是相反的，在瀏覽器端開發是最簡單的，因爲提供了非常簡單的JavaScript API。但是卻受到JavaScript和瀏覽器的限制，而且如果應用場景足夠豐富，那麼對於瀏覽器的兼容性也需要考慮在內。同時瀏覽器在長時間直播或者會議上可能會有問題，並且功能也較弱，比如分辨率控制、多路語音混音都做不了。當然還有其他問題，"},{"type":"text","marks":[{"type":"strong"}],"text":"比如Chrome同時給6個客戶端發視頻流就很消耗資源了，所以你如果有超過10個用戶收看的話，Chrome很容易崩潰。"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"strong"}],"text":"那麼WebRTC的最佳使用範圍是哪裏呢？我們從上面架構圖可以看到WebRTC提供了兩層API，底層是C++寫的Native庫，上層是JavaScript封裝。所以我們完全可以忽略上層的JavaScript限制，直接使用底層的Native庫，這樣我們可以開發跨平臺的APP，並且可以擁有更高的權限和能力。而且Google在開發WebRTC時已考慮用在app，底層C++庫的API已做得很完善了。所以對於"},{"type":"text","text":"WebRTC的最佳使用是基於WebRTC Native庫來實現各種平臺的APP，以達到最佳的體檢**。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天我們主要簡單瞭解一下WebRTC，包括WebRTC是什麼，他的設計理念以及目前的現狀。通過這些，我們可以瞭解現在音視頻和直播領域依賴的技術背後究竟是什麼。在以後的文章中，我們會繼續深入瞭解WebRTC系統的設計，和其他組件的運用。以及其他相關的知識。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC架構："},{"type":"link","attrs":{"href":"https://webrtc.github.io/webrtc-org/architecture/","title":null},"content":[{"type":"text","text":"https://webrtc.github.io/webrtc-org/architecture/"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c9/c939a3a0dd5faddfd4735ad855b3f940.jpeg","alt":null,"title":"歡迎關注","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MTIwMTkxNQ==&mid=2247484320&idx=1&sn=ffaa320b075ae4f2b98cae2765698f70&chksm=cf68c434f81f4d2251dd8e532f2a03372a0e5074afb431963d3af511b15b87df9ead1db3c7ef&scene=126&sessionid=1597370660&key=519b8bbaea533f94d7c6d15edc89cca19b0e0e8b57f3652593a7cd70cde84ab897f81f761858c08fdbf60c430fa87819b432f20e41e6ceaa875243af11612357ab8ed77887ccd8594741aca8d1b20a1cb44de240a77ef6ae8e28875607d134ee848414f868842f4071dbe028cc36e78f764894c2cd473c5b6436b34d7cd67ba2&ascene=1&uin=NTkyMjg4NQ%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=ATqiytcMSnd3UbcupxYiD10%3D&pass_ticket=BIAIK1A50Z571Ul6pD6x0p8Rxc0uqDbrwBshrLT1gCo%3D","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}