刘连响：为什么看好小程序音视频在教育行业的应用？

作者简介&＃xff1a;刘连响&＃xff0c;一起玩耍科技创始人。2013年起开始研究WebRTC&＃xff0c; 对音视频处理、 直播、实时音视频相关技术非常感兴趣&＃xff0c;具有多个实时音视频产品研发经验。目前关注实时音视频在在线教育&＃xff0c;医疗行业的应用。

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

下面是我与客户沟通中列出的一些问题&＃xff0c;也就是做一个线上教育实时互动的产品会面临的问题&＃xff1a;

1. 没有摄像头。比如一个PC机&＃xff0c;有些是没有摄像头。如果想要进行视频教育&＃xff0c;需要额外买一个摄像头。这就是用户端遇到的问题。

2. 背景比较混乱。一个孩子在固定的电脑前&＃xff0c;因为身后的背景比较混乱&＃xff0c;可能会不太愿意打开视频。固定电脑没有办法很好地移动&＃xff0c;这也是一个问题。

3. 终端设备多样。大家使用的是iPad、手机以及各种各样的电脑&＃xff0c;这是多样设备适配的问题。

4. 设备调试。设备的调试跟上一个问题相辅相成&＃xff0c;我们发现一些教育客户&＃xff0c;要花很多能力给它的C端用户做培训&＃xff0c;手机上没有声音&＃xff0c;声音变小了&＃xff0c;或者类似各种各样的问题&＃xff0c;他要花很多人力进行远程电话支持&＃xff0c;你要怎么操作。

5. 教务系统多种。这是面对SaaS客户遇到的问题&＃xff0c;没有办法接入到排课系统。

6. 网络延迟、视频卡顿。目前为止没有一个特别完美的解决方法&＃xff0c;只能说行业在不断进行优化&＃xff0c;提升体验。

以上是我列出的问题。有人提到音视频延迟这部分的问题&＃xff0c;音频很流畅&＃xff0c;但是视频不行&＃xff0c;这个技术问题可以归为视频卡顿中。

小程序音视频是怎么解决这个问题的呢&＃xff1f;先说一下方案介绍。

1. 零基础快速对接。这个比较好理解。小程序提供音视频组件JS API&＃xff0c;无须具备音视频基础知识就可以进行应用。

2. 卓越的音视频品质。腾讯已经做了十几年&＃xff0c;从QQ时代就有视频通话&＃xff0c;质量是端到端、400毫秒以下的延迟、800毫秒的网络抖动&＃xff0c;30%丢包。

3. 跨平台互通。小程序、安卓、IOS、Web端&＃xff0c;都可以用它的SDK去解决这个问题。

我们为什么会看好小程序音视频在教育行业的应用呢&＃xff1f;

首先是统一的平台”微信OS”&＃xff0c;主要有以下几点&＃xff1a;

第一&＃xff0c;统一的账户系统。一个APP需要用户去注册登录&＃xff0c;而微信有用户头像&＃xff0c;有完备的用户信息,  这是微信已经做好的。

第二&＃xff0c;标准的接口。小程序的接口很标准&＃xff0c;只要记住两个东西就可以&＃xff0c;一个是上&＃xff0c;一个是下。这两个有相关的接口&＃xff0c;只要记住有上有下就可以了。

第三&＃xff0c;极简的API。

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

在小程序里就不需要担心了&＃xff0c;腾讯基于多种机型的适配&＃xff0c;已经做得比较完善了。

第五&＃xff0c;降噪回升消除。为什么有回声&＃xff1f;背景为什么那么噪杂&＃xff1f;这是比较难解决的问题&＃xff0c;行业里真正做得好的只有很少一部分。

第六&＃xff0c;统一的操作路径。小程序都是一样的规范、一样的操作&＃xff0c;这些都是非常统一的。

以上是统一平台的部分&＃xff0c;下面介绍非常低廉的群传播、打开成本。这是我们的界面&＃xff0c;相当于创建一个课堂之后&＃xff0c;小程序为你提供了分享的接口&＃xff0c;可以做分享的动作。它的分享成本非常低廉。我们假设在原生的APP场景分享了一个链接之后&＃xff0c;别人需要下载一个APP进行注册&＃xff0c;再回到那个房间、教室&＃xff0c;小程序可以极大地简化这个流程。

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

那么我们是怎么做的呢&＃xff1f;我们刚开始就做了一些小的尝试&＃xff0c;内部已经有了产品&＃xff0c;下面主要为大家讲一下这个过程中的几点。

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

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

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

教育跟白板是少不了的&＃xff0c;包括视频白板。我们做了ppt、doc、pdf格式&＃xff0c;现在的版本做得相对简单&＃xff0c;相当于把PPT、文档和PDF转成一张张图片进行同步&＃xff0c;包括回放的录制。回放后&＃xff0c;需要鼠标的指示或三角形、画线操作&＃xff0c;在进行广播的时候可以同步在学生端。

文档格式转换&＃xff0c;因为会涉及到一些变形的问题&＃xff0c;我们摸索出来比较好的方式就是用OpenOffice headless mode。它没有UI&＃xff0c;可以拿来操作&＃xff0c;通过OpenOffice headless mode的接口进行转换。经过测试下发现它的还原度比较好&＃xff0c;不会有太多变形。腾讯云也有文档转换的服务&＃xff0c;因为我们已经做了这个部分&＃xff0c;也希望对这个系统更可控&＃xff0c;所以就自己做了一套转换的服务。

操作历史记录&＃xff0c;比如老师翻到下一页、老师画了一个三角形&＃xff0c;这些都需要记录下来。提供给你一个时间戳&＃xff0c;在回放的时候&＃xff0c;根据时间轴就可以。

多人授权白板&＃xff0c;相当于老师布置了一个任务让学生进行操作&＃xff0c;可以将白板授权给学生&＃xff0c;学生来操作白板&＃xff0c;老师也可以把权限收回。

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

小程序暂时没有办法支持PDF&＃xff0c;这不是小程序的问题&＃xff0c;而是操作系统的问题&＃xff0c;上传的时候只能选图片和视频。现在iOS已经支持了&＃xff0c;可以选择其他文件。而安卓还没有一个统一的结构&＃xff0c;小程序目前还不能支持&＃xff0c;只能上传一张张图片。

云端录制可以方便学生之后再进行学习&＃xff0c;腾讯在小程序音视频上提供了云端的录制&＃xff0c;其实就是标准的rtmp流。这部分是额外收费的&＃xff0c;如果需要录制的服务可以进行开通。

关于截图鉴黄&＃xff0c;教育场景有必要做这些吗&＃xff1f;还是非常有必要的。在中国这种大的环境下&＃xff0c;多注意都不过分&＃xff0c;以防万一&＃xff0c;这部分真的非常有必要。

关于云端混流&＃xff0c;比如说一个房间里面有五路音视频&＃xff0c;你需要把这些流混起来。还有一些其他更特殊的场景&＃xff0c;需要将PPT和老师的操作都混起来&＃xff0c;这是有一些麻烦的。目前腾讯云的方案提供了视频的混流&＃xff0c;可以将多个视频混流&＃xff0c;但还没有提到PPT和音视频混流的方案。这部分我们自己有实现一套方案&＃xff0c;你可以把音视频录制下来再进行合成。因为我们之前做过类似方案&＃xff0c;有一些相应的技术积累&＃xff0c;我们尽量在做服务的时候&＃xff0c;能可以自己把控的就尽量自己把控。

关于云存储&＃xff0c;在录制下来之后存放在腾讯云上面就可以了。

关于合成ffmpeg、moviepy&＃xff0c;如果遇到一些合成效果就可以来研究一下&＃xff0c;常见的视频效果都可以通过几行命令行来搞定。

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

我们应该怎么做呢&＃xff1f;

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

WebRTC这部分的能力可以使PC端和小程序进行互通&＃xff0c;打包成一个组件提供给大家。同时它也提供相应的服务端的代码&＃xff0c;有java版本。它提供的服务可以某种程度满足你的需求&＃xff0c;毕竟做得相对集成一些&＃xff0c;我们相当于在这个基础之上&＃xff0c;自己封装了一套&＃xff0c;因为还有很多定制化的需求在。比较好的是你可以快速搭建一个demo&＃xff0c;很快地跑起来看到是什么效果。如果真正做深的话&＃xff0c;还要基于自己的理解去封装一套东西。

我们说了一些好的方面&＃xff0c;接下来再说一下存在的问题&＃xff1a;

1. 视频原生组件&＃xff0c;不能做太多复杂的交互。视频的部分&＃xff0c;它的原生组件&＃xff0c;在视频上没有办法做复杂的交互。比如视频之上不能覆盖东西&＃xff0c;或者只能覆盖一些比较简单的东西&＃xff0c;基于视频的动画也不可以。

2. 品类限制。现在只有四个品类&＃xff0c;限制比较多。教育品类已经开放&＃xff0c;大家可以使用&＃xff0c;也希望可以开放更多的品类&＃xff0c;做出更多的场景。

3. 不支持pad。在相对大屏上是不可以的&＃xff0c;只能用PC端的产品来进行替代。

4. 不支持模拟器调试。正常开发一个场景&＃xff0c;在写完代码后&＃xff0c;用这个手机扫一下&＃xff0c;另外一个手机再扫一下&＃xff0c;调试过程相对痛苦&＃xff0c;希望可以支持中远程去调试。

5. 上传文件的限制。这是操作系统的限制&＃xff0c;不是小程序的限制。我们希望在操作系统进化的时候&＃xff0c;小程序也将相应的能力提升上去。

Q/A

Q&＃xff1a;我们发现市场有个特定的应用&＃xff0c;刚好跟视频结合比较完美&＃xff0c;数量大概有1亿以上。目前了解到有没有支持到这个量级&＃xff1f;这个应用已经到了1亿的浏览量上&＃xff0c;不知道您现在做的应用&＃xff0c;有没有支持大并发&＃xff1f;

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

Q&＃xff1a;您是公司的创始人&＃xff0c;我不是做互联网行业的&＃xff0c;对这部分不太了解。作为一个外行人想问两个关于产品的问题。第一&＃xff0c;我们基于腾讯云小程序所做的开发&＃xff0c;随着用户量越来越庞大&＃xff0c;对于腾讯云小程序的耦合性越来越紧。紧耦合性将带来一个问题&＃xff0c;对腾讯的依赖会越来越深。现在量没有上去时对我们不收费。量级上去就会收费很多。而且&＃xff0c;腾讯有自己的公开课或腾讯课堂&＃xff0c;我们做的产品对腾讯的市场有了冲击&＃xff0c;我们还依赖于它&＃xff0c;这种问题应该如何处理&＃xff1f;

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

Q&＃xff1a;现在大家基于小程序做了很多程序&＃xff0c;做了自己的APP。平台是没有技术壁垒的&＃xff0c;一个没有技术壁垒的产品&＃xff0c;是很容易被模仿的。不知道您的投资人是否咨询过关于技术这部分的问题&＃xff0c;如果没有技术壁垒&＃xff0c;如何在同类产品突出自己的产品亮点&＃xff0c;或者凭什么吸引我们&＃xff1f;比如教育行业的一些名师就是师资资源上的亮点&＃xff0c;但从程序本身&＃xff0c;有没有可以打造亮点的地方&＃xff1f;

A&＃xff1a;技术和产品在这个环节中的应用我想要说明一下&＃xff0c;虽然我是技术出身&＃xff0c;很重视技术&＃xff0c;但是不得不承认一点&＃xff0c;在某些行业里技术和产品只是第一步&＃xff0c;是重要的第一步。每个公司、每个业务一定是一个整体。你不能说&＃xff0c;我只有这一部分强。教育行业是很重服务的&＃xff0c;它有很多老师。在这种场景下&＃xff0c;它确实很重要&＃xff0c;同时还有上层的业务打造。考虑这个问题的时候&＃xff0c;还是要想清楚自己的优势&＃xff0c;自己能做什么&＃xff1f;有什么样的资源&＃xff1f;如果你有技术&＃xff0c;确实可以省去很多的时间和精力。

  有奖征稿&＃xff01;

云&＃43;社区是腾讯云官方技术社区&＃xff0c;我们致力于打造技术影响力&＃xff0c;帮助广大开发者提升技术实力&＃xff0c;社区汇聚了众多开发者群体&＃xff0c;提供优质的技术干货文章&＃xff0c;建立了互帮互助的知识问答&＃xff0c;丰富的技术课程&＃xff0c;定期举办线下沙龙活动等。

欢迎广大读者投稿&＃xff0c;比如技术干货&＃xff0c;对行业的看法&＃xff0c;热点事件解读&＃xff0c;职业规划分享&＃xff0c;开发应用实践&＃xff0c;技术解决方案等。

联系方式&＃xff1a;微信&＃xff08;andyhu&＃xff0c;请备注&＃xff1a;投稿&＃43;姓名&＃43;公司职位&＃xff09;

另外&＃xff0c;想要加入读者群的朋友也可以加 微信&＃xff08;andyhu&＃xff0c;备注入群&＃xff09;&＃xff0c;我们邀请了腾讯的技术大牛定期在群里分享&＃xff0c;不定时组织抽奖&＃xff0c;送书等活动&＃xff0c;更有各种技术资源干货。

推荐阅读&＃xff1a;

世界杯高清直播背后故事&＃xff1a;这些技术了解下

为什么说金融科技公司应该迁移到微服务架构&＃xff1f;

这7大工具引爆了第三次零售革命 - 智慧零售你应该了解的AI算法&＃xff0c;树搜索和演化算法

点击阅读原文&＃xff0c;获取本文PPT

好文&＃xff01;点赞支持