全方位詳解PC端和移動(dòng)端的H5抓娃娃

短短兩周時(shí)間，在線抓娃娃從一個(gè)默默賺錢的行業(yè)變成了風(fēng)口行業(yè)，從硬件到軟件架構(gòu)、從盈利到投資、從運(yùn)營(yíng)到推廣，全方位解讀都有了。唯獨(dú)H5抓娃娃（特指移動(dòng)web、微信抓娃娃），仍然很神秘。

H5抓娃娃真的有那么神秘嗎？本文為你全方位揭曉。

一. 大多數(shù)人所說(shuō)的H5抓娃娃是什么？

H5抓娃娃，是指支持HTML5的Web端抓娃娃。可以分為兩類：PC端和移動(dòng)端。

PC端的H5抓娃娃，只要支持WebRTC的瀏覽器，就可以直接使用Agora Web SDK。當(dāng)然，也可以使用WebRTC自研，解決若干服務(wù)端傳輸、設(shè)備適配、回聲、可用度等問(wèn)題后，就可以商用了。PC端的H5抓娃娃，已經(jīng)有很成熟的解決方案。

移動(dòng)端的H5抓娃娃，就比較復(fù)雜了。移動(dòng)端的H5抓娃娃是指兩種：移動(dòng)web瀏覽器和微信內(nèi)網(wǎng)頁(yè)抓娃娃。大多數(shù)抓娃娃廠商的需求是在微信推廣網(wǎng)頁(yè)抓娃娃，不是除微信以外的移動(dòng)瀏覽器。

那么，問(wèn)題很清楚了，大多數(shù)人所說(shuō)的H5抓娃娃是指微信內(nèi)置瀏覽器抓娃娃，下文為了敘述方便，就簡(jiǎn)稱微信H5抓娃娃。

二. 微信H5抓娃娃和Naive App抓娃娃有什么區(qū)別？

目前成熟的PC端Web抓娃娃，是通過(guò)WebRTC來(lái)實(shí)現(xiàn)。絕大多數(shù)瀏覽器都對(duì)WebRTC有較好的支持。但是微信的內(nèi)置瀏覽器不支持WebRTC。

上圖是在線抓娃娃實(shí)時(shí)視頻流的大致處理流程。在抓娃娃的業(yè)務(wù)場(chǎng)景中，采集是通過(guò)安放在娃娃機(jī)上的主板或PC機(jī)來(lái)實(shí)現(xiàn)，渲染/播放就是娃娃機(jī)操作端。微信H5抓娃娃與App抓娃娃的唯一區(qū)別就是娃娃機(jī)操作端。前者是微信內(nèi)置瀏覽器，后者是Native App。

三. 微信H5抓娃娃怎么實(shí)現(xiàn)？

接下來(lái)，就以聲網(wǎng)Agora的微信H5方案，來(lái)揭開微信H5抓娃娃的神秘面紗。

正如前文所說(shuō)，微信H5要解決的就是最后一個(gè)環(huán)節(jié)——操作端播放視頻。聲網(wǎng)采用的策略是，使用JSMpeg在微信瀏覽器播放。

聲網(wǎng)Agora在線抓娃娃技術(shù)架構(gòu)圖

JSMpeg 是用 JavaScript 實(shí)現(xiàn)的視頻播放器，它包括一個(gè) MPEG 分離器，MPEG1 視頻和 MP2 音頻解碼器，WebGL 和 Canvas2D 渲染和 WebAudio 聲音輸出。

JSMpeg 的體積相對(duì)較小，在絕大多數(shù)瀏覽器上都能工作的很好，在 iPhone 5S 上能夠以 30fps 的幀率解碼 720P 的視頻。

由于JSMpeg只支持MPEG1格式，所以在解碼環(huán)節(jié)增加一個(gè)轉(zhuǎn)碼Server，將視頻格式轉(zhuǎn)成MPEG1。再通過(guò)中繼Server將視頻分發(fā)到微信瀏覽器，通過(guò)JSMpeg播放。

其他環(huán)節(jié)，微信H5方案與非微信H5方案完全一致。

娃娃機(jī)端，通過(guò)主板或PC機(jī)連接兩個(gè)攝像頭，采集視頻數(shù)據(jù)。

通過(guò)Agora 的專利編碼器編碼器，進(jìn)行視頻流的優(yōu)化。

通過(guò)Agora 全球部署的實(shí)時(shí)虛擬通信網(wǎng)SD-RTN?進(jìn)行視頻實(shí)時(shí)傳輸

最后到達(dá)操作端，解碼、播放

操作端通過(guò)業(yè)務(wù)Server將操控指令發(fā)送給娃娃機(jī)端，通過(guò)視頻流獲得實(shí)時(shí)反饋。

可以從SD-RTN?分出一路高延時(shí)的rtmp流播放給觀眾

通過(guò)技術(shù)架構(gòu)圖可以看到，微信H5抓娃娃，最后是通過(guò)成熟的開源項(xiàng)目來(lái)實(shí)現(xiàn)，這也是大多數(shù)主流微信H5抓娃娃的實(shí)現(xiàn)方式。那么，決定微信H5抓娃娃體驗(yàn)不同的差異在哪?

四. 決定微信H5抓娃娃體驗(yàn)不同的差異在哪?

抓娃娃最關(guān)鍵的體驗(yàn)有以下3個(gè)方面：

延時(shí)

可用度

服務(wù)穩(wěn)定

1. 延時(shí)

延時(shí)有操作端到娃娃機(jī)的指令延時(shí)，和娃娃機(jī)到操作端的視頻延時(shí)。

指令延時(shí)：由于操作端到娃娃機(jī)端的指令，數(shù)據(jù)包極小，因此延時(shí)很低，一般是幾十毫秒。

視頻延時(shí)：視頻延時(shí)如果在400ms以內(nèi)，玩家可接受。

決定抓娃娃延時(shí)體驗(yàn)的關(guān)鍵在于視頻延時(shí)。

視頻清晰度和延時(shí)，是兩個(gè)互相對(duì)立的。在帶寬不變的情況下，視頻越清晰，幀率、碼率越高，延時(shí)越高。因此，在視頻清晰度和延時(shí)之間要取得一個(gè)平衡點(diǎn)。

聲網(wǎng)通過(guò)私有專利的編解碼器，在保證清晰度的前提下，盡可能的降低碼率。通過(guò)丟包重傳、FEC、帶寬檢測(cè)、動(dòng)態(tài)碼率調(diào)整等弱網(wǎng)對(duì)抗策略，保證用戶在網(wǎng)絡(luò)質(zhì)量不佳時(shí)，也能獲得流暢的體驗(yàn)。

聲網(wǎng)在全球部署近100個(gè)節(jié)點(diǎn)，構(gòu)成SD-RTN?通信網(wǎng)。SD-RTN?系統(tǒng)能夠?qū)崟r(shí)根據(jù)各節(jié)點(diǎn)的連接和傳輸狀況、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間，自動(dòng)分配最優(yōu)、最通暢的傳輸路徑，達(dá)到實(shí)時(shí)傳輸需要的質(zhì)量保障級(jí)別。

2. 可用度

根據(jù)Callstats.io數(shù)據(jù)顯示，在美國(guó)地區(qū)，基于WebRTC的實(shí)時(shí)通訊有89%可以被成功建立。而聲網(wǎng)的SD-RTN?通過(guò)在每個(gè)地區(qū)的密集布點(diǎn)，已經(jīng)將登錄成功率提高至99%。

3.服務(wù)穩(wěn)定

平均400ms延時(shí)和穩(wěn)定 400 毫秒延時(shí)，用戶的體驗(yàn)是不一樣的。穩(wěn)定的400ms延時(shí)，(用戶心里面會(huì)有預(yù)期)，相比一會(huì)兒 200，一會(huì)兒 800 會(huì)有更好的體驗(yàn)。

抓娃娃快速上線之后的關(guān)鍵問(wèn)題，就是留存。除去業(yè)務(wù)模式，決定用戶留存的就是體驗(yàn)質(zhì)量。舍棄用戶體驗(yàn)而求快，是本末倒置。回歸質(zhì)量、用戶體驗(yàn)，才是長(zhǎng)久的發(fā)展之路。

聲網(wǎng)在線抓娃娃整體解決方案已被哇嘰哇嘰抓娃娃、開心抓娃娃、樂(lè)抓、秒抓、抓多多、咔啦酷抓娃娃、愛抓、美爆抓娃娃、娃娃雞、抓抓等幾乎所有主流廠商采用。