如何使用即构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/

H5方案专题页面：https://www.zego.im/html/solution/w

awaji-h5.html

https://www.

如何使用即构JS SDK快速上线在线抓娃娃H5产品？相关推荐

即构抓娃娃H5方案全球首家支持HTTPS，抓娃娃先从安全抓起！
2017年11月6日,即构科技正式宣布推出全球首个在线抓娃娃一站式解决方案. 2017年11月23日,在原生App抓娃娃方案的基础上,即构全球首个推出在线抓娃娃H5方案. 如今,即构团队又给大家带来了 ...
微信开放JS SDK，再次给浏览器们上了一课
2015 年刚刚开始,微信 JS SDK 发布,惊爆众人,HTML5 产业好事连连. JS SDK 这个概念,其实微博和淘宝的开放平台很早前就有,包括手机 QQ 前段时间也推出了几个增强 API,但都 ...
微信开放JS SDK，这场web巨变意味着什么？
原文链接:原文链接作者王安如有侵权请及时联系,立即删除. 摘要:微信近期推出JS SDK,开放了包括分享.图像.地理位置.微店.微信支付等11个接口.新能力给公众号运营者.开发者更多的玩法.而这样 ...
基于Topic消息路由的M2M设备间通信Node JS SDK 示例
概述 M2M(即Machine-to-Machine)是一种端对端通信技术.本章节以Node JS SDK为例,使用基于Topic消息路由的M2M设备间通信,主要介绍如何基于物联网平台构建一个M2M设 ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...
基于电商直播SDK快速实现一个淘宝直播APP【内附源码】
现在各大互联网APP都标配电商直播带货了,没有直播带货开发经验都感觉自己跟不上技术的进步.今天快速基于Java实现一个安卓端电商直播APP,深入理解整个电商直播开发流程.我们最终实现效果如下: 按照惯 ...
开发微信小程序，就是这么简单！可自动生成微信小程序源代码，配套JS SDK、接口和后台
开发微信小程序,就是这么简单!自己动手,丰衣足食! 开发微信小程序有多简单?  你只需要掌握前端开发,就可以轻松开发自己的微信小程序,实现自己的业务功能.借助果创云,无须域名.无须服务器.无须数据库, ...
1. vue.js的快速入门使用
1. vue.js的快速入门使用1.1 vue.js库的下载1.2 vue.js库的基本使用1.3 vue.js的M-V-VM思想1.4 显示数据2. 常用指令2.1 操作属性2.2 事件绑定例如:完 ...

如何使用即构JS SDK快速上线在线抓娃娃H5产品？

如何使用即构JS SDK快速上线在线抓娃娃H5产品？相关推荐

最新文章

热门文章