微信H5視頻抓娃娃，沒你想的那麼難，看完你也會

短短兩週時間，在線抓娃娃從一個默默賺錢的行業變成了風口行業，從硬件到軟件架構、從盈利到投資、從運營到推廣，全方位解讀都有了。惟獨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在微信瀏覽器播放。

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個方面：

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

1. 延時

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

• 指令延時：因爲操做端到娃娃機端的指令，數據包極小，所以延時很低，通常是幾十毫秒。
• 視頻延時：視頻延時若是在400ms之內，玩家可接受。

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

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

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

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

2. 可用度

根據Callstats.io數據顯示，在美國地區，基於WebRTC的實時通信有89%能夠被成功創建。而聲網的SD-RTN™經過在每一個地區的密集布點，已經將登陸成功率提升至99%。

3. 服務穩定

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

抓娃娃快速上線以後的關鍵問題，就是留存。除去業務模式，決定用戶留存的就是體驗質量。捨棄用戶體驗而求快，是本末倒置。迴歸質量、用戶體驗，纔是長久的發展之路。

對接文檔： document.agora.io/cn/1.14/tut…

如對咱們感興趣，或遇到開發問題，歡迎訪問聲網 Agora問答版塊與聲網工程師交流。