短短兩週時間，線上抓娃娃從一個默默賺錢的行業變成了風口行業，從硬體到軟體架構、從盈利到投資、從運營到推廣，全方位解讀都有了。唯獨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個方面：
- 延時
- 可用度
- 服務穩定
- 延時
延時有操作端到娃娃機的指令延時，和娃娃機到操作端的視訊延時。
- 指令延時：由於操作端到娃娃機端的指令，資料包極小，因此延時很低，一般是幾十毫秒。
- 視訊延時：視訊延時如果在400ms以內，玩家可接受。
決定抓娃娃延時體驗的關鍵在於視訊延時。
視訊清晰度和延時，是兩個互相對立的。在頻寬不變的情況下，視訊越清晰，幀率、位元速率越高，延時越高。因此，在視訊清晰度和延時之間要取得一個平衡點。
聲網通過私有專利的編解碼器，在保證清晰度的前提下，儘可能的降低位元速率。通過丟包重傳、FEC、頻寬檢測、動態位元速率調整等弱網對抗策略，保證使用者在網路質量不佳時，也能獲得流暢的體驗。
聲網在全球部署近100個節點，構成SD-RTN™通訊網。SD-RTN™系統能夠實時根據各節點的連線和傳輸狀況、負載狀況以及到使用者的距離和響應時間，自動分配最優、最通暢的傳輸路徑，達到實時傳輸需要的質量保障級別。
- 可用度
根據Callstats.io資料顯示，在美國地區，基於WebRTC的實時通訊有89%可以被成功建立。而聲網的SD-RTN™通過在每個地區的密集布點，已經將登入成功率提高至99%。
- 服務穩定
平均400ms延時和穩定400ms延時，使用者的體驗是不一樣的。穩定的400ms延時，(使用者心裡面會有預期)，相比一會兒 200，一會兒 800 會有更好的體驗。
抓娃娃快速上線之後的關鍵問題，就是留存。除去業務模式，決定使用者留存的就是體驗質量。捨棄使用者體驗而求快，是本末倒置。迴歸質量、使用者體驗，才是長久的發展之路。
掃描下方二維碼，快速體驗微信H5抓娃娃demo