短短兩周時間，在線抓娃娃從一個默默賺錢的行業(yè)變成了風(fēng)口行業(yè)，從硬件到軟件架構(gòu)、從盈利到投資、從運營到推廣，全方位解讀都有了。唯獨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來實現(xiàn)。絕大多數(shù)瀏覽器都對WebRTC有較好的支持。但是iOS的微信內(nèi)置瀏覽器不支持WebRTC。

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

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

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

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

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

JSMpeg 是用 JavaScript 實現(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 全球部署的實時虛擬通信網(wǎng)SD-RTN?進(jìn)行視頻實時傳輸
• 最后到達(dá)操作端，解碼、播放
• 操作端通過業(yè)務(wù)Server將操控指令發(fā)送給娃娃機(jī)端，通過視頻流獲得實時反饋。
• 可以從SD-RTN?分出一路高延時的rtmp流播放給觀眾

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

四. 決定微信H5抓娃娃體驗不同的差異在哪?

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

• 延時
• 可用度
• 服務(wù)穩(wěn)定

延時

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

• 指令延時：由于操作端到娃娃機(jī)端的指令，數(shù)據(jù)包極小，因此延時很低，一般是幾十毫秒。
• 視頻延時：視頻延時如果在400ms以內(nèi)，玩家可接受。

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

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

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

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

可用度

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

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

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

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

掃描下方二維碼，快速體驗微信H5抓娃娃demo

對接文檔：
https://document.agora.io/cn/1.14/tutorial/wawaji.html

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的微信H5视频抓娃娃，没你想的那么难，看完你也会的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。