微信H5视频抓娃娃，没你想的那么难，看完你也会

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

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

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

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

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

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延时和稳定400ms延时，用户的体验是不同的。稳定的400ms延时，(用户内心面会有预期)，相比一下子 200，一下子 800 会有更好的体验。

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

对接文档： document.agora.io/cn/1.14/tut…

如对咱们感兴趣，或遇到开发问题，欢迎访问声网 Agora问答版块与声网工程师交流。