自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

連麥互動直播 X 微信小程序

原創(chuàng)
新聞 移動開發(fā)
2018年3月17日星期六,在由即構科技主辦的技術沙龍Zego Meetup北京站中,即構科技資深技術專家、架構師冼牛向參會者分享了即構團隊在連麥直播技術和微信小程序結合的思考和實踐。

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

2018年3月17日星期六,在由即構科技主辦的技術沙龍Zego Meetup北京站中,即構科技資深技術專家、架構師冼牛向參會者分享了即構團隊在連麥直播技術和微信小程序結合的思考和實踐。

當日,北京一早就下起來漫天紛飛的鵝毛大雪,卻擋不住參會者學習和交流的熱情,活動現場擠得滿滿一堂。瑞雪兆豐年,2018年對創(chuàng)業(yè)者來說,將會是一個豐收的好年頭。

連麥直播的技術難點和解決思路

我們先回顧一下連麥互動直播技術,這個要從應用場景說起。

第一類應用場景就是最常見的視頻直播中的多主播連麥場景。從2016年開始,從單向直播發(fā)展到兩人連麥、三人連麥,逐漸到多人連麥。兩人連麥是指視頻直播場景里面的兩個主播進行連麥互動,具體的節(jié)目形式有談話、脫口秀、K歌或者合唱。在視頻直播中,兩個到三個主播連麥是很常見的形式,有時候會允許觀眾進行連麥。多人連麥的應用場景包括狼人殺、多人視頻群聊和組團直播答題等,在移動端同一個房間連麥互動的用戶往往達到十幾二十個。

第二類應用場景是線上抓娃娃,或者叫直播抓娃娃,也是視頻直播的一個產品形態(tài),視頻直播和物聯網的結合。線上抓娃娃技術除了包含視頻直播以外,還加上了信令的控制,可以實現遠程看著娃娃機并且控制抓娃娃的天車,同時主播和觀眾之間可以通過文字互動,還有語音視頻連麥互動。這是2017年年末的一個風口,把連麥互動直播技術帶到視頻直播和物聯網結合的場景中,相信今年會有更多視頻直播和物聯網結合的應用場景涌現。

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

這三個應用場景對視頻直播技術有什么要求呢?第一個是延遲要足夠低,如果單向延遲不能低于500毫秒的話,視頻通話的互動體驗就無法保障。第二個是回聲消除,因為用戶A和用戶B之間進行視頻通話時,用戶A的聲音在傳到用戶B端時被采集并反饋回來,用戶A在一定的延遲后會聽到回聲,這個對通話的體驗是十分有影響的,因此必須做回聲消除。第三個是要流暢不卡頓,為什么流暢性很必要呢?因為有超低延遲的要求,流暢和延遲本身就是一對相互矛盾的技術要求,如果延遲足夠低的話就要求抖動緩沖區(qū)足夠的小,這樣網絡抖動就很容易顯現出來,導致出現畫面過快、過慢,或者卡頓的情況。

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

一、超低延遲架構

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

要構建超低延遲的實時系統(tǒng)架構,需要考慮以下幾個要點:

  1. 負載均衡 - 超低延遲架構必須要做到負載均衡,也就是說任何一個網絡節(jié)點都必須均衡地負載用戶。如果某一個網絡節(jié)點的用戶訪問量超過了它能夠承載的上限,容易出現大量丟包的情況,這樣會觸發(fā)網絡擁塞,從而引起更多的丟包,導致用戶體驗不好。
  2. 就近接入 - 網絡上的“近”和我們理解的直線上的近是不一樣的。這個可以類比為交通網絡,假設開車的時候看到另外一個點離你近,但實際上可能不一定近,要考慮一下兩點:第一點是連通性,盡管A、B兩點看起來很近,但是從A點到B點是沒有直通的道路,這就相當于網絡的不連通。第二點是擁堵狀況,如果道路很短,但出現擁堵,那也不見得近。比如說,迪拜用戶和北京的用戶連麥,看起來直接從迪拜推流到北京是最近的,可是實際上這個直接的路徑可能是不通的,那么需要繞道香港進行中繼續(xù)傳,走一個彎路,在網絡上的距離可能會“更近”。
  3. 質量評估 - 質量評估中的靜態(tài)方法是事后評估,具體是回顧過去的數據,分析某一個地區(qū)的用戶在各個時間點推流到某個地區(qū)的數據,總結出哪個時間點走哪個路徑比較好的方案,然后人為地將相關數據配置到實時傳輸到網絡,可以提高傳輸質量。
  4. 動態(tài)路由 - 質量評估的另外一個方法是動態(tài)評估,也就是根據歷史數據動態(tài)地進行質量評估。傳輸網絡在運作一段時間后會積累很多用戶數據,比如說深圳的用戶在早上、中午、晚上不同的網絡情況下推流到北京的最優(yōu)路徑,這些數據積累下來,可以為動態(tài)地制定路由策略作依據,這就是動態(tài)路由。
  5. 算法流控 - 在實時傳輸網絡中,我們要選出一條最優(yōu)的路徑進行推流。如果這個最優(yōu)路徑還達不到超低延遲的要求,這個時候我們要在算法上做一些補償,例如信道的保護,通過增加冗余,保護信道里的數據。還有在推流時做一些流控策略,上行網絡中,如果檢測到網絡抖動,或者說弱網情況的話,就降低碼率,網絡情況變好的話,就把碼率提高。下行網絡中,可以通過分層編碼為不同網絡環(huán)境的用戶選擇不同碼率的視頻流。

二、回聲消除

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

那就沒辦法了嗎?其實我們還是有一些辦法的。遠端傳過來的原音是參考信號,它和回聲信號雖然相關,但是并不完全一樣。如果直接把麥克風采集進來的聲音減去原音是不對的。因為回聲是參考信號播放出來以后,在空氣中經過反彈和疊加以后形成的,和參考信號有相關性,但不等同。我們可以理解為回聲信號和參考信號有一定函數關系,而我們需要做的就是把這個函數關系求解出來。通過參考信號作為函數的輸入,模擬出回聲信號,再把麥克風采集到的聲音信號減去模擬回聲信號,最終達到回聲消除的目的。我們是通過濾波器來實現這個函數,濾波器會不斷的學習和收斂,模擬回聲信號,使模擬回聲盡量逼近回聲信號,然后將麥克風采集進來的聲音信號減去模擬回聲信號,達到回聲消除的目的。這個步驟也稱為線性處理。

 

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

三、抖動緩沖

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

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

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

2) 回聲消除,屬于語音前處理3A,需要在前處理環(huán)節(jié)進行,也就是在終端實現的。

3) 抖動緩沖,是在接收端實現的,通過接收端的抖動緩沖來決定發(fā)送端要以多大的時間間隔來發(fā)送數據包。

綜上所述,剛才說的三個技術難點都是在終端實現的,因此終端非常重要。下面我們重點比較連麥直播技術在各種終端上的實現。

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

連麥直播的終端主要包括:原生APP、瀏覽器H5、瀏覽器WebRTC、微信小程序。瀏覽器上的應用包括H5和WebRTC,前者可以拉流觀看,后者可以實現推流和拉流。

連麥直播移動終端-Native APP

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

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

 

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

 

市面上比較流行的前處理技術,比如美顏、掛件、變聲等,原生APP都可以通過開放前處理接口讓開發(fā)者實現或者對接這些技術。為什么要強調這個呢?因為瀏覽器WebRTC和微信小程序都沒有開放前處理接口,開發(fā)者沒有辦法自行實現或者對接第三方的美顏或者掛件等技術模塊。

 

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

 

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

連麥直播移動終端-瀏覽器(H5)

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

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

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

在瀏覽器H5中也可以通過websocket來傳輸,用jsmpeg來播放,視頻編解碼的格式用mpeg1。

mpeg1是一個比較老的媒體格式,所有瀏覽器都支持。在瀏覽器中使用jsmpeg播放器播放mpeg1,所有瀏覽器也可以支持。這么做可以獲得比較低的延遲,但是還是無法推流,沒辦法實現連麥直播。

例子:線上抓娃娃H5版

下面使用即構線上抓娃娃H5版本為例,簡單介紹一下websocket在瀏覽器H5上的應用。從下圖左上角可以看到,在瀏覽器H5終端接入即構實時傳輸網絡時,我們加入了一個視頻接入服務器,右邊是即構實時傳輸網絡,使用基于UDP的私有協議。通過接入服務器實現協議的轉換和媒體格式的轉換:websocket和基于UDP的私有協議的轉換,mpeg1和H.264的轉換。如果原生APP接入就不需要做轉換,雖然有接入服務器,但是不會做轉換。

另外,線上抓娃娃的H5版本是沒有聲音的,除了應用場景的特點要求外,也要用H5實現了音頻引擎才能有聲音。如果在瀏覽器H5上實現了音頻引擎,就相當于把技術開源了,目前還沒有看到哪個廠商這么做。

連麥直播移動終端-瀏覽器(WebRTC)

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

這里說的WebRTC是指已經被內嵌到瀏覽器里面,被瀏覽器支持的WebRTC,而不是WebRTC的源代碼。部分主流瀏覽器內嵌了WebRTC,對開發(fā)者開放了瀏覽器的實時音視頻能力。

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

瀏覽器WebRTC一般的優(yōu)勢和劣勢這里就不再重復,請大家自行百度,這里只說重點。瀏覽器WebRTC的好處就是實現了相對完整的音視頻終端引擎,允許在瀏覽器上推流,可以實現連麥直播。然而,瀏覽器WebRTC也有不足:

  1. 沒有開放前處理接口,美顏和掛件這些模塊沒辦法接入第三方的或者自研方案。
  2. 媒體服務器后端沒有實現,開發(fā)者要實現媒體服務器,然后通過開源WebRTC網關(比如說janus)接入。
  3. 編解碼器、抖動緩沖和語音前處理3A等能力只能依靠WebRTC,不能自行定制化。
  4. 部分主流瀏覽器是不支持WebRTC的,特別是蘋果的瀏覽器。雖然說去年蘋果宣布支持WebRTC,但是目前iOS Safari最新版本對WebRTC的支持并不好,iOS Safari的主流版本并不支持WebRTC,在iOS上面微信瀏覽器也是不支持WebRTC的。

如上圖所示,由于WebRTC不提供媒體服務器的實現,因此需要把瀏覽器WebRTC接入到媒體服務器后端,這個可以是自研的,也可以是第三方的服務。瀏覽器WebRTC和媒體服務器后端之間的協議和媒體格式是不一樣的,因此要做協議和格式的轉換。WebRTC用的基于UDP的SRTP,需要把它轉換成媒體服務器的基于UDP的私有協議。另外,媒體格式也需要轉換,因為WebRTC中語音視頻格式默認用的是VP8或者VP9。同時實時傳輸網絡中有關信令調度也需要做一些調整。瀏覽器WebRTC和媒體服務器后端之間的接入層也可以采用開源的WebRTC Gateway(比如說janus)來實現。

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

連麥直播移動終端-微信小程序

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

微信小程序可以類比為瀏覽器H5那樣的客戶端和服務器的結構。其中HTML對應微信小程序的WXML,CSS對應小程序的WXSS,小程序的腳本語言和JS是一樣的,只是框架不一樣。微信小程序提供了兩個標簽,一個是<live-pusher>,一個是<live-player>。<live-pusher>就是推流,<live-player>就是拉流,可以實現單向直播或者連麥直播。小程序提供兩種模式:LIVE和RTC,LIVE支持單向直播,RTC支持低延遲的連麥直播。目前微信小程序推流采用RTMP協議,如果要和私有協議互通,需要進行協議轉換。

微信小程序開放了實時音視頻能力,對業(yè)界來說是重大利好。然而,根據上面的信息和邏輯,我們也看到采用微信小程序實現連麥互動直播的好處和不足。

好處有三點

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

2)很容易傳播和獲客,充分利用好微信的優(yōu)質流量;

3)可以推流和拉流,允許實現連麥直播和實時語音視頻通話。

不足有四點

  1. 你會受制于微信小程序的實時音視頻能力,比如說,如果它的回聲消除有某些問題,你只能等微信團隊按照自己的節(jié)奏來優(yōu)化,而自己沒有任何辦法去優(yōu)化。
  2. 小程序沒有開放前處理接口,只能使用小程序自帶的美顏或者變聲功能(如果有),不能對接自行研發(fā)或者第三方的美顏或者變聲模塊。
  3. 通過RTMP協議推流和拉流,不能和基于UDP的私有協議互通連麥。如果要實現和基于UDP的私有協議互通連麥,就必須要增加接入層來轉換協議格式甚至媒體格式。
  4. 沒有實現后端媒體服務器,開發(fā)者必須要自行實現媒體服務器,或者把微信小程序接入到第三方的實時通信網絡。

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

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

如果要將微信小程序接入實時音視頻傳輸網絡,中間得有接入服務器,我們叫接入層。在接入層我們需要做協議的轉換,比如說,如果實時音視頻傳輸網絡是使用基于UDP的私有協議,那么要把RTMP協議轉為基于UDP的私有協議。還有媒體格式的轉換,如果和實時傳輸網絡的媒體格式不一樣,還需要進行轉換。

連麥直播移動終端-WebRTC通過WebView接入小程序

還有別的方法在小程序上做連麥直播互動嗎?必須要使用微信小程序開放的語音視頻能力嗎?也不一定。下圖展示了我在市面上看過的一個技術方案,它繞過了微信小程序實時語音視頻能力,通過微信小程序WebView組件實現了連麥直播的方案。這里和大家分享一下。

這個方案的基本思路是利用WebView的瀏覽器特點,在WebView內使用WebRTC的Web API,從而在小程序上獲得實時音視頻能力。上圖是這個方案的拓撲圖。最底層是微信小程序的基礎能力。上一層是WebView,WebView是微信小程序的一個控件,可以簡單看作一個類似瀏覽器的組件,提供了瀏覽器的一部分特性,但并不是完整的瀏覽器。微信小程序的WebView類似瀏覽器,那么就可能會支持WebRTC。然而必須要注意到,微信小程序的WebView在安卓平臺上支持WebRTC,但在iOS平臺上面不支持WebRTC。雖然這個方案理論上也能在微信小程序上實現連麥直播,但是它有以下的局限性:

1)在iOS平臺上,微信小程序不支持這個方案,上面已經說過。

  1. 小程序WebView不是完整的瀏覽器,要比普通瀏覽器表現差而且有很多的限制。
  2. 開發(fā)者和操作系統(tǒng)之間隔了好幾層:微信底層,小程序,WebView,WebRTC,然后才是開發(fā)者的小程序應用。每一層的抽象都會帶來性能上的消耗,都會影響到最終的體驗。

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

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

隨著連麥互動直播技術在各種終端上逐步實現,那么我們就會面臨一個問題:在各種終端上可以連麥互通嗎?比如說,用戶A在微信小程序上可以和用戶B在原生APP上連麥互通嗎?

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

以即構科技的方案為例,即構ZEGO的原生APP SDK有兩個版本:支持RTMP協議和基于UDP的私有協議,如果用的是支持RTMP協議的原生APP SDK,那么直接就可以和小程序互動連麥,如果用了基于UDP的私有協議的原生APP SDK,那么就要經過接入服務器進行協議和格式的轉換。

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

結語

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


【福利】

 

ZEGO Meetup 上海站 | 視頻直播+的技術實踐之道

 

從2016年到2017年,視頻直播行業(yè)從爆發(fā)走向成熟。2017年與2018年之交,直播行業(yè)又煥發(fā)了第二春,讓人憧憬是否還有第三春。

起起伏伏的是行業(yè)的風口和趨勢,穩(wěn)步前進的是技術的實踐之道。

在剛剛結束了ZEGO Meetup 北京站后,我們決定繼續(xù)前往上海,與上海的伙伴們一起探討視頻直播的技術與最佳實踐。

本期活動,我們邀請了即構科技、么么直播、滬江CCtalk、涂圖TuSDK的4位音視頻技術大咖,他們將帶來:

《么么直播音視頻實踐和優(yōu)化》

《連麥互動直播 X WebRTC》

《使用RTC技術,搭建優(yōu)秀的在線教育平臺》

《深度學習和視頻特效的技術融合》

干貨滿滿,就在本周六喔!

點擊文末“閱讀原文”即可快速報名喲~

報名成功的朋友,可以加即構工作人員微信zego_tech_consulting,備注“姓名-公司-職位”,提前拉你進入活動現場群~

 

時間:2018年3月31日 13:00-17:30

地點:上海市徐匯區(qū)宜山路700號C3棟 朗盛科創(chuàng)中心1F 獨角獸全球平行加速器(桂林路地鐵站1號或5號出口)

嘉賓議程

Topic 1:《么么直播音視頻實踐和優(yōu)化》

[[224488]]

黃銘新,么么直播前端團隊負責人

嘉賓簡介:曾就職于天天動聽、英語流利說,現在么么直播負責前端開發(fā)團隊的team leader相關工作。技術上主要偏向于JS、Node全棧式開發(fā),主要負責公司內的主站、內部服務和部分微服務的開發(fā)和管理。

內容簡介:

1、么么直播項目初期踩過的一些坑及其解決辦法,如延遲大、卡頓明顯、加載速度慢、在手機上的性能差等問題

2、當業(yè)務需要使用第三方的cdn、sdk時,如何進行資源整合及不同sdk的相互調用

3、么么在Web/H5上的性能優(yōu)化及前端技術解決方案——如何降低flash的大小、減小延遲、無flash進行flv播放等

Topic 2: 《連麥互動直播 X WebRTC》

[[224489]]

冼牛,即構科技資深技術專家、架構師

嘉賓簡介:北京郵電大學計算機碩士,香港大學工商管理碩士,負責即構實時音視頻引擎的開發(fā)與研究,目前工作集中于直播技術在移動端的全面適配,專注視頻直播、音視頻社交、物聯網和在線教育等行業(yè)。

內容簡介:連麥互動直播技術要滿足應用場景的訴求,而應用場景要考慮移動端的技術特點:原生的iOS和Android APP體驗好但不易傳播,瀏覽器WebRTC易于傳播但受到技術限制。連麥互動直播技術要充分考慮各種移動端的技術特點,才能讓實時音視頻云服務的強大能力全面地覆蓋各種應用場景。這次技術演講將從WebRTC切入,同時覆蓋微信小程序、瀏覽器H5和原生APP等移動端,結合這些終端的技術特點,去分享直播技術在適配這些終端過程中的思考和實踐。

Topic 3:《使用RTC技術,搭建優(yōu)秀的在線教育平臺》

[[224490]]

武海濱,滬江 CCTalk 音視頻架構師

嘉賓簡介:先后就職于盛大創(chuàng)新院多媒體主題院、阿里巴巴等公司。目前擔任滬江 CCtalk 音視頻架構師,從事CCtalk音視頻相關研發(fā)。

內容簡介:滬江一直致力于將CCtalk打造為優(yōu)秀的教育平臺,滿足各類人和機構在上面開課、教學。這就要求CCtalk 不僅做到功能齊全、低成本,同時在技術上達到互動的低延遲、運行的高穩(wěn)定。本次分享,主要是介紹最近我們在開發(fā)CCtalk中遇到的哪些問題、采用什么技術和策略解決掉這些問題的。

Topic 4:《深度學習和視頻特效的技術融合》

[[224491]]

王勝,涂圖TuSDK 研發(fā)技術總監(jiān)

嘉賓簡介:5年深度學習第一線從業(yè)經驗,先后服務于美圖、宇泛、顏鑒等互聯網公司。研究范圍主要集中于移動端人臉識別、人臉檢測對齊追蹤,目前在TuSdk負責人臉識別算法面向各行業(yè)的產品規(guī)劃及落地,手機解鎖項目研發(fā)負責人。

內容簡介:隨著直播技術和深度學習技術的大火,在手機端部署深度學習成為了越來越普遍的選擇。FaceU的人臉貼紙、Youtube的視頻背景分割以及其衍生的各種各樣的特效,都讓如何更加合理的設計手機上高效運行的深度學習成為了技術上痛點。這里分享通過一系列算法的優(yōu)化和利用GPU加速深度學習在直播中的應用。

活動正在火熱報名中,點擊底部 “閱讀原文” 即可快速報名

閱讀原文鏈接:http://www.huodongxing.com/event/6432925190011

關于即構ZEGO

即構科技于2015年由QQ前總經理林友堯創(chuàng)立,A輪獲得IDG投資,核心團隊來自騰訊QQ,匯聚了來自YY和華為等廠商的頂尖語音視頻人才。即構ZEGO致力于提供全球最清晰最穩(wěn)定的實時語音視頻云服務,助力企業(yè)業(yè)務創(chuàng)新,改變用戶線上溝通方式。即構ZEGO深耕視頻直播、視頻社交、游戲語音、線上抓娃娃和在線教育等領域,贏得了映客、花椒直播、一直播、喜馬拉雅FM、陌陌游戲、自由之戰(zhàn)2、和好未來等頂級廠商托付和信賴。

責任編輯:林師授 來源: 51CTO
相關推薦

2016-09-01 10:23:07

網易直播云計算

2017-05-10 13:49:02

互聯網

2018-07-26 15:16:50

小程序iPhone X甜酸

2017-05-08 15:03:07

微信小程序開發(fā)實戰(zhàn)

2016-11-22 11:23:52

微信小程序騰訊微信

2016-09-27 16:38:24

JavaScript微信Web

2016-09-27 15:40:58

微信程序前端

2016-11-04 10:49:48

微信小程序

2021-06-10 10:51:27

程序基礎架構

2016-10-20 21:02:12

微信小程序javascript

2017-01-09 10:01:49

微信小程序

2017-06-09 10:06:54

微信小程序架構分析

2017-06-09 12:58:20

微信小程序架構分析

2017-06-09 10:40:00

微信小程序架構分析

2016-09-28 18:10:59

微信程序MINA

2016-11-04 10:31:49

微信程序指南

2016-11-19 18:06:44

微信小程序張小龍

2017-02-06 13:32:12

微信小程序思想

2016-09-27 20:36:23

微信HttpWeb

2017-06-27 10:53:32

點贊
收藏

51CTO技術棧公眾號