H5直播答题并不难，看完这篇你也会

各大平台为了给自家的直播答题争抢流量，已经绞尽脑汁，不断在玩法上进行创新。这场竞争从 iOS 平台蔓延至 Android 平台。目前大多数平台获取用户的方式还是通过分享邀请码，下载 App 的方式进行。不禁有前端开发者问道，难道直播答题就没有 H5 什么事么？

H5 实现直播答题真的不可能么？本文我们试着探讨 H5 实现直播答题的可能。

一、H5 的直播答题时什么？

H5 的直播答题主要发生在三个环境下：PC 端、移动浏览器和微信端，微信端包括微信浏览器和微信小程序。其实目前已经有两个直播平台在开发了直播答题小程序，这么做的好处是什么呢？

1.用户参与门槛低。
目前用户都是在扫码之后，需要先跳转到 App Store 下载应用。如果是像冲顶大会一样的独立 App 还好，如果是属于直播平台，则用户还需要再多一步才能进入游戏。做产品的人都知道，注册步骤越多，用户流失率越高。如果我们让用户扫码后，在 H5 端登录，可以让他率先参与游戏，成为你的用户。相对于其它竞争对手，可以更快让新用户参与进来。

2.传播更便利。
H5 的形态更易于传播，再加上几乎零门槛的参与方式，更容易吸引、抢夺新用户。如果开发的是小程序，通过在微信 9.3 亿的月活用户中分享，会产生裂变式的传播。

不过H5的直播答题也有弊端。H5 不具备通知的功能。在获得用户之后，我们还需要通过一些运营手法才能进一步留住他们，例如登录 App 可获得更多复活机会等，在这方面就见仁见智了。

二、开发H5直播答题的难点是什么？

H5 直播答题的难点主要有两个：

• 视频与答题同步
• 服务稳定

1.视频和视频的同步
在一个月前，Native App 上的视频与答题同步就曾是个很大的问题，在 H5 端也会是主要难点之一。因为音视频流与题目是分别通过两套系统发送至 H5 端，两者本身的端到端延时不同，到达后如何让题目在主持人发出命令时就显示出来，是一个问题。如果想做到同步，目前最通用的方法就是加时间戳，但 CDN 本身不支持，需要开发者进行二次深度开发。所以在一个月前，为了抢先上线的第一批直播答题应用，当时都出现了不同程度的答题与直播不同步问题。

在微信端则稍有不同。由于微信浏览器对视频、音频格式兼容问题严重。而且微信浏览器目前对 H.264兼容不够好。所以你还需要进行一次转码，很多原始码流上的标签或者 SEI 数据都要转译一次。这就增加了实现直播与答题同步的复杂度。

2.服务稳定
由于直播答题开播时在短时间内会产生高并发，你需要注意节点部署，在骨干网络拥塞时，进行规避。

我们下面来看看基本的解题思路。对 PC Web 和移动浏览器的观众来讲，我们可以直接通过 CDN 方案实现。需要特别关注的有两点：一是要关注边缘节点的部署以及弱网环境的传输，二就是直播与题目的同步。基本原理如下图所示。对于非微信浏览器的观众，需要在本地进行解码、渲染，然后进行播放。当然，还有另一种选择，就是通过 Agora Web SDK 直接实现，无需担心若干服务端传输、设备适配、回声、可用度等问题，而且支持海量高并发，完美解决直播与题目同步问题。

微信端有些不同，我们可以通过下图对比发现。在微信端中打开的的观众，直播流需要进行一次 MPEG1 转码，然后再通过中继 Server 将视频分发到微信端，通过 JSMpeg 解码播放。之所以使用 JSMpeg，是由于它体积小，且可以在大多数浏览器上顺畅运行。

不过需要注意的是，微信端用户得到的数据经过 CDN 后，还会通过转码 Server、中继 Server，对于开发者来讲不仅又是一笔额外的成本，而且经过转码 Server、中继 Server 后，还会放大端到端的延时。除了 CDN 要注意部署边缘节点，转码 Server 和中继 Server 也需要部署边缘几点，所以微信 H5 端直播与答题的同步问题会加重。

如果说开发 Native 是直播答题应对目前快速竞争的“捷径”，那么开发 H5 就是获取裂变式传播新途径。

如果你细心观察会发现，现在后入局的一些直播答题厂商与去年直播抓娃娃的厂商有较高重合度。在抓娃娃风口时，H5 是很多厂商的首选，但是当下直播答题风口却还未出现强需求。我们分析可能出于两个原因：一是，H5抓娃娃参与门槛虽然低，但是流失率高，所以在新风口鲜有人尝试；二是，微信小程序现在已经开放了音视频接口，开发者可能会首选小程序，但现在小程序的直播权限仍有准入限制，所以发布直播答题小程序的并不多。

原文刊载于声网Agora微信公众号（ID:shengwang-agora）