0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

全方位详解PC端和移动端的H5抓娃娃

BYXG_shengwang 2017-11-29 09:52 次阅读

短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构、从盈利到投资、从运营到推广,全方位解读都有了。唯独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有较好的支持。但是微信的内置浏览器不支持WebRTC。

上图是在线抓娃娃实时视频流的大致处理流程。在抓娃娃的业务场景中,采集是通过安放在娃娃机上的主板或PC机来实现,渲染/播放就是娃娃机操作端。微信H5抓娃娃与App抓娃娃的唯一区别就是娃娃机操作端。前者是微信内置浏览器,后者是Native App。

三. 微信H5抓娃娃怎么实现?

接下来,就以声网Agora的微信H5方案,来揭开微信H5抓娃娃的神秘面纱。

正如前文所说,微信H5要解决的就是最后一个环节——操作端播放视频。声网采用的策略是,使用JSMpeg在微信浏览器播放。

声网Agora在线抓娃娃技术架构图

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个方面:

延时

可用度

服务稳定

1. 延时

延时有操作端到娃娃机的指令延时,和娃娃机到操作端的视频延时。

指令延时:由于操作端到娃娃机端的指令,数据包极小,因此延时很低,一般是几十毫秒。

视频延时:视频延时如果在400ms以内,玩家可接受。

决定抓娃娃延时体验的关键在于视频延时。

视频清晰度和延时,是两个互相对立的。在带宽不变的情况下,视频越清晰,帧率、码率越高,延时越高。因此,在视频清晰度和延时之间要取得一个平衡点。

声网通过私有专利的编解码器,在保证清晰度的前提下,尽可能的降低码率。通过丢包重传、FEC、带宽检测、动态码率调整等弱网对抗策略,保证用户在网络质量不佳时,也能获得流畅的体验。

声网在全球部署近100个节点,构成SD-RTN™通信网。SD-RTN™系统能够实时根据各节点的连接和传输状况、负载状况以及到用户的距离和响应时间,自动分配最优、最通畅的传输路径,达到实时传输需要的质量保障级别。

2. 可用度

根据Callstats.io数据显示,在美国地区,基于WebRTC的实时通讯有89%可以被成功建立。而声网的SD-RTN™通过在每个地区的密集布点,已经将登录成功率提高至99%。

3.服务稳定

平均400ms延时和稳定 400 毫秒延时,用户的体验是不一样的。稳定的400ms延时,(用户心里面会有预期),相比一会儿 200,一会儿 800 会有更好的体验。

抓娃娃快速上线之后的关键问题,就是留存。除去业务模式,决定用户留存的就是体验质量。舍弃用户体验而求快,是本末倒置。回归质量、用户体验,才是长久的发展之路。

声网在线抓娃娃整体解决方案已被哇叽哇叽抓娃娃、开心抓娃娃、乐抓、秒抓、抓多多、咔啦酷抓娃娃、爱抓、美爆抓娃娃、娃娃鸡、抓抓等几乎所有主流厂商采用。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • RTC
    RTC
    +关注

    关注

    2

    文章

    477

    浏览量

    65391

原文标题:H5抓娃娃,没你想的那么难

文章出处:【微信号:shengwang-agora,微信公众号:声网Agora】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    164.【H5】05 H5 新增文本标签 #硬声创作季

    代码h5
    充八万
    发布于 :2023年07月19日 13:26:47

    163.【H5】04 H5 新增列表标签 #硬声创作季

    代码h5
    充八万
    发布于 :2023年07月19日 13:39:13

    162.【H5】03 H5 新增状态标签 #硬声创作季

    代码h5
    充八万
    发布于 :2023年07月19日 13:49:10

    169.【H5】10 H5 新增全局属性 #硬声创作季

    代码h5
    充八万
    发布于 :2023年07月19日 14:01:37

    全方位距离雷达动态检测系统的设计怎么设计

    具有全方位距离检测功能,具有全方位距离显示功能 能够智能找出距离最短的能力
    发表于 03-06 15:26

    H5页面与你共享

    ``如今超级H5在社交网络中脱颖而出,成为主流,各式精美的H5页面刷爆朋友圈。已经发展多年但没有崭露头角的H5,终于被大家找到应用有场景,它借助微信等移动社交网络,正在走进更多人的视野
    发表于 06-29 08:51

    我与H5页面的邂逅

    第一家融入互联网终端、移动互联和数字电视三维营销传播体系的专业H5营销制作(杂志、画册)推广系统。因为有了它,才有H5页面,现在的我看到
    发表于 06-29 10:08

    HTML5和HLS协议两种技术完美结合解决移动网页播放问题

    的网页播放。H5是解决网页播放问题,HLS解决的是移动播放问题。 两者的结合使得手机移动
    发表于 06-01 14:48

    【深圳】诚聘H5开发工程师

    实现产品功能;3.高质量完成移动H5页面的交互设计和功能开发;4.在理解前端开发流程的基础上,结合前端技术,建立或优化提升工作效率的工具;5.良好的沟通能力和团队协作精神,严谨的工作
    发表于 07-20 15:06

    【上海】诚聘前端H5开发工程师

    猎头职位:前端H5开发工程师(10-16K/月)工作职责:1.[backcolor=rgb(250,***,***)]妈妈帮APP的H5项目开发和维护;[backcolor=rgb(250
    发表于 07-24 11:49

    接包 搭建游戏平台 手游/H5/页游/小游戏平台 手游SDK开发 开源程序源码 包安装部署

    1.手游SDK、手游联运系统 手机游戏平台搭建/手游游戏盒子APP开发2.H5游戏联运系统,H5游戏平台,WAP/PC/公众号三合一,即点即玩,无需下载没有系统限制3.聚合SDK、手
    发表于 01-18 10:41

    移动车牌识别与PC车牌识别有什么区别解析

    移动车牌识别与PC车牌识别有什么区别解析
    发表于 04-30 11:20

    芯齐齐PC版还是移动版好用一点

    芯齐齐我已经用了一段时间了,BOM表的处理我在电脑每天需要处理大量的,PC的我一直在用,移动的话使用比较少,因为手机上处理表格不太方便
    发表于 05-31 15:18

    介绍一种全方位测量和检验的软件

    PC-DMIS.V3.5 全方位测量和检验的软件简体中文完整版.没有功能限制好用 WaSP.v9.0.0.139(风力气象预报和风力发电机和风电场产能预报的PC平台应用工具) h:\3
    发表于 07-12 08:48

    在 HarmonyOS 上实现 ArkTS 与 H5 的交互

    与 ohosCallNative 对象。并通过 runJavaScript 在 H5 注册 ohosCallNative。 通过 Web 组件的 javaScriptProxy 属性将 ArkTS 侧的 call
    发表于 11-13 17:08