背景介紹
?????WebRTC——“網(wǎng)絡(luò)實(shí)時(shí)通信”（Web Real-Time Communications），是瀏覽器增加的新功能，旨在將實(shí)時(shí)通信功能引入到所有的瀏覽器中，并通過(guò)HTML5標(biāo)簽和JavascriptAPI使該功能可為Web開(kāi)發(fā)者所用。WebRTC提供類似Skype、GoogleMail刨晴、WeChat的功能，但不必安裝任何軟件或是插件垛玻，在PC端或移動(dòng)端都可使用割捅。由于移動(dòng)通信的發(fā)展，比如WeChat通話的出現(xiàn)帚桩，使得日人均通話達(dá)到2.05次亿驾，月人均通話時(shí)長(zhǎng)達(dá)到139分鐘，這些都潛移默化地改變?nèi)藗兊耐ㄐ欧绞秸撕浚嵏擦藗鹘y(tǒng)的電話通信莫瞬。相信WebRTC的到來(lái)也即將掀起另外一次互聯(lián)網(wǎng)通信革新的浪潮。這項(xiàng)技術(shù)與瀏覽器的其他技術(shù)可能徹底改變我們?cè)谒饺撕蜕虡I(yè)領(lǐng)域溝通方式郭蕉，比如在網(wǎng)絡(luò)視頻教學(xué)疼邀，線上就醫(yī)問(wèn)診，互動(dòng)直播等等領(lǐng)域召锈。
????目前旁振，WebRTC所需要的標(biāo)準(zhǔn)和協(xié)議仍在開(kāi)發(fā)中，該項(xiàng)任務(wù)由萬(wàn)維網(wǎng)聯(lián)盟W3C（World Wide WebConosortium）和互聯(lián)網(wǎng)工程任務(wù)組IETF（Internet Engineering Task Force）聯(lián)合負(fù)責(zé)涨岁，但是兩個(gè)組織負(fù)責(zé)獨(dú)立的工作拐袜。W3C負(fù)責(zé)編寫用于WebRTC的標(biāo)準(zhǔn)API，IETF負(fù)責(zé)制定WebRTC的標(biāo)準(zhǔn)協(xié)議梢薪。在2017年11月蹬铺，經(jīng)歷了6年的修訂之后，WebRTC1.0草案定稿秉撇，還有很多API在持續(xù)地編寫和完善之中甜攀，可以在公開(kāi)草案查看最新公布的標(biāo)準(zhǔn)和正在制定的草稿秋泄。
????WebRTC開(kāi)創(chuàng)性地使得瀏覽器能夠直接與其他瀏覽器交互，瀏覽器廠商也開(kāi)始漸漸地支持該功能规阀。各大瀏覽器已經(jīng)不同程度地使用WebRTC API和協(xié)議恒序，具體支持情況變化很快，要經(jīng)常翻閱官方文檔來(lái)確認(rèn)對(duì)WebRTC的支持版本情況和支持的API的數(shù)量谁撼。主流瀏覽器目前支持的核心API情況：
??Apple Safari11（仍處于開(kāi)發(fā)者預(yù)覽階段）
??GoogleChrome23
??Mozilla Firefox24 / Firefox OS
??Opera20
WebRTC原理
????一些大型應(yīng)用程序已經(jīng)開(kāi)始使用WebRTC進(jìn)行實(shí)時(shí)通信奸焙，包括谷歌Hangouts和Facebook Messenger。那么我們就來(lái)看看WebRTC到底是怎么工作的彤敛。完成一個(gè)WebRTC項(xiàng)目必須包含標(biāo)準(zhǔn)API、信令和NAT（Network Address Translation）了赌。
WebRTC確定的標(biāo)準(zhǔn)中三個(gè)主要的API：
????●?getUserMedia獲取音頻和視頻媒體（訪問(wèn)設(shè)備的麥克風(fēng)墨榄、前后置攝像頭、網(wǎng)絡(luò)攝像頭等媒體設(shè)備）勿她。
????●?RTCPeerConnection實(shí)現(xiàn)在兩個(gè)瀏覽器之間建立媒體連接路徑袄秩。它執(zhí)行信號(hào)處理，編解碼器處理逢并，點(diǎn)對(duì)點(diǎn)通信之剧，安全性和帶寬管理。（下文視頻通信實(shí)例要用到的主要API）
????●?RTCDataChannel允許在對(duì)等體（也稱端到端）之間進(jìn)行任意數(shù)據(jù)的雙向通信砍聊。（本文暫不介紹）
選擇信令
????信令的目的是為了實(shí)現(xiàn)對(duì)等體之間的建立連接背稼，它最重要的功能在于，在參與對(duì)等連接的兩個(gè)瀏覽器之間交換會(huì)話描述協(xié)議SDP（Session Description Protocal）對(duì)象中包含的信息玻蝌。此外蟹肘，建立的信令通道還用于交換候選IP地址，以便進(jìn)行ICE（Interactive Connectivity Establishment）打洞俯树。??
????WebRTC中信令發(fā)揮著舉足輕重的作用帘腹，但由于沒(méi)有把信令當(dāng)作標(biāo)準(zhǔn)話工作的內(nèi)容，WebRTC開(kāi)發(fā)人員可自由選擇任意信令方案许饿⊙粲基于WebRTC的實(shí)時(shí)語(yǔ)音+視頻通話功能，需要建立及時(shí)的雙向的連接陋率，用戶可選擇全雙工的通信協(xié)議到達(dá)實(shí)時(shí)通訊的效果球化，例如SIP、XMPP翘贮、WebSocket等赊窥，對(duì)前端開(kāi)發(fā)比較友好的是基于node的Socket.io，他是一個(gè)WebSocket庫(kù)狸页，支持及時(shí)锨能、雙向與基于事件的交流（下文案例就是使用此庫(kù)）扯再。
????下圖解釋了一旦信令服務(wù)建立好了連接，兩個(gè)客戶端理論上可以進(jìn)行端到端的連接：
ICE框架
????在真實(shí)的網(wǎng)絡(luò)中址遇，瀏覽器端之間建立連接可能會(huì)更為復(fù)雜熄阻，由于NAT（Network Address Translation）和防火墻的存在增加了這一技術(shù)的實(shí)施難度，需要采用特殊的協(xié)議和過(guò)程才能實(shí)現(xiàn)倔约。為此秃殉，WebRTC采用ICE協(xié)議，他是一種標(biāo)準(zhǔn)穿透協(xié)議浸剩，它整合了STUN（Session Traversal Utilities for NAT）和TURN（Traversal Using Relay around NAT）钾军。
????會(huì)話發(fā)起方瀏覽器需要知道目的瀏覽器的IP地址來(lái)進(jìn)行數(shù)據(jù)包的傳輸，就需要使用STUN服務(wù)器獲取盡可能多的訪問(wèn)對(duì)方潛在IP地址绢要。若是NAT或是防火墻限制非常嚴(yán)格的情況下吏恭，無(wú)法直接建立連接，這時(shí)TURN服務(wù)器作為中繼服務(wù)器重罪，它提供公共的IP地址用于轉(zhuǎn)發(fā)從設(shè)置中繼地址的瀏覽器接收到的數(shù)據(jù)包樱哼，以防對(duì)等連接失敗。
????如下圖是在上圖信令連接的基礎(chǔ)上是添加了 ICE之后的網(wǎng)絡(luò)連接
搭建多人視頻
????在了解WebRTC的原理過(guò)程中剿配，查閱了很多網(wǎng)站提供的demo大多都是雙人的視頻通訊搅幅，設(shè)想并嘗試搭建多人視頻通訊。本例是從codelab的step05雙人視頻案例改造而來(lái)呼胚。采取“全網(wǎng)狀”的體系結(jié)構(gòu)：雙人視頻是創(chuàng)建一個(gè)RTCPeerConnection實(shí)現(xiàn)端到端的連接茄唐，多人視頻就創(chuàng)建RTCPeerConnection端到端的連接，即每個(gè)瀏覽器均與其他瀏覽器建立全網(wǎng)狀的對(duì)等連接蝇更。理論上在不考慮帶寬和CPU的情況下可以想創(chuàng)建無(wú)數(shù)個(gè)琢融。部分代碼修改的地方：
????Step1、服務(wù)端sever.js去掉numclients===1的限制簿寂，允許添加多個(gè)視頻參與者
????Step2漾抬、頁(yè)面index.html文件去掉寫死的video
????Step3、創(chuàng)建對(duì)等對(duì)象進(jìn)行聯(lián)通offer 和answer端常遂，每?jī)蓚€(gè)用戶間創(chuàng)建一次聯(lián)通纳令，多個(gè)用戶之間都需要?jiǎng)?chuàng)建相互的鏈接。每新增一次用戶信令服務(wù)器會(huì)發(fā)送廣播通知其他每個(gè)用戶發(fā)起新連接克胳。onaddstream監(jiān)聽(tīng)到SDP連通后添加新的媒體流到本地：
????效果如下平绩，圖為我在同一個(gè)電腦的chrome瀏覽器添加三個(gè)視頻通訊的畫面
? ? 調(diào)用瀏覽器自帶的API就可以實(shí)現(xiàn)視頻通信，而且具有跨平臺(tái)的優(yōu)勢(shì)漠另，WebRTC勢(shì)必會(huì)替代傳統(tǒng)web多媒體捏雌，成為新的解決方案。期待WebRTC標(biāo)準(zhǔn)越來(lái)越完善笆搓，促進(jìn)瀏覽器兼容也指日可待性湿。
參考鏈接
●?https://www.html5rocks.com/en/tutorials/webrtc/basics/
●?http://io13webrtc.appspot.com/#1
●?https://zh.wikipedia.org/wiki/WebRTC
●?https://codelabs.developers.google.com/codelabs/webrtc-web/#0
