刘连响：小程序实时音视频在互动场景下的应用

本文来自腾讯云技术沙龙，本次沙龙主题为在线教育个性化教学技术实践

做者简介：刘连响，一块儿玩耍科技创始人。2013年起开始研究WebRTC， 对音视频处理、 直播、实时音视频相关技术很是感兴趣，具备多个实时音视频产品研发经验。目前关注实时音视频在在线教育，医疗行业的应用。

今天为你们带来的分享是：小程序实时音视频在互动教育场景下的应用。我我的一直在作基础方面的研究，接触音视频也比较早，2013年的时候就开始作包括直播在内的相关产品，有多个音视频研究的相关经验。目前咱们关注教育、医疗方向的音视频，以及有关这方面的应用。

下面是我与客户沟通中列出的一些问题，也就是作一个线上教育实时互动的产品会面临的问题：

1. 没有摄像头。好比一个PC机，有些是没有摄像头。若是想要进行视频教育，须要额外买一个摄像头。这就是用户端遇到的问题。
2. 背景比较混乱。一个孩子在固定的电脑前，由于身后的背景比较混乱，可能会不太愿意打开视频。固定电脑没有办法很好地移动，这也是一个问题。
3. 终端设备多样。你们使用的是iPad、手机以及各类各样的电脑，这是多样设备适配的问题。
4. 设备调试。设备的调试跟上一个问题相辅相成，咱们发现一些教育客户，要花不少能力给它的C端用户作培训，手机上没有声音，声音变小了，或者相似各类各样的问题，他要花不少人力进行远程电话支持，你要怎么操做。
5. 教务系统多种。这是面对SaaS客户遇到的问题，没有办法接入到排课系统。
6. 网络延迟、视频卡顿。目前为止没有一个特别完美的解决方法，只能说行业在不断进行优化，提高体验。

以上是我列出的问题。有人提到音视频延迟这部分的问题，音频很流畅，可是视频不行，这个技术问题能够归为视频卡顿中。小程序音视频是怎么解决这个问题的呢？先说一下方案介绍。

1. 零基础快速对接。这个比较好理解。小程序提供音视频组件JS API，无须具有音视频基础知识就能够进行应用。
2. 卓越的音视频品质。腾讯已经作了十几年，从QQ时代就有视频通话，质量是端到端、400毫秒如下的延迟、800毫秒的网络抖动，30%丢包。
3. 跨平台互通。小程序、安卓、IOS、Web端，均可以用它的SDK去解决这个问题。

咱们为何会看好小程序音视频在教育行业的应用呢？首先是统一的平台”微信OS”，主要有如下几点：

第一，统一的帐户系统。一个APP须要用户去注册登陆，而微信有用户头像，有完备的用户信息, 这是微信已经作好的。

第二，标准的接口。小程序的接口很标准，只要记住两个东西就能够，一个是上，一个是下。这两个有相关的接口，只要记住有上有下就能够了。

第三，极简的API。

第四，软硬件遍解码底层适配。若是你作音视频相关的解决方案，尤为是安卓端，iOS还好一些。安卓端由于每一个平台硬件的底层不太同样，须要进行适配，好比高通的、三星的、英特尔的芯片，可能每家每一个型号的芯片、表现都不同，这时就须要花很长的时间作适配。咱们作这个东西就很痛苦，没有办法经过简单的代码来解决。

在小程序里就不须要担忧了，腾讯基于多种机型的适配，已经作得比较完善了。

第五，降噪回升消除。为何有回声？背景为何那么噪杂？这是比较难解决的问题，行业里真正作得好的只有不多一部分。

第六，统一的操做路径。小程序都是同样的规范、同样的操做，这些都是很是统一的。

以上是统一平台的部分，下面介绍很是低廉的群传播、打开成本。这是咱们的界面，至关于建立一个课堂以后，小程序为你提供了分享的接口，能够作分享的动做。它的分享成本很是低廉。咱们假设在原生的APP场景分享了一个连接以后，别人须要下载一个APP进行注册，再回到那个房间、教室，小程序能够极大地简化这个流程。

小程序生态完备。在教育环境，咱们有四个环节，教、练、测、管。你们看到录播产品、直播产品，常常在朋友圈转发的课程，这是教的环节。练的环节，咱们看到的一些相关产品，好比打卡、题库、做业等，各位多多少少也接触过。测，就是线上考试、比赛、PK的部分。管，就是基于微信群，或者一些督学和家长沟通的工具。在微信小程序环节里面，每个环节里面都有相应的产品。你再设计解决方案的时候，彻底不须要作一个教育产品，还须要作其余的吗？不须要了，你能够在这个生态里只作你擅长的教学内容，其余部分能够和整个生态其余的工具串联起来，你能够有相对统一的用户惟一标识，这是一个很是好的生态，能够帮助你的业务更好地发展。以上是我总结出来的三个点，统一的平台、低廉的传播成本和完备的生态。

那么咱们是怎么作的呢？咱们刚开始就作了一些小的尝试，内部已经有了产品，下面主要为你们讲一下这个过程当中的几点。

首先是基础框架，腾讯官网推出了一个官方的小程序框架，咱们选了vuejS和wepy这两个技术。若是你会这两个，一天就能够进行小程序开发了。另一个是socketio。市面上有些人作了一些第三方的实现，可是咱们发现它的bug不少，由于它毕竟不是为小程序而生的，只能移到小程序中使用。typescript的前端和后端均可以用一样的语言来开发，大部分的数据都直接存在redis里面，像一些实时的场景，好比房间管理、操做历史等一系列相关的东西均可以用Reids。咱们一开始的时候也有被坑到的点，音视频的部分须要单独开放权限，它开放了直播、教育、医疗和金融这四个分类。若是不开放权限，在调用相关接口的时候就会报错，这里仍是须要设置一下。

音视频互动主要有四个部分，pusher、player、房间管理和1V6的实时互动。这是为微信小程序提供的基础组件，只须要一个简单的上和下，其余的场景在这上面不断组合就能够了。房间管理的环境支持1V6，支持上百人、上千人进行观看，至关于这个房间能够支持1000人观看的切入流。房间管理主要是管理学生、pusher和player。在他加入之后，其余人经过房间管理传消息，在收到pusher消息之后再进行相应的接收，它的逻辑是相对简单的。1V6至关于能够左右进行滑动，一个房间能够容许1个老师，6个学员。

下面介绍一下产品设计的时候须要特别注意的部分，由于音视频是一个原生组件，它的层级比其余都要高，这时不能作复杂的交互。简单的滑动还能够作，其余的复杂交互不太好作，好比动画、放大、缩小，很容易形成闪退。最好布局和UI相对简单固定的，咱们一开始的交互设计比较复杂，最终改了两个版本，比较简单一些。但如今还有这样的问题存在，须要用更长的时间进行优化。音频比视频更简单一些，由于它的资源消耗比视频小不少，音频的房间几十我的都没有问题，主要是看你们的需求。两三我的进行互动，其余人观看，是这样的一个场景。

教育跟白板是少不了的，包括视频白板。咱们作了ppt、doc、pdf格式，如今的版本作得相对简单，至关于把PPT、文档和PDF转成一张张图片进行同步，包括回放的录制。回放后，须要鼠标的指示或三角形、画线操做，在进行广播的时候能够同步在学生端。

文档格式转换，由于会涉及到一些变形的问题，咱们摸索出来比较好的方式就是用OpenOffice headless mode。它没有UI，能够拿来操做，经过OpenOffice headless mode的接口进行转换。通过测试下发现它的还原度比较好，不会有太多变形。腾讯云也有文档转换的服务，由于咱们已经作了这个部分，也但愿对这个系统更可控，因此就本身作了一套转换的服务。

操做历史记录，好比老师翻到下一页、老师画了一个三角形，这些都须要记录下来。提供给你一个时间戳，在回放的时候，根据时间轴就能够。

多人受权白板，至关于老师布置了一个任务让学生进行操做，能够将白板受权给学生，学生来操做白板，老师也能够把权限收回。

动画、音频、视频的支持，目前来看没有很好的方案。例如一些幼教的产品，3岁到6岁这种，它的可见很是活泼、很是丰富，各类动画、视频比较多。单纯的图片转换不太能知足这种需求，这时就须要一些机构进行动画相应的转化。目前，小程序的底层技术还没法很好地支撑这些东西，咱们能够在PC端进行这部分。

小程序暂时没有办法支持PDF，这不是小程序的问题，而是操做系统的问题，上传的时候只能选图片和视频。如今iOS已经支持了，能够选择其余文件。而安卓尚未一个统一的结构，小程序目前还不能支持，只能上传一张张图片。

云端录制能够方便学生以后再进行学习，腾讯在小程序音视频上提供了云端的录制，其实就是标准的rtmp流。这部分是额外收费的，若是须要录制的服务能够进行开通。

关于截图鉴黄，教育场景有必要作这些吗？仍是很是有必要的。在中国这种大的环境下，多注意都不过度，以防万一，这部分真的很是有必要。

关于云端混流，好比说一个房间里面有五路音视频，你须要把这些流混起来。还有一些其余更特殊的场景，须要将PPT和老师的操做都混起来，这是有一些麻烦的。目前腾讯云的方案提供了视频的混流，能够将多个视频混流，但尚未提到PPT和音视频混流的方案。这部分咱们本身有实现一套方案，你能够把音视频录制下来再进行合成。由于咱们以前作过相似方案，有一些相应的技术积累，咱们尽可能在作服务的时候，能能够本身把控的就尽可能本身把控。

关于云存储，在录制下来以后存放在腾讯云上面就能够了。

关于合成ffmpeg、moviepy，若是遇到一些合成效果就能够来研究一下，常见的视频效果均可以经过几行命令行来搞定。

关于浏览器合流、screen recorder，你们想象一个场景，在整个教育过程当中须要回放合流的时候，假如一个房间五我的，在服务端合流很难完美地浮现学生当时看到的场景，由于回放和学生当时看到的不是彻底之一致的。并且像PPT这种操做，没有办法完美合进去。这时候咱们有一些技巧，浏览器的合流能够把几个视频合成一个流。甚至把白板、视频、音频都合成一个视频录制下来上传到服务端。它能够将当前窗口完美录制下来，比合流的效果更好一些。这个方案能够考虑，可是有限的浏览器支持，做为一个对服务端混流的补充。

咱们应该怎么作呢？WebRTC你们都了解，能够很快地作一个demo。小程序为了节省资源，用的不是RTC的技术，不少市面上的产品已经有那么多平台支持了，这要怎么办呢？腾讯确实也提供了这样的方案，像WebRTC。小程序的音视频就是rtmp，它在传输时基于UDP的协议，只须要将这两个东西打通就能够。腾讯在服务端已经在作将这两种动态打通，咱们正常去作音频转码就能够了。腾讯云团队将相关的操做都已经封装成一个比较好的组件，好比RTC多人动画的组件。

WebRTC这部分的能力可使PC端和小程序进行互通，打包成一个组件提供给你们。同时它也提供相应的服务端的代码，有java版本。它提供的服务能够某种程度知足你的需求，毕竟作得相对集成一些，咱们至关于在这个基础之上，本身封装了一套，由于还有不少定制化的需求在。比较好的是你能够快速搭建一个demo，很快地跑起来看到是什么效果。若是真正作深的话，还要基于本身的理解去封装一套东西。

咱们说了一些好的方面，接下来再说一下存在的问题：

1. 视频原生组件，不能作太多复杂的交互。视频的部分，它的原生组件，在视频上没有办法作复杂的交互。好比视频之上不能覆盖东西，或者只能覆盖一些比较简单的东西，基于视频的动画也不能够。
2. 品类限制。如今只有四个品类，限制比较多。教育品类已经开放，你们可使用，也但愿能够开放更多的品类，作出更多的场景。
3. 不支持pad。在相对大屏上是不能够的，只能用PC端的产品来进行替代。
4. 不支持模拟器调试。正常开发一个场景，在写完代码后，用这个手机扫一下，另一个手机再扫一下，调试过程相对痛苦，但愿能够支持中远程去调试。
5. 上传文件的限制。这是操做系统的限制，不是小程序的限制。咱们但愿在操做系统进化的时候，小程序也将相应的能力提高上去。

Q/A

Q：咱们发现市场有个特定的应用，恰好跟视频结合比较完美，数量大概有1亿以上。目前了解到有没有支持到这个量级？这个应用已经到了1亿的浏览量上，不知道您如今作的应用，有没有支持大并发？

A：视频能支持这种量级很难，好比斗鱼这种高并发级别宣称有几百万，其实也到不了，可能几十万已经差很少了。主要的压力在于视频，好比如今有的机构一天的课堂数有几万节，这已经很是多了。像你说的1亿多是应用人数，这不必定就表明了高并发。

Q：您是公司的创始人，我不是作互联网行业的，对这部分不太了解。做为一个外行人想问两个关于产品的问题。第一，咱们基于腾讯云小程序所作的开发，随着用户量愈来愈庞大，对于腾讯云小程序的耦合性愈来愈紧。紧耦合性将带来一个问题，对腾讯的依赖会愈来愈深。如今量没有上去时对咱们不收费。量级上去就会收费不少。并且，腾讯有本身的公开课或腾讯课堂，咱们作的产品对腾讯的市场有了冲击，咱们还依赖于它，这种问题应该如何处理？

A：我说一下本身的见解，每一个阶段你都有应该考虑的问题。首先更多的仍是把产品打磨好，第二个阶段其实你已经有足够的能力摆脱这方面的限制。一个很现实的状况就是，若是你到达必定量级后，不少公司到了C轮、D轮级别，才开始大量去铺本身的基础IT设施。我以为若是到了两个量级，再考虑这个问题比较OK。我跟腾讯云交流比较多，他们选择一种合做模式，这点从过去几年腾讯一些具体例子能够看到，我认为腾讯仍是相对开放。你的问题可能会做为忧虑的一部分，但更多仍是把本身的产品作好，让更多的人使用。

Q：如今你们基于小程序作了不少程序，作了本身的APP。平台是没有技术壁垒的，一个没有技术壁垒的产品，是很容易被模仿的。不知道您的投资人是否咨询过关于技术这部分的问题，若是没有技术壁垒，如何在同类产品突出本身的产品亮点，或者凭什么吸引咱们？好比教育行业的一些名师就是师资资源上的亮点，但从程序自己，有没有能够打造亮点的地方？

A：技术和产品在这个环节中的应用我想要说明一下，虽然我是技术出身，很重视技术，可是不得不认可一点，在某些行业里技术和产品只是第一步，是重要的第一步。每一个公司、每一个业务必定是一个总体。你不能说，我只有这一部分强。教育行业是很重服务的，它有不少老师。在这种场景下，它确实很重要，同时还有上层的业务打造。考虑这个问题的时候，仍是要想清楚本身的优点，本身能作什么？有什么样的资源？若是你有技术，确实能够省去不少的时间和精力。

获取更多详细资料，请戳如下连接：
小程序实时音视频互动教育-刘连响.pdf

问答
小程序能够实现哪些音视频解决方案？
相关阅读
周锦民：腾讯在线教育视频互动直播间技术实践
郭卓惺：互动课堂的搭建实例及相关领域应用 
杨婷：腾讯云在线教育解决方案分享

此文已由做者受权腾讯云+社区发布，原文连接：https://cloud.tencent.com/dev...

欢迎你们前往腾讯云+社区或关注云加社区微信公众号（QcloudCommunity），第一时间获取更多海量技术实践干货哦~