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 转换成网页，保留原文件中的动画效果、音视频，帮助完整生动呈现信息。 |
// 最新版本
<script src="https://unpkg.com/ar-whiteboard"></script>
// 指定版本
<script src="https://unpkg.com/ar-whiteboard@VERSION"></script>
// 最新版本
<script src="https://cdn.jsdelivr.net/npm/ar-whiteboard"></script>
// 指定版本
<script src="https://cdn.jsdelivr.net/npm/ar-whiteboard@VERSION"></script>
npm install ar-whiteboard -Dimport ArWhiteBoard from "ar-whiteboard";
const board = new ArWhiteBoard(initParams);对于 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> 标签，document.activeElement 会变成 select 对象，画板会无法捕捉到 mouseout 事件，因此会导致激光笔工具再特定情况下移出画板无法删除激光笔。
- 检查是否在方法调用后监听的回调，确保回调在调用方法之前注册（监听）。
- 如果收到多次回调，检查是否自己封装的方法中多次监听回调方法（正常回调只需要注册一遍）。
SDK 没有人员身份的标识和逻辑，客户端可以根据自己的业务需求，结合自己的业务系统配合 SDK uid 进行人员权限分配。
- 可以擦除任何人的画笔痕迹
- 擦除后，该画笔变更为改画笔的临时拥有者，可以对该画笔进行撤销和重做
- 只能撤销和重做自己的画笔
- 如果自己的画笔被其他人移动了，则该笔仅能被该移动者撤销和重做
- 清空白板（或背景）不允许被撤销和重做
- 重置画板会删除所有画板页，仅保留第一页，但是不保留第一页的涂鸦
- 重连时丢失的画笔，SDK 不保存。
- 断网期间进行的绘画，重连后不会同步。