实时音视频
实时音视频
文档指南
请输入
实时音视频
快速入门
场景方案
开发指南
Token 鉴权
音频管理
视频管理
屏幕共享
SDK 升级指南
客户端 API 参考
服务端 API 参考
房间管理
转推直播
输入在线媒体流
WTN 流（原公共流）
实时数据监控
历史数据查询
业务标识管理
实时消息通信
历史版本（文档停止维护）
2023-08-01
2023-06-01
转推直播
2022-06-01
2020-12-01
转推直播
输入在线媒体流
获取数据指标
常见问题
集成相关
质量相关
AI 音视频互动方案
开发指南
配置 ASR/LLM/TTS 服务
API 参考
硬件对话智能体
用户指南
服务端 API
智能体
实时信令
互动白板
客户端 API 参考
服务端 API 参考
- 文档首页
实时音视频互动白板构建白板应用Web
复制全文
下载 pdfWeb
文档反馈
问问助手前提条件
- 获取 AppID，参考 开通服务。
- 获取 Token，参考 密钥说明。
- 开发环境要求：具备互联网连接，搭载 Intel 第二代酷睿处理器或更佳性能的处理器。
- 使用白板 App 设备要求：
设备 | 操作系统 | Chrome | Safari | Firefox |
PC | Windows 7 及以上 | Chrome 70 及以上 | - | Firefox 80 及以上 |
PC | macOS 10.10 及以上 | Chrome 70 及以上 | Safari 12 及以上 | Firefox 80 及以上 |
iPhone、iPad | iOS 12.0 及以上 | Chrome 70 及以上 | Safari 12 及以上 | Firefox 80 及以上 |
Android 手机和平板 | Android 6.0 及以上 | Chrome 70 及以上 | - | Firefox 80 及以上 |
集成SDK
npm 方式
- 通过包管理工具 npm 下载 SDK。不指定版本表示下载最新版本。
npm i @volcengine/white-board-manage
- 在实现功能的 js 文件中引入 SDK。
import Board from '@volcengine/white-board-manage';
离线方式
- 下载 lib 包。
- 在实现功能的 js 文件中引入 SDK。
// ${you_path} 为解压后的 lib 文件夹所在本地路径
import Board from '${you_path}/lib/white-board-manage';
实现功能
基础白板使用 API 时序图
1. 初始化应用
Board.init({
domId: 'board',
appId,
});
2. 加入白板房间
如果服务端还没有该房间，会自动创建一个房间。
如果当前房间没有白板，SDK 将自动创建白板。
白板服务在当前用户加入白板房间后开始计费，直到该用户调用 leaveRoom 退出房间后停止计费。建议在即将使用白板前创建白板实例。并结束使用后及时销毁白板实例。
const whiteBoardRoom = await Board.joinRoom({
roomId,
userId,
token,
});
- 白板房间 roomId 不能与 RTC 或 RTS 房间的 roomId 相同。以免影响白板房间和 RTC 房间内回调提醒相互影响。建议为白板房间名加上 whiteboard_ 前缀。
- 白板用户 userId 不能与 RTC 或 RTS 的 userId 相同。
- 参考 使用 Token 完成鉴权 获取 Token。Token 有效时长应大于单次白板互动时长。例如， 24 小时。
根据实际应用需要，在初始化 WhiteBoard 后监听想要关注的事件回调。例如，在进房成功后获取白板对象信息、白板改变、回放状态变化等。
whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onError, function (res) {
if (res.errorCode === ErrorCode.DUPLICATE_LOGIN) {
message.error('您已被踢出房间');
// 根据实际业务需要做
}
});
// 监听当前白板改变，获取当前被激活白板。
whiteBoardRoom.on(
WhiteBoardRoomEventsTypes.onCurrentWhiteBoardChanged,
async ({ userId, boardId, whiteBoard }) => {
},
);
// 监听回放状态改变
whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onPlaybackStateChanged,({state, data}) => {});
3. 使用白板
编辑工具
pointer // 选取图元 ToolMode.POINTER
pencilBrush //涂鸦画笔 ToolMode.PENCIL_BRUSH
textbox // 文本 ToolMode.TEXT
circle // 圆 ToolMode.CIRCLE
line // 直线 ToolMode.LINE
rect // 矩形 ToolMode.RECT
arrow // 箭头 ToolMode.ARROW
eraser // 橡皮擦 ToolMode.ERASER
zoom // 平移 ToolMode.ZOOM
whiteBoard.setEditType(key);
//show case
import { IWhiteBoard, ToolMode } from '@volcengine/white-board-manage'
const [whiteBoard, setWhiteBoard] = useState<IWhiteBoard>()
whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onCurrentWhiteBoardChanged,({ userId, boardId, whiteBoard }) => {
setWhiteBoard(whiteBoard);
});
//tool_bar.tsx
return(
<button
onClick={()=>whiteBoard.setEditType(ToolMode.PENCIL_BRUSH)}
>
涂鸦工具
</button>
)
页面管理
- 新增白板页
- 调用 whiteBoard.createPages 新增白板页，成功后将收到 onCreatePagesProgress 回调和 onPageCountChanged 回调。
whiteBoard.createPages(
[
{
pageId: `${uuid()}`,
},
],
{
autoFlip: true,
},
);
const onCreatePagesEvent: IWhiteBoardEvents['onCreatePagesProgress'] = e => {
if (e.progress === 1) {
console.log('开始创建');
}
if (e.progress === 100) {
console.log('全部创建成功');
}
};
- 删除白板页
- 调用 whiteBoard.removePages 删除白板页，成功后将收到 onRemovePages 回调和 onPageCountChanged 回调和 onPageIndexChanged 回调。
- 翻页
- 调用 whiteBoard.flipPage 跳转到指定白板页，成功后收到 onPageIndexChanged 回调。
4. 结束使用白板
const leaveRoom = () => {
if(boardRoom){
boardRoom.leaveRoom();
}
};
最近更新时间：2026.08.06 10:31:35
这个页面对您有帮助吗？
有用
有用
无用
无用