一、背景
近年來(lái)，直播競(jìng)答、網(wǎng)絡(luò)游戲直播等新的實(shí)時(shí)音視頻通訊場(chǎng)景不斷推陳出新，實(shí)時(shí)音視頻應(yīng)用的爆發(fā)，使得WebRTC技術(shù)成為了人們關(guān)注的焦點(diǎn)。由于WebRTC技術(shù)可以幫助用戶(hù)在沒(méi)有插件和客戶(hù)端的情況下，輕松實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽器之間的實(shí)時(shí)語(yǔ)音對(duì)話(huà)和視頻對(duì)話(huà)，加之研發(fā)成本相對(duì)較低，因此開(kāi)源的WebRTC技術(shù)逐漸在眾多領(lǐng)域得到了廣泛應(yīng)用。58集團(tuán)目前很多業(yè)務(wù)場(chǎng)景對(duì)音視頻通話(huà)有需求，如IM、金融面審、招聘面試等。因此TEG結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景基于WebRTC提供了一套完整的實(shí)時(shí)音視頻通話(huà)解決方案，以滿(mǎn)足各個(gè)業(yè)務(wù)場(chǎng)景的需求。
二、WebRTC的技術(shù)介紹
WebRTC是一個(gè)開(kāi)源項(xiàng)目，旨在使得瀏覽器能為實(shí)時(shí)通信（RTC）提供簡(jiǎn)單的JavaScript接口。說(shuō)的簡(jiǎn)單明了一點(diǎn)就是讓瀏覽器提供JS的即時(shí)通信接口。這個(gè)接口所創(chuàng)立的信道并不是像WebSocket一樣，打通一個(gè)瀏覽器與WebSocket服務(wù)器之間的通信，而是通過(guò)一系列的信令，建立一個(gè)瀏覽器與瀏覽器之間（peer-to-peer）的信道，這個(gè)信道可以發(fā)送任何數(shù)據(jù)，而不需要經(jīng)過(guò)服務(wù)器。并且WebRTC通過(guò)實(shí)現(xiàn)MediaStream，通過(guò)瀏覽器調(diào)用設(shè)備的攝像頭、話(huà)筒，使得瀏覽器之間可以傳遞音頻和視頻。
WebRTC技術(shù)將語(yǔ)音視頻的采集和編解碼全部?jī)?nèi)嵌到了瀏覽器中，由此大大簡(jiǎn)化了視頻通信所需的成本，即只需要一個(gè)支持WebRTC技術(shù)的瀏覽器即可實(shí)現(xiàn)視頻通信，并且可以跨越不同平臺(tái)和終端。
上圖為WebRTC的底層架構(gòu)，其用到的技術(shù)非常多，包括視頻音頻處理以及網(wǎng)絡(luò)傳輸，防火墻穿越等技術(shù)。
WebRTC有三個(gè)模塊，Voice Engine（音頻引擎），Video Engine（視頻引擎）和Transport。
- Voice Engine包含iSAC/iLBC Codec（音頻編解碼器，前者是針對(duì)寬帶和超寬帶，后者是針對(duì)窄帶），NetEQ for voice（處理網(wǎng)絡(luò)抖動(dòng)和語(yǔ)音包丟失），Echo Canceler（回聲消除器），Noise Reduction（噪聲抑制）；
- Video Engine包含VP8 Codec（視頻圖像編解碼器），Video jitter buffer（視頻抖動(dòng)緩沖器，處理視頻抖動(dòng)和視頻信息包丟失），Image enhancements（圖像質(zhì)量增強(qiáng)）;
- Transport包含SRTP（安全的實(shí)時(shí)傳輸協(xié)議，用以音視頻流傳輸），Multiplexing（多路復(fù)用），P2P，STUN+TURN+ICE（用于NAT網(wǎng)絡(luò)和防火墻穿越的）。除此之外，安全傳輸可能還會(huì)用到DTLS（數(shù)據(jù)報(bào)安全傳輸），用于加密傳輸和密鑰協(xié)商。整個(gè)WebRTC通信是基于UDP的。
WebRTC有三個(gè)重要的部分：MediaStream、RTCPeerConnection、RTCDataChannel。
- getUserMedia 允許網(wǎng)頁(yè)瀏覽器獲取攝像頭和麥克風(fēng)的使用權(quán)限，并且捕獲媒體。通過(guò)MediaStream的API能夠通過(guò)設(shè)備的攝像頭及話(huà)筒獲得音視頻的同步流。
- RTCPeerConnection 負(fù)責(zé)管理端到端連接，RTCPeerConnection 是 WebRTC 用于構(gòu)建點(diǎn)對(duì)點(diǎn)之間穩(wěn)定、高效的流傳輸?shù)慕M件。
- RTCDataChannel 允許瀏覽器分享任意數(shù)據(jù)，RTCDataChannel 使得瀏覽器之間（點(diǎn)對(duì)點(diǎn)）建立一個(gè)高吞吐量、低延時(shí)的信道，用于傳輸任意數(shù)據(jù)。
MediaStream
MediaStream主要是從設(shè)備獲取數(shù)據(jù)流，比如說(shuō)攝像頭和麥克風(fēng)。
getUserMedia（constraints,successCallback,errCallback），用于獲取用戶(hù)授權(quán)提供的音頻視頻數(shù)據(jù)流，三個(gè)參數(shù)分別為約束對(duì)象，成功的回調(diào)函數(shù)，發(fā)送錯(cuò)誤的回調(diào)函數(shù)。
RTCPeerConnection
RTCPeerConnection 作為創(chuàng)建點(diǎn)對(duì)點(diǎn)連接的 API，是我們實(shí)現(xiàn)音視頻實(shí)時(shí)通信的關(guān)鍵。在點(diǎn)對(duì)點(diǎn)通信的過(guò)程中，需要交換一系列信息，通常這一過(guò)程叫做 — 信令（signaling）。在信令階段需要完成的任務(wù)：
- 為每個(gè)連接端創(chuàng)建一個(gè) RTCPeerConnection，并添加本地媒體流；
- 獲取并交換本地和遠(yuǎn)程描述：SDP 格式的本地媒體元數(shù)據(jù)；
- 獲取并交換網(wǎng)絡(luò)信息：潛在的連接端點(diǎn)稱(chēng)為 ICE 候選者。
我們雖然把 WebRTC稱(chēng)之為點(diǎn)對(duì)點(diǎn)的連接，但并不意味實(shí)現(xiàn)過(guò)程中不需要服務(wù)器的參與。因?yàn)樵邳c(diǎn)對(duì)點(diǎn)的信道建立起來(lái)之前，二者之間是沒(méi)有辦法通信的。因此在信令階段，我們需要一個(gè)通信服務(wù)來(lái)幫助我們建立起這個(gè)連接。WebRTC本身沒(méi)有指定信令服務(wù)，所以，我們可以使用 XMPP、XHR、Socket等來(lái)做信令交換所需的服務(wù)。TEG是采用webSocket來(lái)做雙向通信。
NAT/防火墻穿越技術(shù)
建立點(diǎn)對(duì)點(diǎn)信道的問(wèn)題是 NAT 穿越技術(shù)。簡(jiǎn)單來(lái)說(shuō)NAT就是為了解決 IPV4 下的 IP 地址匱乏而出現(xiàn)的一種技術(shù)，也就是一個(gè) 公網(wǎng) IP 地址一般都對(duì)應(yīng) n個(gè)內(nèi)網(wǎng)IP。這樣也就會(huì)導(dǎo)致不是同一局域網(wǎng)下的瀏覽器在嘗試 WebRTC 連接時(shí)，無(wú)法直接拿到對(duì)方的公網(wǎng) IP 也就不能進(jìn)行通信，所以就需要用到 NAT 穿越（也叫打洞）。以下為 NAT 穿越基本流程：
由于 NAT 的行為是非標(biāo)準(zhǔn)化的，在 RTCPeerConnection 中使用 ICE 框架來(lái)保證 RTCPeerConnection 能實(shí)現(xiàn) NAT 穿越。
ICE
ICE（Interactive Connectivity Establishment）交互式連接建立，一種綜合性的 NAT 穿越技術(shù)，是一種框架，可整合各種 NAT 穿越技術(shù)如 STUN、TURN（Traversal Using Relaying NAT，中繼NAT實(shí)現(xiàn)的穿透）。ICE 會(huì)先使用 STUN，嘗試建立一個(gè)基于 UDP 的連接，如失敗了就會(huì)去 TCP（先嘗試 HTTP，然后嘗試 HTTPS），若依舊失敗 ICE 就會(huì)使用一個(gè)中繼的 TURN 服務(wù)器。 在 P2P 連接被創(chuàng)建前，首先必須進(jìn)行信令處理。為了完成讓用戶(hù)都具有另一端用戶(hù)的 IP以及其他任何用戶(hù)想要共享的涉及數(shù)據(jù)/視頻的信息，信令會(huì)在用戶(hù)和信令服務(wù)器之間進(jìn)行多次往返。
信令交換過(guò)程：
顯而易見(jiàn)，在上述連接的過(guò)程中：首先呼叫端（ClientA）需要給 接收端（ClientB） 通過(guò)信令服務(wù)發(fā)送一條名為 offer（SDP） 的信息，接收端在接收到請(qǐng)求后，則通過(guò)信令服務(wù)返回一條 answer（SDP） 信息給呼叫端。然后在呼叫端和接收端的 ICE 候選信息準(zhǔn)備完成后，通過(guò)信令服務(wù)進(jìn)行交換，并互相保存對(duì)方的信息，這樣就完成了一次連接。
SDP 格式的本地媒體元數(shù)據(jù)的交換：
- v=0
- o=- 9161120045333372658 2 IN IP4 127.0.0.1
- s=-
- t=0 0
- a=group:BUNDLE audio video
- a=msid-semantic: WMS ZJeNpxjV9akPU8igui9Fr4KKKkDvVPLFWTBb
- m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
- c=IN IP4 0.0.0.0
- a=rtcp:9 IN IP4 0.0.0.0
- a=ice-ufrag:wIpU
- a=ice-pwd:x3WCaK1ZwTV9Shs0kmsyQQ6L
- a=ice-options:trickle
- … …
三、音視頻通話(huà)流程介紹
根據(jù)當(dāng)前業(yè)務(wù)場(chǎng)景，TEG基于WebRTC進(jìn)行了二次開(kāi)發(fā)，提供了一套自研 的完整解決方案，從而實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)的音視頻通話(huà)。以下是通過(guò)WebRTC進(jìn)行音視頻通話(huà)連接的一系列的步驟：
呼叫/接聽(tīng)流程：
主叫方發(fā)起通話(huà)，首先申請(qǐng)房間號(hào)并且加入房間（房間是一個(gè)音視頻空間，同一房間內(nèi)的用戶(hù)可以相互觀看對(duì)方的實(shí)時(shí)視頻。用房間號(hào)來(lái)標(biāo)識(shí)一個(gè)房間，即在同一個(gè)實(shí)時(shí)音視頻應(yīng)用中間號(hào)相同的房間，可以認(rèn)為是同一個(gè)房，房間是實(shí)時(shí)溝通功能的一個(gè)管理單元。），然后通過(guò)業(yè)務(wù)線(xiàn)服務(wù)器將房間號(hào)發(fā)到被叫方，被叫加入房間。此時(shí)被叫方可以選擇接聽(tīng)或者拒絕，如果選擇接聽(tīng)通話(huà)，此時(shí)主叫和被叫經(jīng)過(guò)一系列信令交換過(guò)程完成視頻通話(huà)。
兼容性：
- iOS: 系統(tǒng)ios11以上支持webRTC，且僅限safari瀏覽器，微信內(nèi)置瀏覽器尚不支持getUserMedia，視頻編解碼格式為H.264；
- Android: 安卓4.4以上（不含4.4），經(jīng)測(cè)試各大手機(jī)廠商自帶瀏覽器均不支持getUserMedia，但微信內(nèi)置瀏覽器可以正常運(yùn)行，部分手機(jī)firefox和谷歌瀏覽器支持；
- PC: Chrome49以上，F(xiàn)irefox55以上，Edge支持，Safari系統(tǒng)11以上支持，IE不支持。
四、總結(jié)
WebRTC技術(shù)基于UDP，具有不需安裝插件或者客戶(hù)端，開(kāi)源免費(fèi)，強(qiáng)大的網(wǎng)絡(luò)穿透能力，出色的音視頻處理技術(shù)等優(yōu)點(diǎn)，但由于兼容性問(wèn)題，尤其在安卓手機(jī)瀏覽器上的兼容性較差。不過(guò)隨著5G網(wǎng)絡(luò)的建設(shè)和直播等應(yīng)用的持續(xù)火爆，實(shí)時(shí)的音視頻通話(huà)等場(chǎng)景需求十分強(qiáng)勁，在互聯(lián)網(wǎng)平臺(tái)音視頻直播互動(dòng)這一領(lǐng)域，WebRTC依然是一個(gè)最佳的選擇。
