前言
我们的开源项目 Flat 开源教室目前已经获得了较多开发者们的关注。在此基础上,新推出了(便于快速接入的商用版本) Fastboard 。Fastboard 是我们新推出的场景化互动白板(可以理解为互动白板教育版),简化接入 API 的同时,按照大多数教育客户使用习惯提供了默认交互和 UI,同时内置部分常用插件。适用于通用教育场景,可以大大降低客户接入成本。
无较多定制化需求,希望快速接入互动白板并上线使用的客户,推荐通过 Fastboard 一键接入。
正文
本文介绍一下我们为什么要推出 Fastboard?
Fastboard 相对于互动白板 SDK 做了哪些优化?来达到什么样的目的?
最后描述一下互动白板 SDK、Fastboard、Agora Flat 开源教室三者之间的关系。
一、互动白板 SDK
声网在去年正式推出通用型互动白板 SDK,定位于 PaaS,通过 API 交付客户。(这里所说的互动白板,是通用意义上的互动白板,侧重演示和互动标注;并非 Miro、Figma 那种侧重协作的专业白板 )
互动白板 SDK 优点在于通用,各种类型的客户都可以通过组合白板 API 实现不同场景下的业务需求。缺点就在于复杂场景下客户需要亲力亲为,接入点成本过高。
声网互动白板接入成功后是一个空白的白板:
客户接入成功后,需要自己动手通过组合白板 API 来实现自己独特的业务需求,包括最基础的工具栏交互与 UI。
列举几个简单的互动白板使用场景:
如果客户的产品专注于互动游戏,想引入在线白板实现你画我猜,那么我们在接入互动白板后,需要自己对接画笔、橡皮擦、颜色选择器、撤销重做的 API,并实现交互和 UI。
如果客户的产品涉及远程指导,需要在远程屏幕分享(分享的内容可以是桌面、文件、音视频等)的同时在分享内容上添加标注,那么我们在接入互动白板后,首先需要将白板的背景色改为透明,然后需要对接画笔、箭头、图形等会用到的工具栏 API,并实现自己的交互和 UI。
以上两个场景对互动白板的需求都比较简单,只需要简单开启互动白板的基础标注功能就可以满足需求,接入工作稍有繁琐但整体工作量可控。
(白板笔迹多人实时同步,这个由互动白板同步引擎保证,客户不需要关心)
再举一个复杂场景使用互动白板的例子:
在线教育领域的客户目前仍是我们互动白板客户重要的组成部分。放眼全球,教育线上化的趋势越来越明显,全球在线教育仍然有较大增长空间——某印度客户日用量在百万级别并仍然在保持快速增长。
典型的在线互动课堂:
如果客户专注于在线教育场景,需要在互动课堂中引入互动白板,除了最基本的白板标注需求外,大概率还会有以下需求:
- 在白板里面展示多种格式的课件,比如 Word、PDF、PPT 等,那我们就需要配置文档转码服务;
- 在白板里面展示 MP3、MP4、YouTube,那我们就需要引入并配置音视频播放器;
- 在白板里面同时展示多个文件,并可以通过窗口的形式、方便的管理多个文件,那我们就需要引入并配置白板窗口管理器;
- 白板可以新增多页,并支持切页、预览、放缩,那我们就需要去理解并配置对应的接口;
- 开启录制,记录白板讲课过程并生成回放,那我们就需要引入白板播放器并配置录制对应的接口;
- 白板笔迹导出成图片分享,那我们就需要理解并配置截图、导出对应的接口;
- 通过白板自定义互动插件,比如计时器、答题器、代码编辑器、H5 课件… 那我们就需要理解并配置更多的接口;
- …
以上这些在线教育场景需求都是客户的常见需求,我们亲身经历并得到验证。客户可以通过组合互动白板灵活、丰富的 API 来实现。
但是都需要客户自己动手来实现,在实现这些细节需求的过程中需要查看大量的接入文档、理解较多 API 使用方法,并且在接入过程中可能会遇到各种各样需要调试的问题。
一句话总结就是:使用互动白板 SDK,可以覆盖更广的场景,但是遇到复杂场景需求,虽然可以实现,但是工作量比较大、接入周期比较长。
互动白板总结:
接入成本太高,给大多数的初创型在线教育客户带来较多的开发困难。然而这并不是我们所希望的,我们希望更多初创教育客户可以轻松上手,易于实现场景。
长期来看,为了给更多初创型客户提供开发便利,Fastboard 就是我们给出的答案。
二、Fastboard:场景化的互动白板
针对这种复杂但是通用的教育场景,为了降低客户接入互动白板的成本,声网今年推出场景化互动白板 Fastboard (互动白板教育版)。
客户基本上通过一个 API 就可以接入场景化的互动白板 Fastboard,大大降低了客户接入成本,利于帮助更多初创客户接入。
接入代码:
import { createFastboard, mount } from "@netless/fastboard";
async function main() {
const fastboard = await createFastboard({
// [1]
sdkConfig: {
appIdentifier: "whiteboard-appid",
region: "us-sv", // "cn-hz" | "us-sv" | "sg" | "in-mum" | "gb-lon"
},
// [2]
joinRoom: {
uid: "unique_id_for_each_client",
uuid: "room-uuid",
roomToken: "NETLESSROOM_...",
},
// [3] (optional)
managerConfig: {
cursor: true,
},
});
const ui = await mount(fastboard, document.getElementById("whiteboard"));
详细接入文档查看:GitHub - netless-io/fastboard: An open sourced whiteboard starter based on white-web-sdk.
大大简化接入 API 的同时,按照大多数教育客户的使用习惯提供了默认交互和 UI,并内置了部分课堂互动插件,客户一键接入后就可以直接使用丰富的互动白板功能。
Fastboard 接入效果,自带交互和 UI:
Fastboard 内置丰富互动插件,客户可以自定义开启使用:
我们把客户通用性的细节需求全部自己实现了一遍,客户可以直接使用,不需要像往常一样每个客户都各自实现一遍,同时 Fastboard 也保留了一定的 API 灵活性,方便客户在通用性需求上进行调整。比如 Fastboard 提供的默认 UI 工具栏是在左侧,客户可以根据自己的业务需求调整到右侧或下侧,等等。
三、总结
无较多定制化需求,希望快速接入并上线使用互动白板的客户,推荐通过 Fastboard 一键快速接入声网互动白板全套功能。
有较多定制化需求,Fastboard 无法满足,并拥有一定研发能力的中大型客户,可以通过互动白板 Whiteboard SDK 接入声网互动白板。
附详细对比:
Agora Flat 开源教室是我们使用 Fastboard 做的一套开源应用,大家可以通过 Flat 直观体验 Fastboard 丰富的互动白板功能。
Fastboard 接入文档:GitHub - netless-io/fastboard: An open sourced whiteboard starter based on white-web-sdk.
体验 Agora Flat 在线教室:https://flat.whiteboard.agora.io