全方位詳解PC端和移動端的H5抓娃娃

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

延時

可用度

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

1. 延時

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

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

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

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

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

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

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

2. 可用度

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

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

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

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

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