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

本文由腾讯互动课堂技术负责人缪少豪在 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