如何使用即構JS SDK快速上線在線抓娃娃H5產品？

此前，我們正式發布了在線抓娃娃H5一站式解決方案《即構科技在線抓娃娃H5方案正式上線，400ms超低延遲，完美兼容微信！》，得到了不少創業者的青睞，本文我們則將從開發者的角度著手，給大家從實操角度分享具體該如何使用即構的JS SDK快速搭建在線抓娃娃H5產品。

即構在線抓娃娃的系統架構圖

圖 1 即構線上抓娃娃H5方案架構圖

首先我們先了解一下即構在線抓娃娃H5方案的的實現過程，如圖1 所示，左上角是用戶端H5應用， 右下角是娃娃機。娃娃機端有兩個攝像頭（可以擴展到3個，增加一個俯視的攝像頭），一個傳輸正面影像，另一個傳輸側面，開發者可以自定義正面和側面。即構的SDK和業務層應用跑在娃娃機端的硬體板子上。用戶端H5應用跑在瀏覽器上（比如說微信瀏覽器），包含即構的SDK還有業務層。

直播抓娃娃

娃娃機側的安卓板子通過攝像頭採集， 推送兩路視頻流到即構實時視頻傳輸網路。用戶端H5應用從即構實時視頻傳輸網路拉流播放，可以獲得400ms左右的低延遲。為了實現在H5上的普適性，在即構實時視頻傳輸網路和用戶端H5應用之間加入接入伺服器，把傳輸協議從基於UDP的私有協議轉成WebSocket。在H5上通過JSMpeg播放器來播放。

信令操控天車

用戶側H5應用通過即構的實時信令傳輸網路來發送信令操控娃娃機端的天車（抓娃娃），延遲大約在400ms左右。信令控制和視頻傳輸會進行同步，保障天車操控的時候，眼手配合的靈敏度。構的實時信令傳輸網路通過HTTPS來傳輸實時信令，為了適配用戶側H5應用，中間加入接入伺服器，把HTTPS協議轉成WebSocket。

適配所有瀏覽器

為了保障即構線上抓娃娃H5方案能夠普遍的適配所有瀏覽器，即構團隊在視頻網路完成視頻轉碼，把視頻轉成MPEG1。然後，在用戶側H5和視頻網路之間加入接入伺服器，把基於UDP的私有協議轉成WebSocket。接著，在H5上採用JSMpeg播放器來渲染。最後，加上即構的方案在瀏覽器側做了深度的視頻，保障了即構H5抓娃娃方案能否適配所有的瀏覽器，包括微信瀏覽器。

即構的方案對所有瀏覽器都採用以上的方法來適配，這樣可以保障全面的普適性。如此全面的普適性要歸功於即構完全自研的技術方案。如果是通過WebRTC開源代碼改過來的方案，只能適配少於30%的瀏覽器（Chrome、Opera和Firefox等），而且不被微信支持。這種基於WebRTC的方案如果要適配微信，就必須專門為微信瀏覽器重新實現，通過JSMpeg和WebSocket的方式來嫁接到微信瀏覽器上，普適性和穩定性方面都是沒有得到保障的。

如何快速集成即構的JS SDK

在集成SDK之前，我們先看一張API時序圖，了解一下大概的調用流程。

圖 2 娃娃機用戶端API調用時序圖

首先，引入我們的SDK。

第一步，調用config介面，配置各個參數，如appid，idName等等。

第二步，配置好後，調用login介面進行登錄操作，我們可以在登錄成功回調函數中獲取流信息，從中得到streamID，而後直接調用startPlayStream介面開始拉流。

第三步，娃娃機一般會同時推兩路流，一個正面，一個側面，觀眾進房間會同時播放兩路流，但是我們會先隱藏一個，在點擊切換視角的時候，同時切換隱藏的view。既然有拉流，就有停止拉流的介面，開發者可以調用stopPlayStream介面停止拉流。

第四步，用戶看到視頻流後，可以調用sendCustomCommand介面發送指令與娃娃機進行交互。

第五步，調用onRecvCustomCommand事件介面，接收服務端針對「sendCustomCommand介面發送的消息」返回來的對應消息。

第六步，調用logout介面退出，並且銷毀canvas對象，釋放性能

說一千道一萬，不如我們實際操作來的印象深刻，下面我將用demo源碼來講一下SDK的集成細節。

首先，使用script標籤引入我們的SDK，然後在demo的js文件中，進行調用。我們的SDK暴露出來的是ZegoClient構造函數，開發者可以使用這個構造函數實例化出一個對象。

有了實例化對象，接下來我們按照demo的運行流程，一步步剖析。

1）調用SDK提供的config介面配置基本參數，有appid（每個應用的唯一標識）、idName9（用戶自定義id），nickName （用戶自定義昵稱），還有server參數（娃娃機伺服器連接地址）

2）配置好後，進行登錄操作，登錄前需要獲取token令牌，然後調用login介面。

login介面有五個參數：

roomid表示房間id；

第二個參數表示用戶角色 1是主播，2是觀眾；

第三個即登錄令牌；

第四和第五個分別是成功回調函數與失敗回調函數；

在成功回調函數中，會返回該roomID對應的房間流列表，開發者可以存儲起來等待後續調用。

3）登錄成功後，我們獲取到流列表，就可以調用startPlayingStream介面，播放視頻流了。該介面需要傳入兩個參數分別是流id和開發者傳入的原生canvas元素，不是jq對象的canvas，這裡要注意

4）用戶可以看到視頻後，要進行遊戲，這時候需要發送自定義消息/或者說指令，與娃娃機進行交互的指令，比如預約上機、確認上機、移動娃娃機的天車、執行抓取動作等等。

調用sendCustomCommand介面發送消息，該介面有四個參數：

第一個是anchor_id，表示該消息要發送給的目標對象，該參數類型為數組，該anchor_id可以在login成功回調函數返回的流信息列表中獲取；

第二個是自定義消息內容；

第三個和第四個分別為成功回調與失敗回調函數。

5）最後就是登出介面logout，該介面無需傳入參數

H5怎麼跑起來？去哪裡下載源碼？

demo源碼地址 ：

https://github.com/zegodev/ZegoWaWaJi

把目錄中的web/WaWaJiWeb/dist起一個伺服器，將dist目錄設置為根目錄即可體驗。

JS SDK 地址：

https://storage.zego.im/downloads/jZego-SDK.zip

demo體驗：http://wwj.zego.im/

http://wwj.zego.im/ (二維碼自動識別)

H5方案專題頁面：https://www.zego.im/html/solution/wawaji-h5.html

https://www.zego.im/html/solution/wawaji-h5.html (二維碼自動識別)