本文由腾讯互动课堂技术负责人缪少豪在LiveVideoStack线上分享中的内容整理而成，详细介绍了腾讯云在线教育互动课堂方案的设计与技术挑战，重点解析了互动白板的实现技术难点与突破。

文 / 缪少豪

整理 / LiveVideoStack

直播回放：

http://scrmtech.gensee.com/webcast/site/vod/play-c04b32af4cdd4f2183d9b7089274e8b9

全文阅读大约需要15分钟，本文主体内容框架：

1.互动课堂解决方案及整体架构

2.互动课堂方案优势分析

3.互动白板产品介绍

4.互动白板技术优势解析

1.互动课堂解决方案及整体架构

腾讯云互动课堂提供了一种低延时、全平台、交互式的在线视频授课服务，满足多种教育场景的需求，帮助企业快速构建在线教育互动课堂平台，是集IM即时通信、实时音视频以及实时互动于一体的互动课堂解决方案。

腾讯云互动课堂架构

如图中间的6个模块是整体方案的各个服务块：

互动白板后台：主要提供白板历史数据，例如教师课前准备数据等。
内容分发网络：主要保证课件的可靠分发，采用腾讯云的CDN服务。
课件转码后台：主要对课件进行多种格式的转码，是互动白板产品必不可少的部分。
对象存储服务：对课件、视频等资源进行落地存储，利用腾讯云COS服务。
实时音视频后台：保证师生音视频交流的重要信令通道。
即时通信后台：首先作为互动白板的默认信令通道；其次是师生、同学之间发送消息通道。

教师和学生进入课堂后，在互动白板后台获取课前准备的课件资源，这些不同格式的课件资源来自内容分发网络。课堂期间的音视频、师生之间聊天消息的交互通过实时音视频后台和即时通信后台，进行内容和音视频流的分发，即完成音视频和互动白板的交互过程。

另外，线上课堂非常重要的一个模块就是录制后台，即腾讯云互动白板提供的一整套比较完整的音视频和白板同步录制的方案。

2.互动课堂方案优势分析

互动课堂整体方案使用腾讯的实时音视频服务，其具有18年的实时音视频经验积累，方案在超过5000个终端完成适配，并且全球端到端的平均延时可达到300ms以内，抗丢包率40%，抗网络抖动在1s左右。即时通信采用腾讯基于QQ底层IM能力的基础服务，提供全球的高并发、高连通、高可靠、强安全的网络连接通道。

以腾讯IM作为信令通道的互动白板可实现小于100毫秒的超低延时，支持多种格式文档的转换，提供白板音视频同步录制方案，另外还支持多维度监控能力，帮助线上进行分析和解决问题。

在此方案的支持下，可以满足多种教育场景的需求，并且可以灵活应对各种教育细分行业应用场景，上图中简要列举了几类应用场景，其中包括超大并发的大班课，例如万人级的公开课；以及注重师生互动性的小班课等。

3. 互动白板产品介绍

腾讯云互动白板支持多人在线互动白板服务，依赖于腾讯自研制的即时通信IM技术，小于100ms的超低延时，全平台覆盖支持，功能齐全，包括实时涂鸦、文档共享、白板音视频录制功能等。

4. 互动白板技术优势解析

互动课堂解决方案推出之后，收到了很多客户反馈，主要反馈的痛点以及解决方案有以下三点。

4.1 白板音视频高度同步方案

实时音视频效果虽好，但价格昂贵：对于万人级的大型培训是一笔很大的开销，若使用旁路直播，成本低，但是延时非常大，导致白板操作和直播存在明显不同步现象，观感出现明显延时，学员端无法实现白板和音视频同步。

互动白板与实时音视频实际是两个没有关联且独立渲染的产品，能够做到同步取决于各自产品的延时，若实时音视频的延时为300ms，而白板是100ms延时，200ms的延时差在学员端是人眼无法感知的，但若使用旁路直播，则存在秒级延时，可以明显察觉不同步问题。

如图中上下两部分进行对比，白板信令自带时间戳，通过IM即时通信发送到学生端，当学员端接收信令之后计算IM延时。将白板的时间戳注入到音视频，通过音视频SEI技术，将音视频流发送到学员端后解析时间戳，进行时间差计算，白板根据时延进行绘制，以达到同步效果。此解决方案与教师端和学员端的本地时间是无关的，两端的本地时间是否一致对结果不影响。

4.2 同步互动的视频播放方案

当教师希望分享某个视频给学生观看，就会因为不同产品的要求限制导致出现以下问题：

已参与连线视频课堂，不可再进行视频上行，导致教师端的上行带宽被占用，出现视频课堂卡顿问题，或者带宽无法满足问题；
在1v1的场景下，学员可以要求教师复讲某个知识点，这就要求学生对视频课堂进行回滚操作，以定位某一知识点的时间点；
全屏共享不可泄露敏感信息，例如app出现私聊界面，是不希望出现在屏幕共享范围的。

互动白板方案可以完美解决以上问题，方案中教师端可通过自存储位置拉取视频进行播放，期间教师进行的白板操作通过信令同步到学员端，以实现交互性。

另外互动白板方案中异常检测和重试机制缺一不可。例如APP推到后台，视频会自动暂停，则音频的暂停会中断视频的播放。通过异常检测发现异常，则回滚重放。当获取视频时长失败时，则利用重试机制进行二次重试，以保证正常播放状态

4.3 白板音视频同步录制方案

课堂录制是在线教育不可或缺的部分，做白板音视频同步录制的初衷是基于白板和音视频分开录制，这就会出现“不同步现象”以及“后期的混流成本很高”两大痛点。

白板的录制后台本质是一个客户端，当客户将业务后台发起录制时设置的录制参数和后期混流布局参数发送给录制后台，后台就会订阅教师端的音视频和互动白板，录制后台收到教师端的音视频和互动白板后，进行离屏渲染，将白板信令的操作数据转化为白板视频流，与音视频流混合，通过客户提供的布局文件达到混流目的，生成客户需要的mp4文件。整体方案的核心在于离屏渲染技术。

4.4 基于Canvas的高流畅性涂鸦方案

全局渲染即将旧数据与新数据进行合并，再进行一次性渲染，达到最终效果。
局部渲染即基于旧数据渲染的基础上进行添加的过程。

信令是通过IM发送，涂鸦点会出现乱序问题，如果只做局部渲染则无法处理乱序涂鸦问题，通过加入全局渲染即可解决乱序问题，以保证显示正常。

因此，白板采用全局渲染和局部渲染的混合方案，绘制帧率可以持续保持30FPS以上，从而实现更加流畅的体验。

4.5 灵活对接第三方信令

即便某些客户已经接入第三方音视频和IM即时通信，同样可以使用腾讯云的互动白板产品。这源于互动白板不依赖实时音视频和即时通信服务，可以支持接入第三方信令通道。腾讯SDK会将所有互动白板所记录的数据发送给第三方的信令通道，以做到不依赖即时通信的效果。

4.6 其他技术优势

目前互动白板支持两种PPT的转码技术，即静态转码和动态转码，动态转码可以完整保留PPT动画效果，以提升教学体验。

此外，互动白板还应用了腾讯自研的笔迹笔锋优化算法，可以高度还原手写体效果，如图中笔迹演变的效果。

最后为大家提供白板DEMO的体验地址（白板Github）：

https://github.com/tencentyun/tiw

如何搭建低延时、交互式的在线教育平台？（内附视频回放）相关推荐

如何搭建一个在线教育平台
搭建在线教育平台,是当下教培机构实现业务增长的重要途径,很多准备开展在线业务的教培机构或者老师,由于缺乏经验不知道如何搭建自己的网校平台. 其实,不管您是做考研类.职业技能培训类.学历考试类.医考类. ...
在线教育平台搭建的几种方案
如何进行在线教育平台搭建?哪种搭建方式才是最有效的?要弄懂这些问题,就必须先搞清楚什么叫在线教育平台. 一.什么是在线教育平台? 在线教育平台,简单来说,就是专门为教培机构或讲师搭建的一个网络教学平台 ...
武海滨：沪江如何搭建优秀的在线教育平台
3月31日,ZEGO Meetup 视频直播+的技术实践之道第三期在上海成功举办,现场吸引了满堂的音视频开发人员到场聆听.会上,如预期一样,么么直播前端团队负责人黄铭新.即构科技资深技术专家和架构师冼 ...
在线教育平台、网校搭建、远程教育平台搭建技术选型（268教育）
一直接触网校几年的时间.从技术开发到网校的运营感觉有自己的一套理解. 在线教育平台搭建技术是一方面,对如何运营,如何搭建适合很多公司他们自己的网校这个更重要.不需要多牛逼,需要最适合. 小广告:268 ...
在线教育平台搭建具体步骤
到目前为止,国内的疫情基本算是被控制住了,大部分地区中小学也在正式开学.可能有些人会想:开学了,就不用搞在线教育了.但实际上,疫情的结束只是在线教育发展的新起点.且目前很多线下教培机构还是顺势而上,努 ...
如何搭建在线教育平台
在互联网时代,教育模式日新月异.今年在受到疫情的冲击下,学校和教培机构开展线下教学困难,一些教育机构不得不从线下转型到线上,在线教育迎来了激烈的争夺战.由此可见对于学校和教培机构来说,搭建一个好的在线 ...
手把手教你搭建在线教育平台
从2019年起,K12在线教育,就是个热词. 今年疫情影响了大部分企业,但却是在线教育平台发展的契机. 不少高校改为线上授课,许多高校计算机学院的上机实验也借助了线上教育平台提供的环境. 比如,在线编 ...
构建在线教育弹性高可用视频处理架构实战
简介: 对于负责建设视频处理系统的技术团队而言,这样的业务场景就留给了他们一系列的挑战. 前言近些年,在线教育行业飞速发展,为整个社会的知识传播提供了前所未有的便利性.通过多种形式的在线教育平台,学 ...
即构推出微信引流方案，助力在线教育平台大幅降低获客成本
随着互联网红利结束,线上流量贵.获客成本高.用户数量增长难成为在线教育的行业困境.为了增加品牌曝光度,在线教育平台习惯依赖高价明星代言.巨额综艺冠名.投放品牌广告等方式来进行引流. 当拉新成本越来越高 ...

如何搭建低延时、交互式的在线教育平台？（内附视频回放）