Fastboard:可快速接入的场景化互动白板

前言

我们的开源项目 Flat 开源教室目前已经获得了较多开发者们的关注。在此基础上,新推出了(便于快速接入的商用版本) Fastboard 。Fastboard 是我们新推出的场景化互动白板(可以理解为互动白板教育版),简化接入 API 的同时,按照大多数教育客户使用习惯提供了默认交互和 UI,同时内置部分常用插件。适用于通用教育场景,可以大大降低客户接入成本。

image

无较多定制化需求,希望快速接入互动白板并上线使用的客户,推荐通过 Fastboard 一键接入。

正文

本文介绍一下我们为什么要推出 Fastboard?

Fastboard 相对于互动白板 SDK 做了哪些优化?来达到什么样的目的?

最后描述一下互动白板 SDK、Fastboard、Agora Flat 开源教室三者之间的关系。

一、互动白板 SDK

声网在去年正式推出通用型互动白板 SDK,定位于 PaaS,通过 API 交付客户。(这里所说的互动白板,是通用意义上的互动白板,侧重演示和互动标注;并非 Miro、Figma 那种侧重协作的专业白板 )

互动白板 SDK 优点在于通用,各种类型的客户都可以通过组合白板 API 实现不同场景下的业务需求。缺点就在于复杂场景下客户需要亲力亲为,接入点成本过高。

声网互动白板接入成功后是一个空白的白板:

客户接入成功后,需要自己动手通过组合白板 API 来实现自己独特的业务需求,包括最基础的工具栏交互与 UI。

列举几个简单的互动白板使用场景:

如果客户的产品专注于互动游戏,想引入在线白板实现你画我猜,那么我们在接入互动白板后,需要自己对接画笔、橡皮擦、颜色选择器、撤销重做的 API,并实现交互和 UI。

image

如果客户的产品涉及远程指导,需要在远程屏幕分享(分享的内容可以是桌面、文件、音视频等)的同时在分享内容上添加标注,那么我们在接入互动白板后,首先需要将白板的背景色改为透明,然后需要对接画笔、箭头、图形等会用到的工具栏 API,并实现自己的交互和 UI。

image

以上两个场景对互动白板的需求都比较简单,只需要简单开启互动白板的基础标注功能就可以满足需求,接入工作稍有繁琐但整体工作量可控。

(白板笔迹多人实时同步,这个由互动白板同步引擎保证,客户不需要关心)

再举一个复杂场景使用互动白板的例子:

在线教育领域的客户目前仍是我们互动白板客户重要的组成部分。放眼全球,教育线上化的趋势越来越明显,全球在线教育仍然有较大增长空间——某印度客户日用量在百万级别并仍然在保持快速增长。

典型的在线互动课堂:

image

如果客户专注于在线教育场景,需要在互动课堂中引入互动白板,除了最基本的白板标注需求外,大概率还会有以下需求:

  • 在白板里面展示多种格式的课件,比如 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 内置丰富互动插件,客户可以自定义开启使用:

image

我们把客户通用性的细节需求全部自己实现了一遍,客户可以直接使用,不需要像往常一样每个客户都各自实现一遍,同时 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