各大平台为了给自家的直播答题争抢流量,已经绞尽脑汁,不断在玩法上进行创新。这场竞争从 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直播问答解决方案

关注声网Agora,获得更多实时音视频技术干货

H5直播答题并不难,看完这篇你也会相关推荐

  1. mysql人像伴随模型_还不了解MySQL跨行事务模型吗?看完这篇你也就差不多了!...

    导读 说来和MySQL倒是有缘,毕业的第一份工作就被分配到了RDS团队,主要负责把MySQL弄到云上做成数据库服务.虽说整天和MySQL打交道,但说实话那段时间并没有很深入的理解MySQL内核,做的事 ...

  2. 【系统架构设计师】软考高级职称,一次通过,倾尽所有,看完这篇就够了,论软件架构设计的重要性、本篇论文“未通过考试”,供分析参考

    [系统架构设计师]软考高级职称,一次通过,倾尽所有,看完这篇就够了,学习方法和技巧这里全都有. 论软件架构设计的重要性.本篇论文未通过考试(不合格),供分析参考. 目录 摘要 正文 结尾 摘要 201 ...

  3. 怎么看电脑有没有蓝牙_怎么选购电脑音响?挑选到性价比高的电脑桌面音箱,看完这篇推荐指南就懂了!...

    现在越来越多人使用电脑了,所以配上一台电脑桌面音箱就很有必要了,工作闲暇的时候可以听听音乐,玩游戏的时候更能开启小音箱助力,这样才能玩的更嗨.那么问题来了,怎么才能选购一款适合自己的电脑音响呢?在挑选 ...

  4. 程序员要怎么高效学习Java,大学生or小白的你看完这篇的你离BAT又近了一大步

    这篇文章大体上会从以下几个部分展开: 认清自己. 学习目的. 时间管理. 学习方法. 学习的步骤. 获取知识的途径 影响学习的几个因素 自己的心态. 外物的影响. 其他想说的 大学生的学习 一些感悟 ...

  5. 此计算机核心参数,如何看懂电脑CPU的性能参数?看完这篇就会了

    原标题:如何看懂电脑CPU的性能参数?看完这篇就会了 有人说:"电脑好不好,全看CPU."没错,作为电子计算机的主要设备之一,同时也是电脑中的核心配件,CPU对电脑重要性不言而喻. ...

  6. 游戏计算机重要参数,电脑新手村丨如何看懂CPU的性能参数?看完这篇就会了

    原标题:电脑新手村丨如何看懂CPU的性能参数?看完这篇就会了 有人说:"电脑好不好,全看CPU."没错,作为电子计算机的主要设备之一,同时也是电脑中的核心配件,CPU对电脑重要性不 ...

  7. 计算机cpu的性能指标有,如何看懂CPU的性能参数?看完这篇就会了

    原标题:如何看懂CPU的性能参数?看完这篇就会了 有人说:"电脑好不好,全看CPU."没错,作为电子计算机的主要设备之一,同时也是电脑中的核心配件,CPU对电脑重要性不言而喻. 简 ...

  8. 计算机核心是什么如何判断性能指标,如何看懂电脑CPU的性能参数?看完这篇就会了...

    原标题:如何看懂电脑CPU的性能参数?看完这篇就会了 有人说:"电脑好不好,全看CPU."没错,作为电子计算机的主要设备之一,同时也是电脑中的核心配件,CPU对电脑重要性不言而喻. ...

  9. 我就不信看完这篇你还搞不懂信息熵

    我就不信看完这篇你还搞不懂信息熵 https://mp.weixin.qq.com/s/7NrB0UtmELXD3UNO3C6jGA 让我们说人话!好的数学概念都应该是通俗易懂的. 信息熵,信息熵,怎 ...

最新文章

  1. android横竖屏切换生命周期
  2. 可以获得索引值码_SEO优化可以为网站带来更高的业务销售额
  3. 三年级计算机击键要领教案,闽教版信息技术三上《下行键操作》教案
  4. Git初学札记(一)————Git简介与安装
  5. python的socket编程接收浏览器上传的文件_使用python套接字编程将文件发送到浏览器...
  6. NHibernate和 FluentNHibernate
  7. python 命令行:help(),'more'不是内部或外部命令,也不是可运行的程序或批处理文件
  8. 嵌入式Linux开发环境搭建
  9. android多媒体stagefright框架,Android多媒体框架下Stagefright的功能扩展.PDF
  10. R语言期末试题【二期补充】-重庆工商大学-统计学课程
  11. java根据ip地址获取详细地域信息
  12. java倒叙遍历list
  13. 源码分析 --- Spark如何确定Splits和分区数
  14. 京东与淘宝孰优孰劣?
  15. js 数据类型之字符串
  16. 新富人群的快速壮大,急需金融在线直播提供更高效和广泛的服务
  17. CodeForces - 1004B - Sonya and Exhibition(纯思维题)
  18. 个人日记-学习究竟是什么读后感4-2020/7/19
  19. IDEA运行报Command line is too long和unable to find valid certification path to requested target
  20. 修复青龙白屏登录界面以及脚本管理等界面白屏问题

热门文章

  1. 当租房成为一种生活方式
  2. Web前端开发常用英文
  3. shp文件导入postgresql数据库
  4. 美的华为鸿蒙,董明珠万没想到,格力终将被美的超越,华为鸿蒙“功不可没”...
  5. Fasterrcnn代码个人精细解读(先验框生成部分)
  6. 破圈、增长、被加码,集合店能创造美妆行业新风口?
  7. 金蝶云星空和小满OKKICRM单据接口对接
  8. 2020/09/10华为发布会
  9. 敏锐嗅出商机,她瞄准花卉市场的空白,将花店开出名气
  10. 原生 html 绘制表格