互动白板的技术基础和发展

作者 | 伍双

策划 | 包研、Alex

编辑 | Alex

互动白板

年终盘点

#005#

最近互动白板「Miro」获得4亿美元融资，估值达到175亿美元。这则消息也让很多人开始关注互动白板这个曾经非常小众的领域。

 我们为什么需要互动白板？

会议或者教学中，我们常见的需求是语音视频通信外加展示资料。所以一般情况下实时音视频再加上一个录屏功能就足以覆盖主流的需求。

但是我们观察主流的会议软件或者教学软件都不难发现一个规律，它们都配备了强大的互动白板系统。那什么情况我们才会需要互动白板来辅助教学或者会议呢，或者说对比一般的屏幕分享，互动白板有哪些难以取代的优势？

带宽占用低

录屏实际上就是多一路视频源，而白板同步本质是信令同步。录屏对上行带宽的需求大多数情况下需要几百 kb/s，在高清和动态的情况下甚至需要 mb/s 带宽。白板的信令同步基本就是几十 kb/s。没有同步信息的情况下只需要维持长连接的心跳，那么带宽要求会更少。

带宽占用低可以留出更多的带宽让给参会人员语音和视频通话，整体的稳定性会进一步提高。

观感清晰

录屏展示资料的清晰度取决于分辨率，而分辨率又取决于网络质量（也可能是费用，因为高清录屏码率高、费用也高）。尤其是遇到资料文字比较小且网络不稳定的时候，录屏的观看体验就会变得非常糟糕。

而互动白板展示资料一般会先做一个转码预处理，保证资料的清晰度和准确度。所以在会议中使用白板来展示资料效果往往会更加稳定和清晰。

互动性强

互动白板是基于信令来实现的实时互动，技术栈上更接近网络游戏，所以天然具备良好的互动体验。师生可以同时在白板中进行涂鸦、编辑等互动操作，幼教类客户往往会基于互动白板的信令系统来做具有游戏趣味的 H5 课件。而屏幕共享无法实现师生在线白板互动。

移动端友好

因为少了录屏编码的功耗，那么软件的耗电就会下降，设备掉电更慢，所以使用体验更好。

隐私性好

另外使用白板展示资料，无需授权录屏，隐私保护更好。

互动白板基于哪些技术构建

通过上述分析，我们详细了解了互动白板的优势。那么下面我们来讲讲做一个实用的互动白板，要基于哪些关键的技术。

互动系统的整体结构

• 后端系统：如上图所示，数据库 + 服务器 + 长连接三者组成了完整的后端服务，不难看出我们需要一个实时数据库来完成互动白板里面最关键的状态实时同步。
• 前端系统：在状态可以实时同步并且保证一致之后，我们还需要根据状态渲染出一致的视图。那么 Web 就是跨端最常用的选择。

下面让我们分别来看下实时数据库服务和跨平台同步。

实时数据库服务

什么样的实时数据库才是一个符合互动白板系统要求的服务呢？简单来说，数据层要可靠、高效；实时网络层要稳定、低延时；应用层要符合白板场景的特定需求。下面我们来详细说一下各个部分。

数据层难点：如何持久化现场和快速恢复现场？

1. 如何持久化现场？

想要中途加入或者退出后加入还可以继续同步和互动，那么系统必须有记录现场的能力。我们将这个能力称为“现场数据持久化”。我们通过示意图一起来了解一下。

当多个成员在实时互动时，我们会启动一个服务来订阅互动服务器内存中的状态，并且把状态写入到数据库中。由于数据库保存着现场，所以有人中途加入后可以向数据库读取现场的状态，然后连上互动服务器快速参与其中。

2. 如何快速恢复现场？

仅仅做好记录现场和恢复现场并不能让互动体验得以完善。随着互动时间以及互动内容的增加，恢复现场需要读取的内容以及恢复的动作都会变得复杂。

我们学习了音视频编码的思想，在信令体系内也使用了“全量帧”和“增量帧”的概念，可以参考下图理解。

系统每隔 300 个 action 生成一个 “全量帧”，那么当退出房间再进入的时候，就可以就近获得全量帧和少量的增量帧以恢复现场。而不用从头到尾恢复一遍。在使用时长较久的房间内，这种方法可以明显提高进入房间的速度。

网络层：协议优化

互动白板往往需要和实时音视频配合使用，这时候基于 UDP 协议的 RTC 会在网络资源占用上更加强势，甚至会抢网抢到白板系统发不出任何消息。不过白板可以在 Native 端做一些协议层的优化，也采用 UDP 协议来传输信令，在协议上层来保证消息的到达。整体的优化策略我们可以直接参考 QUIC 的优化思路，由于篇幅有限这里就不展开讨论了。

应用层：处理冲突

用户使用白板互动时，冲突的发生在所难免。但是我们有记录和回放的需求，因此也不能允许冲突之后状态就发生分叉。那么我们需要如何解决这个棘手的问题呢？

如图所示，我们引入了一个服务器裁决者的概念。我先让冲突自然发生，允许短时间渲染内容的分叉。当裁决者确定冲突结果后，错误的渲染会被纠正。

这种模型可以同时解决两个关键问题：

• 实时性：不需要等裁决结果出来再同步，实时性强。
• 强一致：内容只会发生毫秒级别的短暂分叉，基本不影响体验，并且可以方便持久化。

我们把上面这种思路简单总结为：先各自处理，后裁决纠正。这种思路在游戏行业也广泛应用，比如暴雪的《守望先锋》就取了以上思路。

基于 Web 的跨平台同步

Web 总是让人又爱又恨。开发者觊觎 Web 带来的便利和统一，但是又对 Web 生态中五花八门的浏览器所产生的复杂运行环境充满畏惧。我们也是在反复对比之后依旧选择了基于 Web 来做，下面我们展开来分析一下原因。

核心技术基础完善

Web 的通信底层、框架生态和性能支持等各方面都发展得越来越完善，目前的基础足以支撑各种实时互动应用的制作。现在Figma 和 Miro 等知名的协作应用都是基于 Web 设计的，我们的互动白板也不例外。下面是我们 web-sdk 的设计示意图。

• 通信：Web Socket 2013 年后普及，具备长连接通信的条件。
• 渲染：WebGL 2014  年之后基本普及，具备可以使用 GPU 做复杂图形渲染的条件。
• 计算：WASM 2017 年之后主流浏览器完成支持，具备高效运算的条件（Figma 在工程中大量使用）。
• 生态：Vue、React 等前端工程化框架的普及，状态驱动渲染的模型方便互动应用的编写。

跨平台维护成本低

如果在每个端都使用原生编写，只是常见客户端我们就需要写 iOS、Android、Web、Windows、Mac 五套代码，其中还需要考虑各种平台渲染方式的问题。这种情况往往会让开发者没有时间去处理产品体验问题，而花大量的时间在兼容和升级上。

但是使用 Web 就不需要考虑以上问题，每个平台都有自己相对完善的 WebView。这样协作应用就可以把主要精力放到提升产品体验上（即使如此，很多协作应用都没有精力支持移动端设备）。

升级方便

互动白板的设计思路更接近游戏，经常玩网游的同学一定知道游戏版本不一致是没办法同服的。所以互动白板产品升级往往都要全系列强制升级，那么 Web 天然更容易升级，毕竟不需要重新下载一个软件安装包那么麻烦。

未来互动白板会如何发展

上面我们分析了互动白板的使用场景和技术构成，大概了解了目前这类产品的作用和发展状况。那么后续白板会如何发展和演进呢？

我认为后续互动白板会随着行业的深入发展分化为两个主要的方向：一个是教学系统中使用的白板，一个是会议系统中使用的白板。这两个方向的区别看似是业务的区别，但实际上也会导致技术发展路线有相当大的区别。下面我们来分别了解一下这两个方向。

在线教学方向

agora flat 开源教室：https://flat-web.whiteboard.agora.io

教学、培训场景中的白板主要是方便老师来输出知识，需要兼顾学生的反馈和互动。这类白板系统的展现形式主要是窗口化，交互类似桌面端操作系统。沿用成熟的交互习惯，方便展示丰富的资料内容。

我们熟悉的课堂通常由课中和课后两部分组成，课中部分需要板书、课件资料、互动问答和纪律管理、辅助工具；课后部分需要回放、课堂笔记导出。

以上两部分在线上课堂也都是一一对应的：

• 板书：对白板书写体验提出了要求，书写顺滑、有笔锋。
• 资料展示：需要将 PDF、PPT 转为可以在白板中展示的格式，并且需要尽量保留动画和还原排版，以及支持多个课件混合使用。
• 互动问答和纪律管理：定时器规定答题时间，抢答器提高课堂趣味；举手发言、禁言管理。
• 辅助工具：数学物理等理工学科需要提供科目工具，比如画三角形、画坐标系和函数等。
• 课堂笔记：支持录制回放和板书导出。

在线会议方向

miro：https://miro.com

会议场景下主要是方便参会人员表达、记录观点，通过便利的工具辅助输出内容。这类白板的主要表现形式是在一个无限画布上面可以陈列各种各样的资料，使用各种各样的工具插件去协作生产内容。

线下会议主要由以下三部分组成：

• 展示阶段：发起人展示 PPT 先说明自己的想法和方案。
• 讨论阶段：参会人和发起人讨论后完善方案（一般这个阶段需要白板辅助交流）。
• 总结阶段：记录讨论的结果并安排后续工作。

当会议搬到线上，我们的需求对应到技术就变成：

• 资料展示：需要将 PPT 转为可以在白板中展示的格式，并且需要尽量保留动画和还原排版。
• 辅助讨论：提供备注、脑图、流程表、泳道图和小贴纸等功能。
• 内容输出：一般要自己根据白板记录总结成邮件，最多需要支持导出图片作为原始资料。

通过上面的比对，我们看到很多教学和会议场景的相同点和不同点。相同之处在于未来两者都会基于白板系统发展出各种各样的场景化工具来辅助教学和会议，不同之处在于教学还会持续地在内容录制回看和课堂权限管理等产品细节上投入更多的精力。

总结和思考

互动白板的本质是什么？是我们在线工作和学习的时候需要一个更好的辅助表达工具。互动白板往往开始的时候只是要做一个可以互动画写的面板，随着不断发展，它越来越像一个在线的操作系统。因为每一个细分领域都可能需要一个自己的在线辅助表达工具，如此一来，互动插件生态就会愈加蓬勃发展。理解了这点，我们才能明白为什么 Figma 和 Miro 都能做到百亿美金的估值。

如果我们相信远程工作和学习在未来会更加普及，那么这个场景中不可或缺的互动白板一定会有充分的发展机会。 

作者简介：伍双，声网互动应用创新部门负责人，主要负责声网互动白板相关业务。 曾创办Netless 互动白板公司，于 2020 年底并入声网。热衷于给开发者提供有用的技术产品和开源项目。