如何真正讓小程序,WebRTC和APP互通連麥直播

2017年12月，微信小程序向開發(fā)者開放了實(shí)時(shí)音視頻能力，給業(yè)內(nèi)帶來廣闊的想象空間。連麥直播技術(shù)在2016年直播風(fēng)口中成為視頻直播的標(biāo)配，然而只有在原生的APP上才能保障良好的用戶體驗(yàn)。那時(shí)候，在微信小程序中無法連麥直播。微信小程序在去年12月宣布開放實(shí)時(shí)音視頻能力，再加上去年6月蘋果宣布將支持WebRTC，業(yè)內(nèi)一下子千樹萬樹梨花開，前途一片光明。連麥直播技術(shù)和微信小程序以及WebRTC能產(chǎn)生怎么樣的化學(xué)作用？開發(fā)者在微信小程序或者瀏覽器WebRTC上實(shí)現(xiàn)連麥直播技術(shù)的時(shí)候，需要知道什么和考慮什么？

連麥直播的技術(shù)難點(diǎn)和解決思路

我們先回顧一下連麥互動(dòng)直播技術(shù)，這個(gè)要從應(yīng)用場(chǎng)景說起。

第一類應(yīng)用場(chǎng)景就是最常見的視頻直播中的多主播連麥場(chǎng)景。從2016年開始，從單向直播發(fā)展到兩人連麥、三人連麥，逐漸到多人連麥。兩人連麥?zhǔn)侵敢曨l直播場(chǎng)景里面的兩個(gè)主播進(jìn)行連麥互動(dòng)，具體的節(jié)目形式有談話、脫口秀、K歌或者合唱。在視頻直播中，兩個(gè)到三個(gè)主播連麥?zhǔn)呛艹Ｒ姷男问?，有時(shí)候會(huì)允許觀眾進(jìn)行連麥。多人連麥的應(yīng)用場(chǎng)景包括狼人殺、多人視頻群聊和組團(tuán)直播答題等，在移動(dòng)端同一個(gè)房間連麥互動(dòng)的用戶往往達(dá)到十幾二十個(gè)。

第二類應(yīng)用場(chǎng)景是線上抓娃娃，或者叫直播抓娃娃，也是視頻直播的一個(gè)產(chǎn)品形態(tài)，視頻直播和物聯(lián)網(wǎng)的結(jié)合。線上抓娃娃技術(shù)除了包含視頻直播以外，還加上了信令的控制，可以實(shí)現(xiàn)遠(yuǎn)程看著娃娃機(jī)并且控制抓娃娃的天車，同時(shí)主播和觀眾之間可以通過文字互動(dòng)，還有語(yǔ)音視頻連麥互動(dòng)。這是2017年年末的一個(gè)風(fēng)口，把連麥互動(dòng)直播技術(shù)帶到視頻直播和物聯(lián)網(wǎng)結(jié)合的場(chǎng)景中，相信今年會(huì)有更多視頻直播和物聯(lián)網(wǎng)結(jié)合的應(yīng)用場(chǎng)景涌現(xiàn)。

第三類應(yīng)用場(chǎng)景是直播答題，這是2018年1月份涌現(xiàn)的一股熱潮，是答題節(jié)目類在視頻直播場(chǎng)景中的探索。在低延遲、流暢和高清的基礎(chǔ)需求上，這個(gè)應(yīng)用場(chǎng)景還要求答題題目和視頻畫面必須要同步。另外，花椒直播的直播答題房間內(nèi)的用戶數(shù)量一度超過五百萬，因此直播答題技術(shù)必須要支持百萬級(jí)別的并發(fā)。雖然春節(jié)期間因?yàn)楸O(jiān)管的原因增加了準(zhǔn)入門檻，但是我相信后面還會(huì)有別的新的玩法出現(xiàn)。行業(yè)里討論的一些新玩法在這里也和大家分享一下：主持人可以邀請(qǐng)嘉賓連麥進(jìn)行答題，參加直播答題的用戶可以建子房間組團(tuán)答題。這些創(chuàng)新的玩法在技術(shù)上都是可以做到的，本質(zhì)上這就是直播答題技術(shù)和連麥互動(dòng)直播技術(shù)的結(jié)合。

這三個(gè)應(yīng)用場(chǎng)景對(duì)視頻直播技術(shù)有什么要求呢？

第一個(gè)是延遲要足夠低。如果單向延遲不能低于500毫秒的話，視頻通話的互動(dòng)體驗(yàn)就無法保障。

第二個(gè)是回聲消除。因?yàn)橛脩鬉和用戶B之間進(jìn)行視頻通話時(shí)，用戶A的聲音在傳到用戶B端時(shí)被采集并反饋回來，用戶A在一定的延遲后會(huì)聽到回聲，這個(gè)對(duì)通話的體驗(yàn)是十分有影響的，因此必須做回聲消除。

第三個(gè)是要流暢不卡頓。為什么流暢性很必要呢？因?yàn)橛谐脱舆t的要求，流暢和延遲本身就是一對(duì)相互矛盾的技術(shù)要求，如果延遲足夠低的話就要求抖動(dòng)緩沖區(qū)足夠的小，這樣網(wǎng)絡(luò)抖動(dòng)就很容易顯現(xiàn)出來，導(dǎo)致出現(xiàn)畫面過快、過慢，或者卡頓的情況。

下面我們來具體看看怎么解決這三個(gè)視頻直播的核心技術(shù)要求。

一、超低延遲架構(gòu)

市面上做連麥直播解決方案的系統(tǒng)架構(gòu)普遍大概這個(gè)樣子，左邊是低延遲網(wǎng)絡(luò)，為需要低延遲的用戶提供連麥互動(dòng)直播服務(wù)，成本較高。右邊是內(nèi)容分發(fā)網(wǎng)絡(luò)，為圍觀用戶提供視頻直播服務(wù)，雖然延遲稍微高一點(diǎn)，但是成本比較低而且支持更高的并發(fā)。中間通過一個(gè)旁路服務(wù)連接。旁路服務(wù)器從低延遲的實(shí)時(shí)網(wǎng)絡(luò)中把音頻流和視頻流拉出來，有選擇地進(jìn)行混流、格式轉(zhuǎn)換或者協(xié)議轉(zhuǎn)換等處理，然后轉(zhuǎn)推到內(nèi)容分發(fā)網(wǎng)絡(luò)，然后通過內(nèi)容分發(fā)網(wǎng)絡(luò)分發(fā)給圍觀用戶。

要構(gòu)建超低延遲的實(shí)時(shí)系統(tǒng)架構(gòu)，需要考慮以下幾個(gè)要點(diǎn)：

1、負(fù)載均衡- 超低延遲架構(gòu)必須要做到負(fù)載均衡，也就是說任何一個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)都必須均衡地負(fù)載用戶。如果某一個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)的用戶訪問量超過了它能夠承載的上限，容易出現(xiàn)大量丟包的情況，這樣會(huì)觸發(fā)網(wǎng)絡(luò)擁塞，從而引起更多的丟包，導(dǎo)致用戶體驗(yàn)不好。

2、就近接入- 網(wǎng)絡(luò)上的“近”和我們理解的直線上的近是不一樣的。這個(gè)可以類比為交通網(wǎng)絡(luò)，假設(shè)開車的時(shí)候看到另外一個(gè)點(diǎn)離你近，但實(shí)際上可能不一定近，要考慮一下兩點(diǎn)：第一點(diǎn)是連通性，盡管A、B兩點(diǎn)看起來很近，但是從A點(diǎn)到B點(diǎn)是沒有直通的道路，這就相當(dāng)于網(wǎng)絡(luò)的不連通。第二點(diǎn)是擁堵狀況，如果道路很短，但出現(xiàn)擁堵，那也不見得近。比如說，迪拜用戶和北京的用戶連麥，看起來直接從迪拜推流到北京是最近的，可是實(shí)際上這個(gè)直接的路徑可能是不通的，那么需要繞道香港進(jìn)行中繼續(xù)傳，走一個(gè)彎路，在網(wǎng)絡(luò)上的距離可能會(huì)“更近”。

3、質(zhì)量評(píng)估- 質(zhì)量評(píng)估中的靜態(tài)方法是事后評(píng)估，具體是回顧過去的數(shù)據(jù)，分析某一個(gè)地區(qū)的用戶在各個(gè)時(shí)間點(diǎn)推流到某個(gè)地區(qū)的數(shù)據(jù)，總結(jié)出哪個(gè)時(shí)間點(diǎn)走哪個(gè)路徑比較好的方案，然后人為地將相關(guān)數(shù)據(jù)配置到實(shí)時(shí)傳輸?shù)骄W(wǎng)絡(luò)，可以提高傳輸質(zhì)量。

4、動(dòng)態(tài)路由- 質(zhì)量評(píng)估的另外一個(gè)方法是動(dòng)態(tài)評(píng)估，也就是根據(jù)歷史數(shù)據(jù)動(dòng)態(tài)地進(jìn)行質(zhì)量評(píng)估。傳輸網(wǎng)絡(luò)在運(yùn)作一段時(shí)間后會(huì)積累很多用戶數(shù)據(jù)，比如說深圳的用戶在早上、中午、晚上不同的網(wǎng)絡(luò)情況下推流到北京的最優(yōu)路徑，這些數(shù)據(jù)積累下來，可以為動(dòng)態(tài)地制定路由策略作依據(jù)，這就是動(dòng)態(tài)路由。

5、算法流控- 在實(shí)時(shí)傳輸網(wǎng)絡(luò)中，我們要選出一條最優(yōu)的路徑進(jìn)行推流。如果這個(gè)最優(yōu)路徑還達(dá)不到超低延遲的要求，這個(gè)時(shí)候我們要在算法上做一些補(bǔ)償，例如信道的保護(hù)，通過增加冗余，保護(hù)信道里的數(shù)據(jù)。還有在推流時(shí)做一些流控策略，上行網(wǎng)絡(luò)中，如果檢測(cè)到網(wǎng)絡(luò)抖動(dòng)，或者說弱網(wǎng)情況的話，就降低碼率，網(wǎng)絡(luò)情況變好的話，就把碼率提高。下行網(wǎng)絡(luò)中，可以通過分層編碼為不同網(wǎng)絡(luò)環(huán)境的用戶選擇不同碼率的視頻流。

二、回聲消除

什么是回聲？舉個(gè)例子，假如你是近端的用戶，接收到遠(yuǎn)端用戶的聲音，這個(gè)聲音通過喇叭播放出來，會(huì)在房間里面發(fā)生傳播，被天花板、地面和窗戶等反射后，連同你的聲音一起被麥克風(fēng)采集進(jìn)去，再傳到遠(yuǎn)端。遠(yuǎn)端用戶在一兩秒的延遲后，會(huì)再次聽到自己的聲音，這對(duì)遠(yuǎn)端用戶來說就是回聲。為了保障用戶體驗(yàn)，必須要做回聲消除。對(duì)于音視頻引擎來講，麥克風(fēng)采集進(jìn)來的聲音里包含了遠(yuǎn)端用戶的回聲和近端用戶真實(shí)的聲音是很難區(qū)分的：這兩個(gè)聲波都是從空氣中采集進(jìn)來的沒有差別的聲音，有點(diǎn)像藍(lán)墨水和紅墨水混在一起，很難分開一樣。

那就沒辦法了嗎？其實(shí)我們還是有一些辦法的。遠(yuǎn)端傳過來的原音是參考信號(hào)，它和回聲信號(hào)雖然相關(guān)，但是并不完全一樣。如果直接把麥克風(fēng)采集進(jìn)來的聲音減去原音是不對(duì)的。因?yàn)榛芈暿菂⒖夹盘?hào)播放出來以后，在空氣中經(jīng)過反彈和疊加以后形成的，和參考信號(hào)有相關(guān)性，但不等同。我們可以理解為回聲信號(hào)和參考信號(hào)有一定函數(shù)關(guān)系，而我們需要做的就是把這個(gè)函數(shù)關(guān)系求解出來。通過參考信號(hào)作為函數(shù)的輸入，模擬出回聲信號(hào)，再把麥克風(fēng)采集到的聲音信號(hào)減去模擬回聲信號(hào)，最終達(dá)到回聲消除的目的。我們是通過濾波器來實(shí)現(xiàn)這個(gè)函數(shù)，濾波器會(huì)不斷的學(xué)習(xí)和收斂，模擬回聲信號(hào)，使模擬回聲盡量逼近回聲信號(hào)，然后將麥克風(fēng)采集進(jìn)來的聲音信號(hào)減去模擬回聲信號(hào)，達(dá)到回聲消除的目的。這個(gè)步驟也稱為線性處理。

回聲有三種場(chǎng)景類型：靜音，單講和雙講。對(duì)于單講（也就是一個(gè)人講話）來說，線性處理后抑制的效果會(huì)比較好，回聲消除得比較干凈。對(duì)于雙講（也就是多人同時(shí)講話）來說，線性處理后抑制的效果就不是那么好，這時(shí)就需要采取第二個(gè)步驟：非線性處理，把剩余的回聲消除干凈。非線性處理沒有太多開源的東西作為參考，要靠各家廠商自己去研究，十分能體現(xiàn)各家廠商的技術(shù)積累。

三、抖動(dòng)緩沖

網(wǎng)絡(luò)存在擁塞、丟包、亂序和抖動(dòng)，因此網(wǎng)絡(luò)傳輸會(huì)帶來數(shù)據(jù)損傷。特別是使用基于UDP的私有協(xié)議來傳輸語(yǔ)音視頻數(shù)據(jù)的時(shí)候，需要做抖動(dòng)緩沖。以WebRTC為例，對(duì)音頻數(shù)據(jù)的抖動(dòng)緩沖叫NetEQ，對(duì)視頻數(shù)據(jù)的緩沖叫做JitterBuffer，都是WebRTC開源項(xiàng)目中十分有價(jià)值的部分。抖動(dòng)緩沖就是對(duì)數(shù)據(jù)包進(jìn)行緩沖排序，對(duì)丟包和亂序這些網(wǎng)絡(luò)情況進(jìn)行補(bǔ)償，來保障流暢性。抖動(dòng)緩沖的隊(duì)列長(zhǎng)度本質(zhì)上就是隊(duì)列延遲時(shí)間，如果太長(zhǎng)的話延遲就很大，太短的話抖動(dòng)就會(huì)被顯現(xiàn)出來，用戶體驗(yàn)就不好。有關(guān)抖動(dòng)緩沖區(qū)長(zhǎng)度的設(shè)置，每一個(gè)廠商做法不一樣，有的是將網(wǎng)絡(luò)報(bào)文的抖動(dòng)時(shí)間的最大方程作為緩沖隊(duì)列的長(zhǎng)度。這是一個(gè)開放的話題，需要各家廠商自己去思考。

我們?cè)谶@里做一個(gè)階段小結(jié)，從推流端到拉流端，整個(gè)流程包括了七個(gè)環(huán)節(jié)：采集、前處理、編碼、推流、拉流、解碼和渲染。那我們一起來看看上面三個(gè)技術(shù)難點(diǎn)分別在哪些環(huán)節(jié)？

1)低延遲，基本上引入延遲的有三類環(huán)節(jié)：采集和渲染、編解碼、網(wǎng)絡(luò)傳輸。第一類是采集和渲染環(huán)節(jié)，帶來的延遲比較大，尤其是渲染，幾乎沒有任何移動(dòng)端系統(tǒng)可以保證百分之百做到50毫秒的延遲，這是一些硬件上的限制造成的。第二類是編解碼環(huán)節(jié)，特別是音頻編解碼器是往前編碼的，這個(gè)本身就會(huì)帶來延遲，甚至有些音頻編解碼器能帶來200毫秒的延遲。第三類是網(wǎng)絡(luò)傳輸，在即構(gòu)科技的實(shí)時(shí)傳輸網(wǎng)絡(luò)里，往返的傳輸延遲分別都可以做到50毫秒以下。其中，采集和渲染、編解碼都是在終端實(shí)現(xiàn)的。

2)回聲消除，屬于語(yǔ)音前處理3A，需要在前處理環(huán)節(jié)進(jìn)行，也就是在終端實(shí)現(xiàn)的。

3)抖動(dòng)緩沖，是在接收端實(shí)現(xiàn)的，通過接收端的抖動(dòng)緩沖來決定發(fā)送端要以多大的時(shí)間間隔來發(fā)送數(shù)據(jù)包。

綜上所述，剛才說的三個(gè)技術(shù)難點(diǎn)都是在終端實(shí)現(xiàn)的，因此終端非常重要。下面我們重點(diǎn)比較連麥直播技術(shù)在各種終端上的實(shí)現(xiàn)。

連麥直播在各種終端的比較

連麥直播的終端主要包括：原生APP、瀏覽器H5、瀏覽器WebRTC、微信小程序。瀏覽器上的應(yīng)用包括H5和WebRTC，前者可以拉流觀看，后者可以實(shí)現(xiàn)推流和拉流。

連麥直播移動(dòng)終端-Native APP

原生APP終端音視頻引擎畫的結(jié)構(gòu)框圖如下，基本包括了音頻引擎、視頻引擎和網(wǎng)絡(luò)傳輸，合稱實(shí)時(shí)語(yǔ)音視頻終端引擎。這里還包含底層的音視頻采集和渲染，還有網(wǎng)絡(luò)的輸入輸出能力，這是操作系統(tǒng)開放的能力。

原生APP有個(gè)天然的好處，它是直接和操作系統(tǒng)打交道的，操作系統(tǒng)開放的資源和能力它都可以直接用，比如說音視頻的采集渲染，還有網(wǎng)絡(luò)的輸入輸出。套用一句時(shí)髦的廣告語(yǔ)：“沒有中間商賺差價(jià)”，直接和操作系統(tǒng)對(duì)接，可以獲得比較好的用戶體驗(yàn)。

在原生APP上實(shí)現(xiàn)連麥直播的優(yōu)勢(shì)是，對(duì)上面所說的七個(gè)環(huán)節(jié)有較好的把控，可以獲得比較低的延遲，能自研實(shí)現(xiàn)語(yǔ)音前處理3A算法，包括回聲消除，還有對(duì)抖動(dòng)緩沖策略和碼率自適應(yīng)的策略都有比較好的把控。另外，可以自主選擇使用RTMP協(xié)議還是基于UDP的私有協(xié)議，對(duì)抗弱網(wǎng)環(huán)境更加有保障。

市面上比較流行的前處理技術(shù)，比如美顏、掛件、變聲等，原生APP都可以通過開放前處理接口讓開發(fā)者實(shí)現(xiàn)或者對(duì)接這些技術(shù)。為什么要強(qiáng)調(diào)這個(gè)呢？因?yàn)闉g覽器WebRTC和微信小程序都沒有開放前處理接口，開發(fā)者沒有辦法自行實(shí)現(xiàn)或者對(duì)接第三方的美顏或者掛件等技術(shù)模塊。

在原生APP上，開發(fā)者可以得到全面的把控能力，讓用戶可以獲得更好的體驗(yàn)。主流的視頻直播平臺(tái)都有自己的原生APP平臺(tái)，而瀏覽器和微信小程序相對(duì)來說是輔助的。原生APP的用戶體驗(yàn)是最好的，而且對(duì)開發(fā)者來說也是最可控的。

在原生APP上實(shí)現(xiàn)連麥直播的劣勢(shì)是什么呢？開發(fā)門檻高，開發(fā)周期長(zhǎng)、人力成本高。另外，從獲取用戶和傳播的角度來講，也沒有瀏覽器和微信小程序那么便利。

連麥直播移動(dòng)終端-瀏覽器（H5）

瀏覽器H5就像一個(gè)硬幣有兩面，有好處也有劣勢(shì)，好處是開發(fā)成本低，容易傳播，劣勢(shì)是只能拉流，不能推流，不能做到多個(gè)用戶連麥直播。另外，在瀏覽器H5上延遲也是比較大。如果使用RTMP或者HTTP-FLV，延遲會(huì)在1秒到3秒之間，如果用HLS延遲會(huì)大于8秒甚至10秒，這么大的延遲就根本就不允許實(shí)現(xiàn)連麥直播。

使用這三種協(xié)議都是通過瀏覽器H5中的播放器來播放的。在多主播連麥互動(dòng)的場(chǎng)景中，一個(gè)播放器里面只能播一路視頻流，三個(gè)主播就得三個(gè)播放器，因此看不到多個(gè)主播同框連麥互動(dòng)的情形。如果要看到多個(gè)主播同框互動(dòng)的畫面，就必須把多路流混合成一路流，在單個(gè)播放器里面播放。

另外，瀏覽器H5的源代碼是開放的。如果在瀏覽器上把音視頻終端引擎實(shí)現(xiàn)了，相當(dāng)于對(duì)外公開了所有核心的源代碼。因此，還沒有見過哪個(gè)廠商在瀏覽器H5上完整地把音視頻引擎真正做出來。即使你愿意做出來，瀏覽器也不會(huì)允許你這樣做，開發(fā)者和操作系統(tǒng)之間隔著瀏覽器，如果瀏覽器不把操作系統(tǒng)的核心能力開放給開發(fā)者，開發(fā)者就不能自主采集和渲染，不能掌控網(wǎng)絡(luò)輸入輸出，類似流控碼控等功能無法實(shí)現(xiàn)。

在瀏覽器H5中也可以通過websocket來傳輸，用jsmpeg來播放，視頻編解碼的格式用mpeg1。mpeg1是一個(gè)比較老的媒體格式，所有瀏覽器都支持。在瀏覽器中使用jsmpeg播放器播放mpeg1，所有瀏覽器也可以支持。這么做可以獲得比較低的延遲，但是還是無法推流，沒辦法實(shí)現(xiàn)連麥直播。

例子：線上抓娃娃H5版

下面使用即構(gòu)線上抓娃娃H5版本為例，簡(jiǎn)單介紹一下websocket在瀏覽器H5上的應(yīng)用。從下圖左上角可以看到，在瀏覽器H5終端接入即構(gòu)實(shí)時(shí)傳輸網(wǎng)絡(luò)時(shí)，我們加入了一個(gè)視頻接入服務(wù)器，右邊是即構(gòu)實(shí)時(shí)傳輸網(wǎng)絡(luò)，使用基于UDP的私有協(xié)議。通過接入服務(wù)器實(shí)現(xiàn)協(xié)議的轉(zhuǎn)換和媒體格式的轉(zhuǎn)換：websocket和基于UDP的私有協(xié)議的轉(zhuǎn)換，mpeg1和H.264的轉(zhuǎn)換。如果原生APP接入就不需要做轉(zhuǎn)換，雖然有接入服務(wù)器，但是不會(huì)做轉(zhuǎn)換。

另外，線上抓娃娃的H5版本是沒有聲音的，除了應(yīng)用場(chǎng)景的特點(diǎn)要求外，也要用H5實(shí)現(xiàn)了音頻引擎才能有聲音。如果在瀏覽器H5上實(shí)現(xiàn)了音頻引擎，就相當(dāng)于把技術(shù)開源了，目前還沒有看到哪個(gè)廠商這么做。

連麥直播移動(dòng)終端-瀏覽器（WebRTC）

大家可能會(huì)覺得很遺憾，瀏覽器H5雖然很容易傳播，開發(fā)簡(jiǎn)單但是體驗(yàn)欠佳，不能連麥直播。那么在瀏覽器上能不能推流，能不能實(shí)現(xiàn)連麥直播呢？答案是可以的，那就要用到WebRTC。

這里說的WebRTC是指已經(jīng)被內(nèi)嵌到瀏覽器里面，被瀏覽器支持的WebRTC，而不是WebRTC的源代碼。部分主流瀏覽器內(nèi)嵌了WebRTC，對(duì)開發(fā)者開放了瀏覽器的實(shí)時(shí)音視頻能力。

上圖是WebRTC的結(jié)構(gòu)圖。我們可以看到WebRTC包括了音頻引擎，視頻引擎、傳輸引擎等，最底層的虛線框表示可以重載，也就是說瀏覽器把最底層的音視頻渲染和網(wǎng)絡(luò)傳輸?shù)牡讓幽芰﹂_放給開發(fā)者，開發(fā)者可以根據(jù)自己的需求選擇是否進(jìn)行重載。音頻引擎中，包括了兩個(gè)編解碼器：iSAC和iLBC，前者針對(duì)寬帶和超寬帶的音頻編解碼，后者針對(duì)窄帶音頻編解碼。音頻引擎還包括了音頻抖動(dòng)緩沖，回聲消除和噪音抑制模塊等。抖動(dòng)緩沖中的NetEQ算法可以說是WebRTC里面的精華之一。視頻引擎中，包括了VP8和VP9的視頻編解碼器，甚至是即將到來的AV1。視頻引擎還包括視頻抖動(dòng)緩沖和圖像質(zhì)量增強(qiáng)等模塊。傳輸引擎，WebRTC使用的是SRTP（Secured Realtime Transport Protocol）安全實(shí)時(shí)傳輸協(xié)議。最后，WebRTC采取P2P的通信方式，沒有媒體服務(wù)器等后端的實(shí)現(xiàn)。以上是WebRTC的簡(jiǎn)單介紹。

瀏覽器WebRTC一般的優(yōu)勢(shì)和劣勢(shì)這里就不再重復(fù)，請(qǐng)大家自行百度，這里只說重點(diǎn)。瀏覽器WebRTC的好處就是實(shí)現(xiàn)了相對(duì)完整的音視頻終端引擎，允許在瀏覽器上推流，可以實(shí)現(xiàn)連麥直播。然而，瀏覽器WebRTC也有不足：

1）沒有開放前處理接口，美顏和掛件這些模塊沒辦法接入第三方的或者自研方案。

2）媒體服務(wù)器后端沒有實(shí)現(xiàn)，開發(fā)者要實(shí)現(xiàn)媒體服務(wù)器，然后通過開源WebRTC網(wǎng)關(guān)（比如說janus）接入。

3）編解碼器、抖動(dòng)緩沖和語(yǔ)音前處理3A等能力只能依靠WebRTC，不能自行定制化。

4）部分主流瀏覽器是不支持WebRTC的，特別是蘋果的瀏覽器。雖然說去年蘋果宣布支持WebRTC,但是目前iOS Safari最新版本對(duì)WebRTC的支持并不好，iOS Safari的主流版本并不支持WebRTC，在iOS上面微信瀏覽器也是不支持WebRTC的。

如上圖所示，由于WebRTC不提供媒體服務(wù)器的實(shí)現(xiàn)，因此需要把瀏覽器WebRTC接入到媒體服務(wù)器后端，這個(gè)可以是自研的，也可以是第三方的服務(wù)。瀏覽器WebRTC和媒體服務(wù)器后端之間的協(xié)議和媒體格式是不一樣的，因此要做協(xié)議和格式的轉(zhuǎn)換。WebRTC用的基于UDP的SRTP，需要把它轉(zhuǎn)換成媒體服務(wù)器的基于UDP的私有協(xié)議。另外，媒體格式也需要轉(zhuǎn)換，因?yàn)閃ebRTC中語(yǔ)音視頻格式默認(rèn)用的是VP8或者VP9。同時(shí)實(shí)時(shí)傳輸網(wǎng)絡(luò)中有關(guān)信令調(diào)度也需要做一些調(diào)整。瀏覽器WebRTC和媒體服務(wù)器后端之間的接入層也可以采用開源的WebRTC Gateway（比如說janus）來實(shí)現(xiàn)。

瀏覽器是類似操作系統(tǒng)的一種超級(jí)應(yīng)用，它坐擁重要的流量入口，然而它也是開發(fā)者和操作系統(tǒng)之間的“中間商”。開發(fā)者通過WebRTC獲得瀏覽器開放的實(shí)時(shí)音視頻能力，然而也必須要承受WebRTC帶來的痛苦。

連麥直播移動(dòng)終端-微信小程序

這次演講的標(biāo)題是《連麥互動(dòng)直播X微信小程序》, 為什么直到這里才開始討論小程序？請(qǐng)?jiān)试S我解釋一下原因。微信小程序是什么？是跑在微信上面的輕型應(yīng)用。微信是什么？是類操作系統(tǒng)的超級(jí)應(yīng)用。這些特征和瀏覽器以及H5是不是很接近？H5是瀏覽器支持的輕型應(yīng)用，而瀏覽器是類操作系統(tǒng)的超級(jí)應(yīng)用。瀏覽器背后是各大國(guó)際科技巨頭，不像微信這樣背后只有騰訊一個(gè)互聯(lián)網(wǎng)巨頭。因此，從這個(gè)角度來看，微信小程序、瀏覽器WebRTC和H5是有相通之處的。

微信小程序可以類比為瀏覽器H5那樣的客戶端和服務(wù)器的結(jié)構(gòu)。其中HTML對(duì)應(yīng)微信小程序的WXML，CSS對(duì)應(yīng)小程序的WXSS，小程序的腳本語(yǔ)言和JS是一樣的，只是框架不一樣。微信小程序提供了兩個(gè)標(biāo)簽，一個(gè)是

微信小程序開放了實(shí)時(shí)音視頻能力，對(duì)業(yè)界來說是重大利好。然而，根據(jù)上面的信息和邏輯，我們也看到采用微信小程序?qū)崿F(xiàn)連麥互動(dòng)直播的好處和不足。

好處有三點(diǎn)：

1）開發(fā)成本低，開發(fā)周期短，基本和H5的開發(fā)難度差不多；

2）很容易傳播和獲客，充分利用好微信的優(yōu)質(zhì)流量；

3）可以推流和拉流，允許實(shí)現(xiàn)連麥直播和實(shí)時(shí)語(yǔ)音視頻通話。

不足有四點(diǎn)：

1）你會(huì)受制于微信小程序的實(shí)時(shí)音視頻能力，比如說，如果它的回聲消除有某些問題，你只能等微信團(tuán)隊(duì)按照自己的節(jié)奏來優(yōu)化，而自己沒有任何辦法去優(yōu)化。

2）小程序沒有開放前處理接口，只能使用小程序自帶的美顏或者變聲功能（如果有），不能對(duì)接自行研發(fā)或者第三方的美顏或者變聲模塊。

3）通過RTMP協(xié)議推流和拉流，不能和基于UDP的私有協(xié)議互通連麥。如果要實(shí)現(xiàn)和基于UDP的私有協(xié)議互通連麥，就必須要增加接入層來轉(zhuǎn)換協(xié)議格式甚至媒體格式。

4）沒有實(shí)現(xiàn)后端媒體服務(wù)器，開發(fā)者必須要自行實(shí)現(xiàn)媒體服務(wù)器，或者把微信小程序接入到第三方的實(shí)時(shí)通信網(wǎng)絡(luò)。

瀏覽器通過WebRTC開放了瀏覽器的實(shí)時(shí)音視頻能力，而微信通過小程序開放了微信的實(shí)時(shí)音視頻能力，在兩個(gè)類操作系統(tǒng)的平臺(tái)上允許開發(fā)者去實(shí)現(xiàn)連麥直播和實(shí)時(shí)音視頻通話。然而，無論WebRTC還是小程序只是在終端上帶你入門，對(duì)開發(fā)者來說，要真正實(shí)現(xiàn)整套系統(tǒng)，還有很多工作需要做的。

下圖展示了微信小程序如何接入到實(shí)時(shí)音視頻傳輸網(wǎng)絡(luò)。微信小程序的音視頻終端引擎也包含了音頻引擎，視頻引擎還有傳輸引擎。音頻引擎要負(fù)責(zé)采集和渲染，音頻抖動(dòng)緩沖，語(yǔ)音前處理和編解碼。視頻引擎要負(fù)責(zé)采集和渲染、視頻抖動(dòng)緩沖，視頻前處理和編解碼。關(guān)于傳輸引擎，微信小程序采用RTMP協(xié)議來推拉流，尚不清楚它的RTMP協(xié)議下層是TCP協(xié)議，還是通過QUIC來使用基于UDP的私有協(xié)議。如果RTMP的下層是基于UDP的私有協(xié)議，那么在弱網(wǎng)環(huán)境下的抗性會(huì)相對(duì)比較好一些，而TCP協(xié)議是一種面對(duì)公平的協(xié)議，對(duì)各個(gè)環(huán)節(jié)的可控性不強(qiáng)，在弱網(wǎng)環(huán)境下體驗(yàn)就相對(duì)差一些。

如果要將微信小程序接入實(shí)時(shí)音視頻傳輸網(wǎng)絡(luò)，中間得有接入服務(wù)器，我們叫接入層。在接入層我們需要做協(xié)議的轉(zhuǎn)換，比如說，如果實(shí)時(shí)音視頻傳輸網(wǎng)絡(luò)是使用基于UDP的私有協(xié)議，那么要把RTMP協(xié)議轉(zhuǎn)為基于UDP的私有協(xié)議。還有媒體格式的轉(zhuǎn)換，如果和實(shí)時(shí)傳輸網(wǎng)絡(luò)的媒體格式不一樣，還需要進(jìn)行轉(zhuǎn)換。

連麥直播移動(dòng)終端-WebRTC通過WebView接入小程序

還有別的方法在小程序上做連麥直播互動(dòng)嗎？必須要使用微信小程序開放的語(yǔ)音視頻能力嗎？也不一定。下圖展示了我在市面上看過的一個(gè)技術(shù)方案，它繞過了微信小程序?qū)崟r(shí)語(yǔ)音視頻能力，通過微信小程序WebView組件實(shí)現(xiàn)了連麥直播的方案。這里和大家分享一下。

這個(gè)方案的基本思路是利用WebView的瀏覽器特點(diǎn)，在WebView內(nèi)使用WebRTC的Web API，從而在小程序上獲得實(shí)時(shí)音視頻能力。上圖是這個(gè)方案的拓?fù)鋱D。最底層是微信小程序的基礎(chǔ)能力。上一層是WebView，WebView是微信小程序的一個(gè)控件，可以簡(jiǎn)單看作一個(gè)類似瀏覽器的組件，提供了瀏覽器的一部分特性，但并不是完整的瀏覽器。微信小程序的WebView類似瀏覽器，那么就可能會(huì)支持WebRTC。然而必須要注意到，微信小程序的WebView在安卓平臺(tái)上支持WebRTC，但在iOS平臺(tái)上面不支持WebRTC。雖然這個(gè)方案理論上也能在微信小程序上實(shí)現(xiàn)連麥直播，但是它有以下的局限性：

1）在iOS平臺(tái)上，微信小程序不支持這個(gè)方案，上面已經(jīng)說過。

2）小程序WebView不是完整的瀏覽器，要比普通瀏覽器表現(xiàn)差而且有很多的限制。

3）開發(fā)者和操作系統(tǒng)之間隔了好幾層：微信底層，小程序，WebView，WebRTC，然后才是開發(fā)者的小程序應(yīng)用。每一層的抽象都會(huì)帶來性能上的消耗，都會(huì)影響到最終的體驗(yàn)。

這個(gè)方案本質(zhì)上還是一個(gè)基于WebRTC的解決方案，沒有用到微信小程序開放的實(shí)時(shí)音視頻能力，而是快速地借助WebView組件，劍走偏鋒，十分討巧地在微信小程序里使用了WebRTC。

連麥直播在各種終端的互通

隨著連麥互動(dòng)直播技術(shù)在各種終端上逐步實(shí)現(xiàn)，那么我們就會(huì)面臨一個(gè)問題：在各種終端上可以連麥互通嗎？比如說，用戶A在微信小程序上可以和用戶B在原生APP上連麥互通嗎？

我們從上面提到的場(chǎng)景說起。用戶A在微信小程序上推流和拉流使用的是RTMP協(xié)議，如果用戶B在原生APP推流和拉流都是使用RTMP協(xié)議，那么兩者天然就是可以連麥互通的。如果原生APP推流和拉流都是使用基于UDP的私有協(xié)議，那么就不能直接地連麥互通，必須要經(jīng)過接入層進(jìn)行協(xié)議和格式的轉(zhuǎn)換才能互動(dòng)連麥。這個(gè)場(chǎng)景還可以延伸：用戶A在微信小程序上可以和用戶C在瀏覽器WebRTC上連麥互通嗎？背后的邏輯是一樣的。

以即構(gòu)科技的方案為例，即構(gòu)ZEGO的原生APP SDK有兩個(gè)版本：支持RTMP協(xié)議和基于UDP的私有協(xié)議，如果用的是支持RTMP協(xié)議的原生APP SDK，那么直接就可以和小程序互動(dòng)連麥，如果用了基于UDP的私有協(xié)議的原生APP SDK，那么就要經(jīng)過接入服務(wù)器進(jìn)行協(xié)議和格式的轉(zhuǎn)換。

基于UDP的私有協(xié)議在弱網(wǎng)環(huán)境下會(huì)有更好的表現(xiàn)，而RTMP協(xié)議在非弱網(wǎng)的情況下表現(xiàn)也相當(dāng)好，而且能夠很好地兼容CDN內(nèi)容分發(fā)網(wǎng)絡(luò)。舉個(gè)例子，花椒直播的連麥直播方案一直都是使用即構(gòu)科技提供的RTMP版本的技術(shù)方案，在線上運(yùn)行兩年了，一直都保持良好的用戶體驗(yàn)。

結(jié)語(yǔ)

連麥直播技術(shù)逐步在原生APP, 瀏覽器H5，瀏覽器WebRTC，微信小程序上延伸，衍生出更加豐富的生態(tài)，提供更加便捷和良好的用戶體驗(yàn)，對(duì)視頻直播平臺(tái)和用戶來說是好消息。然而，欲帶皇冠，必承其重。特別是在瀏覽器WebRTC和微信小程序上，開發(fā)者要充分理解這些類型終端的特點(diǎn)和局限，才能更好地在上面利用連麥直播技術(shù)進(jìn)行創(chuàng)新，服務(wù)用戶。