2017年騰訊視頻云團(tuán)隊(duì)跟微信團(tuán)隊(duì)聯(lián)合，將視頻云 SDK 跟微信小程序整合在一起，并通過(guò)和 兩個(gè)標(biāo)簽的形式開(kāi)放內(nèi)部的功能。通過(guò)這兩個(gè)標(biāo)簽，開(kāi)發(fā)者可以實(shí)現(xiàn)在線直播、低延時(shí)監(jiān)控、雙人視頻通話以及多人視頻會(huì)議等功能。

WebRTC（Web Real-Time Communication），是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或視頻對(duì)話的技術(shù)，是谷歌收購(gòu) GIPS 公司而獲得的一項(xiàng)技術(shù)，在 Chrome 瀏覽器上無(wú)需安裝插件，通過(guò) javascript 就可以編寫(xiě)實(shí)時(shí)音視頻通話程序。

如果您跟我一樣是一個(gè)實(shí)用主義者，那我就簡(jiǎn)單從實(shí)用主義角度說(shuō)一下我的結(jié)論：小程序音視頻搞定了手機(jī)，WebRTC拿下了PC。如果你對(duì)技術(shù)比較感興趣，那我們就可以從多個(gè)技術(shù)的角度去列舉兩者的區(qū)別，下面是一張?jiān)敿?xì)對(duì)比的表格：

小程序音視頻是將騰訊視頻云的 liteavsdk 嵌入到微信內(nèi)部實(shí)現(xiàn)的，然后通過(guò)和 兩個(gè)標(biāo)簽將 SDK 內(nèi)部的音視頻能力開(kāi)放出來(lái)。所以小程序的標(biāo)簽起到了開(kāi)發(fā)者 API 的作用，而內(nèi)部的 SDK 則是真正用來(lái)實(shí)現(xiàn)音視頻功能。

WebRTC 由谷歌收購(gòu) GIPS 得來(lái)（這里不得不提一下，我加入騰訊時(shí)所在的第一個(gè)團(tuán)隊(duì)就是 QQ 團(tuán)隊(duì)，當(dāng)時(shí) QQ 的音視頻還是購(gòu)買(mǎi)的 GIPS 公司的產(chǎn)品，不過(guò)由于各種不靠譜，后來(lái)就轉(zhuǎn)為自研路線了）。所以其技術(shù)被完整的保留并且加入到了 Google 的 Chrome 瀏覽器內(nèi)核當(dāng)中。而且最近蘋(píng)果也已經(jīng)開(kāi)始在 Safari 瀏覽器中支持 WebRTC 的相關(guān)能力。

小程序音視頻的主要協(xié)議是目前在直播領(lǐng)域最為常用的 RTMP 推流協(xié)議，以及 HTTP-FLV 播放協(xié)議，這兩種協(xié)議都已經(jīng)有多年的沉淀而且在互聯(lián)網(wǎng)上的資料也是汗牛充棟。WebRTC的底層則是使用RTP和RTCP兩種數(shù)據(jù)協(xié)議，其中RTP主要用于音視頻數(shù)據(jù)傳輸，而RTCP則一般用于控制。小程序音視頻由于是微信統(tǒng)一實(shí)現(xiàn)的，而且微信團(tuán)隊(duì)每個(gè)版本都盡量要求功能對(duì)齊，否則寧可不上，所以在碎片化問(wèn)題上基本不存在。

WebRTC在這里則要尷尬的多，一方面Android系統(tǒng)的碎片化本身讓W(xué)ebRTC的具體表現(xiàn)呈現(xiàn)“百花齊放”的景象，同時(shí)，iOS 目前的內(nèi)嵌WebView（也就是在微信等APP里打開(kāi)的各種內(nèi)嵌網(wǎng)頁(yè)）不支持WebRTC也還是個(gè)很麻煩的問(wèn)題。

小程序音視頻跟隨微信的版本發(fā)布，有什么問(wèn)題一般是當(dāng)前代碼流修正，然后跟隨下一個(gè)版本發(fā)布，所以一般一個(gè)功能點(diǎn)（比如給 pusher 加一個(gè)美顏的功能）或者一個(gè)問(wèn)題點(diǎn)（比如不支持手勢(shì)放大）從確立到最終實(shí)現(xiàn)（或解決）僅需要一個(gè)月的時(shí)間，而且微信APP新版本的覆蓋速度也確實(shí)挺快。

相比之下，WebRTC則不是一個(gè)團(tuán)隊(duì)或者一家公司的問(wèn)題了，因?yàn)樗F(xiàn)在已經(jīng)走標(biāo)準(zhǔn)路線，所以每一個(gè)新特性都是先確定標(biāo)準(zhǔn)，然后再推動(dòng)瀏覽器廠商（包括蘋(píng)果）進(jìn)行跟隨。這里面的故事就多了，時(shí)間也就更久了。相信您已經(jīng)發(fā)現(xiàn)，在前面幾個(gè)問(wèn)題的分析上，我的觀點(diǎn)都傾向小程序音視頻。確實(shí)，在目前國(guó)內(nèi)的移動(dòng)領(lǐng)域里，谷歌和蘋(píng)果都不能一家說(shuō)了算，真正說(shuō)了算的還是微信。

但是在桌面瀏覽器這個(gè)部分，Chrome目前在PC瀏覽器市場(chǎng)上留到地位的存在決定了 WebRTC 的優(yōu)勢(shì)就很大了，開(kāi)發(fā)者可以在不安裝插件的情況下就可以實(shí)現(xiàn)自己想要的功能。相比之下，由于沒(méi)有 Chrome 的原生支持，所以如果我們要在 PC 上對(duì)接小程序音視頻，就需要安裝瀏覽器插件或者通過(guò) wxlite://start 這樣的偽協(xié)議喚起本地 exe 應(yīng)用程序（類(lèi)似在網(wǎng)頁(yè)上打開(kāi) QQ 聊天窗口）。

小程序音視頻和WebRTC支架并非零和博藝，雙方都有自己的優(yōu)勢(shì)和不足，所以本著“打不過(guò)他們，就加入他們”的思路，騰訊視頻云團(tuán)隊(duì)在2018年春節(jié)回來(lái)后，就馬不停蹄地開(kāi)始了小程序音視頻和WebRTC互通的相關(guān)工作。

目前，需要向各位開(kāi)發(fā)者匯報(bào)的是，在最新版本的微信中，小程序音視頻已經(jīng)可以跟WebRTC打通，目前在PC 的Chrome瀏覽器上就可以跟小程序進(jìn)行實(shí)時(shí)音視頻互通。就像結(jié)婚一樣，既然你決定要選擇另一個(gè)人作為人生下半輩子的伴侶，那你肯定會(huì)先深入地了解一下TA這個(gè)人，比如性格，脾氣，愛(ài)好等各個(gè)方面。

同樣，我們要想很好的將小程序音視頻和WebRTC打通，那也必須要多了解一下WebRTC，這里我就說(shuō)一下我對(duì) WebRTC 這個(gè)“人” 在性格上的一些理解。

說(shuō)WebRTC長(zhǎng)得不好看，只是我的一種比喻，我的意思是想說(shuō)WebRTC的學(xué)習(xí)成本不低，雖然Google做了很多淺顯易懂的PPT來(lái)教你怎么 Getting Start，但真要完整的學(xué)進(jìn)去，還是需要靜下心來(lái)，慢慢地把她當(dāng)成自己認(rèn)可的目標(biāo)去學(xué)下去。但是如果你是第一次戀愛(ài)（也就是第一次接觸實(shí)時(shí)音視頻），你會(huì)發(fā)現(xiàn)學(xué)習(xí)WebRTC的過(guò)程，本身就是了解一個(gè)實(shí)時(shí)音視頻技術(shù)細(xì)節(jié)的過(guò)程。

說(shuō)WebRTC喜歡遷就比人，也是一種比喻，WebRTC所支持的后臺(tái)架構(gòu)非常多（比如 Mixer， Mesh，Router），而且谷歌認(rèn)為這些后臺(tái)實(shí)現(xiàn)都比較簡(jiǎn)單，所以既沒(méi)有開(kāi)放后臺(tái)相關(guān)的源碼，也沒(méi)有提供統(tǒng)一的后臺(tái)解決方案。這種開(kāi)放式的設(shè)計(jì)思路非常好，但副作用就是實(shí)現(xiàn)成本高。在真刀真槍的項(xiàng)目落地時(shí)，小規(guī)模的公司或者開(kāi)發(fā)者就很容易被這種技術(shù)門(mén)檻擋在門(mén)外。尤其是想要將 WebRTC 真正應(yīng)用到企業(yè)級(jí)解決方案中，面對(duì)錄制和存檔的剛性需求，就需要花費(fèi)大量時(shí)間進(jìn)行定制開(kāi)發(fā)。

但是看過(guò)《新聞聯(lián)播》里國(guó)家領(lǐng)導(dǎo)人之間談話鏡頭的人都知道，這種翻譯是會(huì)影響交流速度的。小程序音視頻和WebRTC之間互通，中間引入一個(gè)翻譯員，是不是通訊延時(shí)也就增加了？

其實(shí)不會(huì)，因?yàn)樾〕绦蛞粢曨l和WebRTC的視頻編碼標(biāo)準(zhǔn)在常規(guī)應(yīng)用場(chǎng)景中是一致的，都是H.264標(biāo)準(zhǔn)，這是音頻格式不同而已。這就意味著，翻譯員要做的事情很少，兩邊基本都能挺對(duì)對(duì)方在說(shuō)什么，所以延時(shí)不會(huì)增加太多。

僅僅完成了音視頻數(shù)據(jù)在小程序和WebRTC之間的握手還遠(yuǎn)遠(yuǎn)不夠，因?yàn)樵谝淮纬晒Φ囊粢曨l通話背后，不僅僅是把一端的音視頻數(shù)據(jù)傳遞到另一端這么簡(jiǎn)單，還有狀態(tài)的同步和成員間的狀態(tài)協(xié)同。

比如多人視頻通話中，涉及到呼叫和接通的流程，其中一方如果掛斷了，其他人要收到掛斷的通知。同時(shí)，如果有新的參與者加入，那么其他人也要收到相應(yīng)的通知。WebRTC 中有很多組件，比如 RTCPeerConnection 就在處理上訴林林種種的邏輯。但是 WebRTC 的接口中引入的新名詞非常多，對(duì)于初學(xué)者來(lái)說(shuō)還是有一定的入門(mén)門(mén)檻，為了簡(jiǎn)化這里的邏輯，我們引入一個(gè)叫做“房間”的概念。

所謂房間（Room），就是把同時(shí)參與視頻通話的各方圈在一起的一個(gè)東西。比如雙人通話中，通話中的兩個(gè)人 A 和 B 就可以認(rèn)為在一個(gè)房間中。再比如在多人通話中，通話中的五個(gè)人（A B C D E）也可以認(rèn)為是在一個(gè)房間里。

有了房間的概念，那我們就可以對(duì)剛才說(shuō)的狀態(tài)協(xié)同用兩個(gè)簡(jiǎn)單的動(dòng)作描述一下：如果有一個(gè)人加入了視頻通話，那么就可以理解為他/她已經(jīng)進(jìn)房（EnterRoom）了；如果有一個(gè)退出了視頻通話，那么就可以理解為他/她已經(jīng)離開(kāi)房間（LeaveRoom）了。而房間的門(mén)板上始終寫(xiě)著：“目前在房間里有哪幾個(gè)人”。

有了房間的概念，我們就可以將小程序的兩個(gè)簡(jiǎn)單的和 標(biāo)簽，同 WebRTC 那一套復(fù)雜的 API 進(jìn)行功能上的對(duì)齊，我們甚至不需要修改我們?cè)诘谝话嬷卸x的接口，就可以達(dá)成這個(gè)目標(biāo)：原理如下：1） 的 url 接口不再傳遞 rtmp:// 協(xié)議的推流地址，而是傳遞 room:// 協(xié)議的推流地址。room:// 協(xié)議的使用方式可以參考我們的原理版文檔DOC。；

2）標(biāo)簽在 start 成功之后，就相當(dāng)于成功進(jìn)入一個(gè) room，之后，您可以通過(guò) onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020) 事件，收到房間里還有那些人的信息。在視頻通話期間，房間內(nèi)各個(gè)成員的進(jìn)進(jìn)出出，也都會(huì)通過(guò)這個(gè)事件通知給您的小程序代碼；

3）ROOM_USERLIST 里每一項(xiàng)都是一個(gè)二元組（如果是 1v1 的視頻通話，ROOM_USERLIST 里只會(huì)有一個(gè)人）: userid 和 playurl。 userid 代表是哪個(gè)用戶(hù)， playurl 則是這個(gè)用戶(hù)遠(yuǎn)程畫(huà)面的播放地址。您要做的只是使用標(biāo)簽播放這些遠(yuǎn)程畫(huà)面的圖像和聲音而已；

4）在 WebRTC 這一端，您可以參考我們的 webrtc API，這套 API 相對(duì)于 WebRTC 原生的 API，更適合初學(xué)者使用。