基于视频流传输：在线教育白板技术

在线教育不同于线下教育， 内容需要经过电子白板展现给用户，如何做出优秀的在线教育白板成为研究的重点。本文来自学而思网校客户端架构负责人赵文杰在LiveVideoStackCon 2018大会上的分享，并由LiveVideoStack整理而成。

文 / 赵文杰

整理 / LiveVideoStack

大家好，我是来自学而思的赵文杰，现就职于学而思网校并担任架构师的工作，接下来我将为大家分享互动白板在在线教育上的应用。

今天的话题主要围绕在线教育，也就是如何借助技术的力量将知识更生动地传递给学生，其中一种方式是电子白板。可以说电子白板在在线教育领域起着举足轻重的作用，学而思网校今年的学员数量已达到百万级别，在电子白板相关领域积累了一定的实践经验。

本次我将围绕相关实践经验和以下几个方面进行分享。

1、在线教育的形式

在线教育主要分为大班课与小班课两种形式，大班课的核心成员由一位主讲老师与若干位辅导老师组成。“线上主讲+线下辅导”也是近两年在线教育较为成功的模式之一，甚至在一些方面超越了公办教学的传统课堂模式。我们可以把一堂大课分为多个小班并为其各配一位辅导老师而共用一位主讲老师，包括学而思、腾讯课堂、学霸君在内的诸多在线教育平台主流采用此种模式，也验证了其盈利模式的可行性；小班课是指一位老师给一位或几位学生辅导学习，有的一个老师对六个学生就已经很多了。对家长而言，小班课的价值在于个性化定制教育与专业服务，如大家较为常见的51Talk、Vipkid等基本都是采取此模式。这里需要强调的是大班课与小班课之间费用的差距很大，大班课一般为几千而小班课几乎都要上万。

与传统游戏直播等领域的思路不同，由于对互动性与课堂表现形式的要求更高，在线教育中内容表现的重要性更大。在线教育白板主要有以下两种展现形式：视频流传输或素材传输。2015年之前，受限于宽带性能，国内的大多数在线教育平台都基于素材传输，其优势在于可稳定缓存所需资源。如需要PPT那么服务器首先将PPT转成图片形式，学生进入课堂后以下载离线文件的形式获取PPT，国内如沪江英语、中公教育等都是采用上述素材传输模式；2015年之后，学而思网校开辟了基于视频流传输的白板展现形式，首先将丰富的视觉内容融融入白板，在通过图像合成等技术完成视觉优化后再进行传输。其优势在于强大的扩展能力与可被保证的视频内容准确性和严肃性。

1.1 视频流传输和素材传输的优缺点

基于视频流与基于素材各自优劣明显，主要在码率大小、提前预缓存、传输内容丰富度、扩展性四个方面。基于视频流的传输，码率与分辨率一定是核心参数，分辨率与清晰度的提升意味着码率的增大；而基于素材的传输其码率基本不变，除了需要传送声音与老师头像用以保持课堂教学之外，其他数据流所占码率的比例很低。基于视频流的实时传输不需要提前预缓存而基于素材的传输需要学生提前进入网页用以加载上课素材，这就导致在传输内容丰富度上基于视频流的传输要远优于基于素材的传输。例如老师想为学生呈现一段动态素材，对基于素材的传输而言需要进行素材上传等步骤，无疑是困难而繁琐的；而对基于视频流的传输而言只需借助离屏渲染等技术从显卡中抓取相应素材片段并与原始视频画面混合后直接推流即可完成。而在扩展性上基于视频流的传输由于只需抓取目标素材与整合画面，无论素材是二维还是三维都可通过内容整合将混合后的画面直接呈现给观众，并且其背后的运算压力均被推流端所承担，有效降低了客户端的运算复杂性，从而保证了整个平台的稳定性与良好的用户体验。

1）基于视频流传输

上图展示的是基于视频流的传输流程。首先，电子白板通过图像抓取技术获得目标图像并将其传输至解码器，其中的图像抓取主要通过抓取桌面或抓取窗口，但这两种方式都不算效率最优的，最佳方案是直接从显卡缓冲区中抓取相应数据，此方案被广泛运用于借助OBS录屏的应用场景如游戏直播等，因为OBS整合了HOOK显卡的API，可轻易获得目标画面，更为轻量与高效；获取目标图像并进行画面合成后的视频流数据会进入编码器，如输入RTMP流就可编码为H.264；编码完成后数据传输至流媒体源站，接下来的流程就是经典的流媒体分发网络，通过节点传输至每一位用户，在此就不再赘述。

2）基于素材传输

而基于素材的传输更为复杂，其中必要的硬件包括摄像头与声卡，其中摄像头传输老师头像而声卡传输老师声音，为了节省带宽占用，其中的头像一般分辨率为480p。摄像头与声卡采集到的数据会进入编码器进行处理并传输至流媒体源站，数据流所占带宽很小；但由于电子白板在此流程中不属于视频流的一部分，故而我们需要为用户单独传输与摄像头和声卡采集到的画面内容同步的电子白板数据，单独传输的关键就是信令服务器。而这一部分传输流程对学而思网校等平台而言可借助RTMP中的Matadata实现，主要用于传输上课板书与笔记。我们需要将老师书写的内容原封不动呈现给学生才能保持线上课堂的生动性，老师无法书写或者学生无法观看等情况都是不可接受的。我们平台学生的续订率可达到95%，可以说是业界最佳。其关键就是我们利用音视频技术为学生呈现最佳上课体验，只有去除所有体验障碍，真正传授货真价实的知识使他们体会到教育的魅力才能切实留住学生。如果老师需要为学生呈现较为复杂的板书如复杂几何图形或在坐标轴上绘制一个不规则图形，这时就牵扯到摄像头采集、笔记还原、图像叠加、编解码与传输、平台兼容、笔记还原、课程回放等诸多项目，原先给予素材的传输模式无法满足这些复杂用的需求，于是我们采用了基于视频流传输的处理模式。

1.2 电子白板所占地位

接下来我们需要讨论电子白板所占的地位，基于视频流的传输解决方案当中最重要的是丰富的教学内容，紧接着是通过渲染将其以视频流的形式呈现给服务端。而基于素材传输的电子白板首先需要进行的是教学内容与头像渲染的处理，通过信令服务器保证多个项目在整个过程中可以按需工作。

1.3 优秀电子白板特性

优秀的电子白板需要具备以下好处：体验很流畅、教具很丰富、画笔很自然、功能好扩展，即便是希沃白板这样业界用户体验较为出色的开放电子白板产品依旧在写字上存在一定延迟。电子教具主要是教学期间需要使用到的虚拟器具，传统课堂的教室当中会配备粉笔、尺规等；而电子白板除了能直接绘制几何图形之外、还可进行图形拼接、旋转、变形等传统课堂无法实现的复杂变化。第三点是画笔自然。观察上图图中的截屏我们可以看到，虽然老师使用自然笔记绘图需要花费更多时间，但这种板书可令课程更佳生动有趣从而极大增加了学生上课的积极性，但是我们必须保证画笔的精准与自然，较好还原书写笔记的同时保证笔记的清晰与整齐，为学生提供良好的课堂体验。最后一项是功能扩展，通过功能的扩展赋予课堂更多提升教学生动性与表现力的内容。

2、在线教育的白板技术分享

电子白板实现诸多功能，离不开渲染的功劳。渲染具体是指将数据以符合用户观感的形式展现，主要是借助GPU或CPU的运算。从事游戏直播的同学一定不会对OBS感到陌生，OBS中负责渲染的部分是GPU而非CPU，这是为什么呢？

2.1 GPU渲染

GPU处理与图像有关的任务更为得心应手，因为GPU可快速渲染图像，对3D的支持也较为完美，其强大的图像变换能力可为高级图像处理功能提供技术支撑，使用GPU进行这些工作的原因之一是GPU善于处理浮点数相关的任务，图像缩放的时间与资源消耗远低于CPU。如使用i7 CPU进行图像变换，对4K视频或者图像进行处理使其能够在很小一片区域进行渲染，其中涉及到的处理为图像缩放，渲染并缩放视频至要求的区域尺寸的同时保证原帧率等参数的不变，这对CPU而言是无法胜任的，可能会出现CPU满载甚至负载导致程序卡顿甚至崩溃的情况。

2.2 CPU渲染

相对于GPU，同样的任务对CPU而言无疑是吃力的。CPU处理图像渲染非常困难，并且基本不支持3D变换，图像变换性能也一般，几乎所有场景下我们都需要依赖GPU的强大算力来实现图像处理。

2.3 GPU渲染技术平台

GPU的图像计算主要使用了OpenGL、D3D、D2D、Metal等技术。其中，OpenGL中的Desktop（桌面）版主要用于桌面级显卡，而OpenGL ES主要用于Android平台，与Desktop版的OpenGL相比OpenGL ES主要减少的是API，受限于手机性能，较为复杂的OpenGL用于移动平台时在功能上会有所阉割。而Angle主要用于Google的Chrome浏览器，其优势在于跨平台兼容，即使电脑缺少OpenGL的相关组件依旧可以借助Chrome浏览器中的Angle实现GPU的图像计算。为了保证性能，平台会首先判断终端是否支持桌面版的OpenGL，如果不支持则会转成OpenGL ES，若仍旧不支持则会切换到Angel，即D3D API的映射，但其语法本身依旧基于OpenGL。在开发中比较常见的Web OpenGL原理与其类似，如果计算机无法兼容Web OpenGL，平台就会切换至软件渲染也就是通过GPU处理图像渲染，但此时就会出现CPU占用率高、网页卡顿等问题。这里需要提醒的是Windows平台对OpenGL的支持一向不佳而对D3D与D2D支持良好，如Windows平台的DirectX就是基于D3D编写。而在Windows Vista后Windows平台支持了较为轻便的2D绘图硬件加速D2D，相对于D3D的复杂，D2D的API更精简，这使得计算机处理如绘画直线等二维图像渲染任务时更为高效。对于Apple的macOS平台而言，Mac逐渐放弃对OpenGL的支持转而使用Apple平台通用的图像渲染平台Metal。最近业界的趋势是使用Vulkan替换OpenGL，Vulkan由开发OpenGL的团队提出，相对于OpenGL可实现30%的效率提升。但由于OpenGL的生态已经建立多年，新生态发展成熟还需一段很长的时间，现在我们谈到的图像渲染技术都是基于上述平台。

2.4 电子白板与基础图形

如果从学科角度讨论电子白板与基础图形，数学课程需要的基础图形除了直线、矩形、圆形等简单图形之外还有如双曲线、抛物线、三角双锥等诸多复杂的代数与几何图形然后呢；物理课程需要通过各种图像模拟物理实验与物理原理，例如基于H5技术仿真物理实验，我们可通过推流将精彩的模拟实验效果呈现给学生；化学课程则需要表现公式与化学方程式，而人文地理学科则需要实物展示与现实增强技术辅助老师为学生表现自然历史文化的深厚与内涵。例如当语文老师讲到“孤舟蓑笠翁，独钓寒江雪”，学生看到的在线课程画面也许是老师坐在船上讲课，而实际上老师是在挂有绿幕的影棚中讲解，借助扣像技术实现这种生动形象的课堂效果。当然，这些课程通用的基础图形为画笔、直线与圆形。

3、在线教育白板互动案例

3.1 电子白板与画笔

无论是传统的黑板辅助讲课还是现在老师常用的演示文稿辅助讲课，都离不开画笔与书写对教学的帮助，老师使用粉笔在黑板上书写或使用鼠标在演示文稿上绘图，无论是表现力还是教学效果都一般。我们期待提供硬件级的技术支持帮助老师实现更生动易用的板书书写体验。例如大家常用的Wacom手写板，基于电磁感应技术可实现触笔压力感应与笔迹模拟。当笔尖在数位板上书写时系统首先进行硬件采点，而后进行平滑处理，最后通过基于之前提到的图像处理技术进行的高速渲染得到绘图或板书效果，其中的硬件渲染速度直接关系到笔迹的延迟。

硬件采点主要使用的技术之一是微软的InkCanvas技术，大家知道微软在Surface平板上使用的Ink墨迹功能就是基于此技术。如果基于WPF编程进行开发那么此组件是直接集成在WPF上可直接使用。另一种技术被称为WINTAB技术，即使与InkCanvas一样属于闭源平台，但WINTAB提供了一套开放的数位板API并授权开发者打开相关函数，使其更受开发者欢迎。

平滑处理主要通过多点加权平均、贝塞尔曲线等方式实现。多点加权平均主要是指取多个点进行加权计算从而获取压力的准确值，自然的画笔表现一定是粗细过度平滑的；而贝塞尔曲线是计算机上一种平滑处理技术，属于较为通用的处理算法。业界友商里网易公开课的画笔表现较为自然，而下图展示的是我们老师在线上课堂书写的板书效果，可以看到和传统教学在黑板上书写的效果相差无几，是硬件采点、平滑处理、高速渲染等技术优化的结果。

3.2 学而思网校的电子白板技术

在直播端我们可以看到一个与上图相似的黑板，其实是一个OpenGL显示区， 通过创建整个窗口句柄实现利用OpenGL API进行绘图操作。对于不规则多边形的绘制我们借助带阿尔法通道的混合实现黑板元素与画笔的叠加。

大家可以看到上图展示的画面当中笔迹有粗有细，就是经过上述技术优化实现的自然书写结果。

除此之外，我们也实现了无缝播放器技术，此播放器实际上基于FFmpeg。我们将其融入电子白板并实现在视频上进行绘图写字标注等操作，其意义在于白板可与多种资源组合为课堂带来更加生动的教学体验。

除此之外，在抓取桌面的同时我们也可在上面进行写字等操作。

外部摄像头的作用主要是在多视角切换与共存，例如在老师做实验时一个摄像头可拍摄板书内容，另一个摄像头则用于拍摄实验现象，更加方便快捷帮助老师展示他想展示的内容。

页面植入技术可大大提升讲师讲课与学生上课的体验。使用传统的技术无法实现这种笔迹与交互功能自然切换的效果，如需放弃写字进行交互操作只需切换鼠标模式即可。需要强调的是，上述所有功能基于离屏渲染技术，此技术集成在了Google浏览器的内核当中。我们能看到的画面来自直接抓取的Buffer；而像OpenGL与D3D等经过双缓冲或三缓冲，数据从活动缓冲区抓取并作为纹理的一部分渲染至OpenGL上，需要交互操作时再传输交互的指令，此系统可支持标注、书写、绘图等教学常用操作。

除了抓取二维元素，我们也可抓取外部三维元素。例如当我们想要抓取Google上的某个三维元素，只需找到此窗口的句柄即可找到OpenGL窗体；接下来我们通过获取OpenGL创建的上下文并使用OpenGL API读取此三维元素，这样就可高效便捷地将外部元素无缝集成至白板画面当中并通过视频流呈现给学生。

4、未来展望

展望未来，我们希望通过3D、AR等技术实现更为生动逼真的课堂表现效果，如通过3D与AR技术“复活”侏罗纪时期的恐龙，老师可以通过交互操作让恐龙奔跑或张嘴并随时切换视角从而帮助学生更全面了解这一史前生物；或者让学生“置身”于一座植物园中，老师通过交互操作控制阳光天气花开叶落，我相信这种生动逼真的表现力将颠覆我们现有的传统教学课堂。关于学科工具，我们希望将题库与仿真实验集成在课堂当中。而动画生成主要是指对于一些动画模版的构建，例如对之前提到的基于H5的物理实验，如果只需在现存模版上修改几个参数就能实现多种物理实验的展示，那么可减少大量的在制作动画上的人力物力消耗。在程序渲染动画模版期间修改几个数据参数就可生成另一条动画，可大幅减少开发与维护成本。

5、总结

电子白板的关键在于教具、渲染、合成、传输，这也是在上文中反复提到的。

最后为大家推荐一些技术。首先是QT的QML，其次是WPF。WPF集成了很多优秀的功能如OBS直播等；WPF的整体渲染框架基于D3D，优势无法代替。GLS是一种基于OpenGL的可编程语言，可实现对GPU的编程，而HLSL是一种基于D3D的GPU编程技术。除此之外，OpenGL高级编程与WPF编程宝典是我推荐大家阅读的。同样我想推荐业界当中较为成功的开放电子白板产品：希沃白板。

精品文章推荐

技术干货：