Web 互动白板 SDK

anyRTC 互动白板提供一整套完整的互动白板解决方案,客户端 SDK 覆盖 iOS、Android、Web 等主流平台,同时提供完整的服务端配套功能,可用于在线教育、在线会议、协作办公、在线互动娱乐等场景。

平台 版本要求 SDK 示例项目
Web Chrome 58+Safari 11+ (macOS 10+) 前往下载 在线体验
Android Android 4.4(SDK API Level 19)及以上版本 前往下载 Whiteboard-Android (Github 开源项目)
iOS iOS 9.0 及以上版本 前往下载 Whiteboard-iOS (Github 开源项目)

功能概述

anyRTC 互动白板提供以下核心功能:

功能 描述
互动白板 超低延时、实时互动、全球互联的白板房间,支持上传和展示多种格式的文件,提供丰富的白板操作工具,支持多人实时互动。
白板录制和回放 支持云端高保真信令录制,实时记录白板上的所有操作、动态 PPT和自定义事件。支持多端回放,回放时支持前进、倒退、倍速播放,随时随地回看白板实时房间的全部内容。
文档转图片 静态文档转换,支持将 PPT、PPTX、WORD、PDF 等格式的文件转换成图片,丰富白板演示素材。
文档转网页 动态文档转换,支持将 PPTX 转换成网页,保留原文件中的动画效果、音视频,帮助完整生动呈现信息。

安装

CDN 引入

unpkg

// 最新版本
<script src="https://unpkg.com/ar-whiteboard"></script>
// 指定版本
<script src="https://unpkg.com/ar-whiteboard@VERSION"></script>

jsdelivr

// 最新版本
<script src="https://cdn.jsdelivr.net/npm/ar-whiteboard"></script>
// 指定版本
<script src="https://cdn.jsdelivr.net/npm/ar-whiteboard@VERSION"></script>

npm 引入

安装

npm install ar-whiteboard -D

项目导入

import ArWhiteBoard from "ar-whiteboard";
const board = new ArWhiteBoard(initParams);

类型模块(适用于 Typescript)

对于 Typescript 开发者,我们提供了 .d.ts 文件导出详细的类型定义。

import ArWhiteBoard, {
  BoardToolType,
  IArBoardInitBaseParams,
  IArBoardInitParams,
  IArBoardInitStyleParams,
  IConfigParameters,
} from "ar-whiteboard";

const board = new ArWhiteBoard(initParams);

使用

SDK 会在全局导出一个 ArWhiteBoard 对象,可以通过 new 方法创建一个白板实例。一个白板实例代表一个白板客户端。

// 初始化配置
const initConfig = {
  id: '<DOM_ID>',
  appId: '<APP_ID>',
  userId: '<U_ID>',
  channel: '<CHANNEL_ID>',
  token: '<TOKEN>',
};
const Board = new ArWhiteBoard(initConfig);

概览

Board 实例包含了以下方法:

全局事件回调
add-board 添加白板页
delete-board 删除白板页
goto-board 白板页切换
clear-board 清空画板
reset-board 重置画板
board-can-redo-status 当前白板页是否可重做
board-can-undo-status 当前白板页是否可撤销
board-error 白板错误回调
board-scale-change 当前白板页缩放比例变化
board-warning 白板警告回调
connection-state-change 网络状态回调
board-background-color-change 背景颜色更改
核心方法
new ArWhiteBoard 白板构造函数,创建白板实例
destroy 销毁白板实例
涂鸦相关方法
clear 清空当前白板页数据。默认只清除当前白板页的涂鸦,如果 clearBackground 参数为 true,则同时清除涂鸦和背景。
getBrushColor 获取画笔颜色。
getBrushThin 获取画笔粗细。
getBrushType 获取画笔类型。
getEnable 获取白板是否可涂鸦。
getTextColor 获取设置的文字颜色。
getTextSize 获取设置的文字大小。
resize 重新计算白板大小,并渲染。
setBrushColor 设置画笔颜色。
setBrushThin 设置画笔粗细。
setBrushType 设置画笔工具类型。
setEnable 设置白板是否可涂鸦。
setTextColor 设置的文字颜色。
setTextSize 设置文字的大小。
白板页相关方法
addBoard 添加一页白板并切换到这一页。
deleteBoard 删除当前白板页并切换到上一页。
getBoardList 获取所有文件的白板列表。
getBoardScale 获取当前白板页缩放比例。
getBoardSnapshot 获取当前白板页的快照。
getCurrentBoardId 获取当前白板页 ID。
getCurrentFileId 获取当前文件 ID。
getFileBoardList 获取指定文件的白板 ID 列表。
getFileInfo 获取白板的基本信息。
gotoBoard 切换到指定的白板页。
nextBoard 切换到下一页白板。
prevBoard 切换到上一页白板。
reset 重置白板。
setBoardScale 设置当前白板页的缩放大小。
背景相关方法
getBackgroundColor 获取当前白板页的背景颜色。
getGlobalBackgroundColor 获取全局设置的白板页背景颜色。
setBackgroundColor 设置当前白板页的背景颜色。
setGlobalBackgroundColor 全局设置白板页的背景颜色。
撤销和恢复相关方法
redo 画笔重做。
undo 撤销画笔。
其他方法
getVersion 获取 SDK 版本。

注意事项

选择画笔工具,避免使用 <select> 标签

因为使用 <select> 标签,document.activeElement 会变成 select 对象,画板会无法捕捉到 mouseout 事件,因此会导致激光笔工具再特定情况下移出画板无法删除激光笔。

收不到(或者收到多次)回调

  • 检查是否在方法调用后监听的回调,确保回调在调用方法之前注册(监听)。
  • 如果收到多次回调,检查是否自己封装的方法中多次监听回调方法(正常回调只需要注册一遍)。

主持人(老师)和观众(学生)

SDK 没有人员身份的标识和逻辑,客户端可以根据自己的业务需求,结合自己的业务系统配合 SDK uid 进行人员权限分配。

橡皮擦

  • 可以擦除任何人的画笔痕迹
  • 擦除后,该画笔变更为改画笔的临时拥有者,可以对该画笔进行撤销和重做

撤销和重做

  • 只能撤销和重做自己的画笔
  • 如果自己的画笔被其他人移动了,则该笔仅能被该移动者撤销和重做
  • 清空白板(或背景)不允许被撤销和重做

重置画板

  • 重置画板会删除所有画板页,仅保留第一页,但是不保留第一页的涂鸦

重连

  • 重连时丢失的画笔,SDK 不保存。
  • 断网期间进行的绘画,重连后不会同步。