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

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

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

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

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

• 移動端的H5抓娃娃，就比較復雜了。移動端的H5抓娃娃是指兩種：移動web瀏覽器和微信內網頁抓娃娃。大多數抓娃娃廠商的需求是在微信推廣網頁抓娃娃，不是除微信以外的移動瀏覽器。

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

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

目前成熟的PC端Web抓娃娃，是通過WebRTC來實現。絕大多數瀏覽器都對WebRTC有較好的支持。但是iOS的微信內置瀏覽器不支持WebRTC。

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

三. 微信H5抓娃娃怎么實現？

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

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

聲網Agora在線抓娃娃技術架構圖

JSMpeg 是用 JavaScript 實現的視頻播放器，它包括一個 MPEG 分離器，MPEG1 視頻和 MP2 音頻解碼器，WebGL 和 Canvas2D 渲染和 WebAudio 聲音輸出。
JSMpeg 的體積相對較小，在絕大多數瀏覽器上都能工作的很好，在 iPhone 5S 上能夠以 30fps 的幀率解碼 720P 的視頻。

由于JSMpeg只支持MPEG1格式，所以在解碼環節增加一個轉碼Server，將視頻格式轉成MPEG1。再通過中繼Server將視頻分發到微信瀏覽器，通過JSMpeg播放。

其他環節，微信H5方案與非微信H5方案完全一致。

• 娃娃機端，通過主板或PC機連接兩個攝像頭，采集視頻數據。
• 通過Agora 的專利編碼器編碼器，進行視頻流的優化。
• 通過Agora 全球部署的實時虛擬通信網SD-RTN?進行視頻實時傳輸
• 最后到達操作端，解碼、播放
• 操作端通過業務Server將操控指令發送給娃娃機端，通過視頻流獲得實時反饋。
• 可以從SD-RTN?分出一路高延時的rtmp流播放給觀眾

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

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

抓娃娃最關鍵的體驗有以下3個方面：

• 延時
• 可用度
• 服務穩定

延時

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

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

決定抓娃娃延時體驗的關鍵在于視頻延時。

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

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

聲網在全球部署近100個節點，構成SD-RTN?通信網。SD-RTN?系統能夠實時根據各節點的連接和傳輸狀況、負載狀況以及到用戶的距離和響應時間，自動分配最優、最通暢的傳輸路徑，達到實時傳輸需要的質量保障級別。

可用度

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

服務穩定

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。