简单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源码地址 :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媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙|Android应用Dex分包之旅

Android应用Dex分包之旅 活动时间:2016年1月12日 QQ群视频交流 活动介绍:TMQ在线沙龙第十六期分享 本次分享的主题是Android应用Dex...

2089
来自专栏静晴轩

开箱即用的 Vue Webpack 脚手架模版

1385
来自专栏IMWeb前端团队

聊聊移动端跨平台开发的各种技术

介绍 最近出现的 React Native 再次让跨平台移动端开发这个话题火起来了,曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却大多...

2065
来自专栏张戈的专栏

借助腾讯云CDN开启全站https及问题解决分享

“眼尖”的朋友,已经看到张戈博客已全面启用 https 了,当然这几天站点 502 也是常用的事情。不过到我写这篇文章为止,应该算是安定了下来。 自从百度推荐全...

3745
来自专栏Android 开发者

针对现代 Android 更新游戏 API 等级

我们已在去年宣布:自 2018 年 8 月起, Google Play 要求所有新上线的应用和游戏都必须针对新的 Android API 等级进行开发 —— ...

903
来自专栏静晴轩

Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣;从早期的王者Brow...

3004
来自专栏葡萄城控件技术团队

API测试工具SoapUI & Postman对比分析

最近公司要引入API测试工具,经过调查和了解,最终决定在SoapUI 和 Postman两种工具之间做一个选择,两种工具在业界都很有名,相信很多人两种工具也都曾...

492
来自专栏BestSDK

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

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

3826
来自专栏Android 开发者

最终预览版 Beta 4 现已发布,Android P 正式版即将到来!

Android P 即将面世,新平台目前正处于最后调试阶段。今天,我们向各位开发者发布 Android P 的 Beta 4 版本。

1001
来自专栏圣杰的专栏

ABP入门系列(19)——使用领域事件

源码路径:Github-LearningMpaAbp 1.引言 最近刚学习了下DDD中领域事件的理论知识,总的来说领域事件主要有两个作用,一是解耦,二是使用领...

2309

扫码关注云+社区