简单5步使用即构SDK,实现在线抓娃娃H5产品

为了保障即构线上抓娃娃H5方案能够普遍的适配所有浏览器,即构团队在视频网络完成视频转码,把视频转成MPEG1。然后,在用户侧H5和视频网络之间加入接入服务器,把基于UDP的私有协议转成WebSocket。

即构在线抓娃娃的系统架构图

图 1 即构线上抓娃娃H5方案架构图

首先我们先了解一下即构在线抓娃娃H5方案的的实现过程,如图1 所示,左上角是用户端H5应用, 右下角是娃娃机。娃娃机端有两个摄像头,一个传输正面影像,另一个传输侧面,开发者可以自定义正面和侧面。即构的SDK和业务层应用跑在娃娃机端的硬件板子上。用户端H5应用跑在浏览器上,包含即构的SDK还有业务层。

直播抓娃娃

娃娃机侧的安卓板子通过摄像头采集, 推送两路视频流到即构实时视频传输网络。用户端H5应用从即构实时视频传输网络拉流播放,可以获得400ms左右的低延迟。为了实现在H5上的普适性,在即构实时视频传输网络和用户端H5应用之间加入接入服务器,把传输协议从基于UDP的私有协议转成WebSocket。在H5上通过JSMpeg播放器来播放。

信令操控天车

用户侧H5应用通过即构的实时信令传输网络来发送信令操控娃娃机端的天车(抓娃娃),延迟大约在400ms左右。信令控制和视频传输会进行同步,保障天车操控的时候,眼手配合的灵敏度。构的实时信令传输网络通过HTTPS来传输实时信令,为了适配用户侧H5应用,中间加入接入服务器,把HTTPS协议转成WebSocket。

适配所有浏览器

为了保障即构线上抓娃娃H5方案能够普遍的适配所有浏览器,即构团队在视频网络完成视频转码,把视频转成MPEG1。然后,在用户侧H5和视频网络之间加入接入服务器,把基于UDP的私有协议转成WebSocket。

如何快速集成即构的JS SDK

在集成SDK之前,我们先看一张API时序图,了解一下大概的调用流程。

图 2 娃娃机用户端API调用时序图

首先,引入我们的SDK。

第一步,调用config接口,配置各个参数,如appid,idName等等。

第二步,配置好后,调用login接口进行登录操作,我们可以在登录成功回调函数中获取流信息,从中得到streamID,而后直接调用startPlayStream接口开始拉流。

第三步,娃娃机一般会同时推两路流,一个正面,一个侧面,观众进房间会同时播放两路流,但是我们会先隐藏一个,在点击切换视角的时候,同时切换隐藏的view。既然有拉流,就有停止拉流的接口,开发者可以调用stopPlayStream接口停止拉流。

第四步,用户看到视频流后,可以调用sendCustomCommand接口发送指令与娃娃机进行交互。

第五步,调用onRecvCustomCommand事件接口,接收服务端针对“sendCustomCommand接口发送的消息”返回来的对应消息。

第六步,调用logout接口退出,并且销毁canvas对象,释放性能

首先,使用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)用户可以看到视频后,要进行游戏,这时候需要发送自定义消息/或者说指令,与娃娃机进行交互的指令,比如预约上机、确认上机、移动娃娃机的天车、执行抓取动作等等。

5)最后就是登出接口logout,该接口无需传入参数

H5怎么跑起来?去哪里下载源码?

DEMO体验:wwj.zego.im

demo源码地址 :https://github.com/zegodev/ZegoWaWaJi

把目录中的web/WaWaJiWeb/dist起一个服务器,将dist目录设置为根目录即可体验。

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

在线抓娃娃一站式方案:

https://www.zego.im/html/document/#Application_Scenes/WaWaJiClient/Overview

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-12-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

来自后方世界的隐匿威胁:后门与持久代理(一)

干了十几年安全工作,发现一些同行只是把简单的工具扫描和渗透测试当成了全部工作,拿到需要的数据及测试结果既为完成工作。可各位兄弟,咱扪心自问,这样的安全测试能叫真...

28150
来自专栏FreeBuf

MaiInt:基于某应用的公司雇员信息收集测试工具

本文将介绍一款由埃森哲安全实验室Vincent Yiu开发的,针对中国某职场社交应用的开源信息自动化收集测试工具-MaiInt(Github下载)。MaiInt...

11220
来自专栏安恒信息

使用NB Exploit Kit攻击的APT样本分析

1、起因 近期,安恒工程师在某网络中部署的APT威胁分析设备中发现一条高危告警,该告警包含了较多可疑行为,包含在沙箱运行环境中进行增加自启动、创建网络套接字连接...

36540
来自专栏FreeBuf

第一只WiFi蠕虫的诞生:完整解析博通WiFi芯片Broadpwn漏洞(含EXP/POC)

过去的几个月里,Android 和 iOS 数十亿台设备中都曾出现过可怕的 WiFi 远程代码执行漏洞 BroadPwn。谷歌 7 月初发布了修复补丁,而苹果则...

53170
来自专栏Vamei实验室

用树莓派玩转蓝牙

作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载。

60550
来自专栏web前端教室

WEB前端架构(三)

先跟关注我的各位说声抱歉,快一周没更新了。 实在是因为太忙了,最近周末在忙装修的事,周内又要加班。 因为是新公司嘛,本来就忙,三天前又被临时抓去写一个手机微信上...

218100
来自专栏SAP梦心的SAP分享

会开发和懂开发的区别

       注:本人身为SAP咨询顾问,故以下以SAP开发语言ABAP作为例子,其他语言雷同。         在SAP领域,做开发的人很多,会ABAP的也不...

24860
来自专栏施炯的IoT开发专栏

图文解说三星focus i917芒果升级

    去年就开始关注WP7,但基本都是在模拟器上。最近看芒果即将面世,Hold不住,淘宝上入手了focus的冲新机。特意要的7004英文原版,那是为了方便地通...

19350
来自专栏嵌入式程序猿

Simulink , 你值得用起来

MATLAB工具链在现代产品的开发中有着越来越多的应用,从需求管理到模型建立,到仿真测试,到代码生成部署都可以完成,大大减少了开发的时间,加速了产品的交付率和上...

36020
来自专栏Vamei实验室

用树莓派玩转蓝牙

蓝牙是一个使用广泛的无线通信协议,这两年又随着物联网概念进一步推广。我将介绍蓝牙协议,特别是低功耗蓝牙,并用树莓派来实践。树莓派3中内置了蓝牙模块。树莓派通过U...

78580

扫码关注云+社区

领取腾讯云代金券