白板快速开始
创建房间、签发房间 Token、用 Web SDK 加入并画出第一条笔迹。
这一页用四步跑通白板：创建房间、签发房间 Token、用 Web SDK 加入并画一笔、导出快照或回放。
前置条件
- 已有一个启用 RTC 的项目，拿到
customerId/customerSecret（控制台的项目密钥页）。 - 控制面地址（示例使用
https://api.your-domain.example）。 - Node.js 22+ 或任意支持 Fetch 的浏览器运行时。
第一步：创建房间
用项目凭证调用房间接口。limit 表示同时可写的成员上限，0 为不限制。
curl --request POST "$NIMEET_API_BASE/v1/whiteboard/rooms" \
--user "$NIMEET_CUSTOMER_ID:$NIMEET_CUSTOMER_SECRET" \
--header "content-type: application/json" \
--data '{"isRecord": false, "limit": 8}'响应中的 uuid 就是房间标识。
第二步：签发房间 Token
房间 Token 绑定到该房间，并带角色与有效期（毫秒，0 表示不过期）。浏览器只应拿到 Token，不应拿到项目密钥。
curl --request POST "$NIMEET_API_BASE/v1/whiteboard/tokens/rooms/$ROOM_UUID" \
--user "$NIMEET_CUSTOMER_ID:$NIMEET_CUSTOMER_SECRET" \
--header "content-type: application/json" \
--data '{"role": "writer", "lifespan": 3600000}'第三步：加入房间并画一笔
import { WhiteboardSdk } from '@nimeet/sdk-whiteboard-web';
const sdk = new WhiteboardSdk({ apiBase: 'https://api.your-domain.example' });
const room = await sdk.joinRoom({
uuid: ROOM_UUID,
roomToken: ROOM_TOKEN,
memberId: 'alice',
});
await room.addPage({ name: 'page1', path: '/demo/page1' });
await room.setScenePath('/demo/page1');
const stroke = await room.drawStroke({
appliance: 'pencil',
color: '#1f6feb',
width: 3,
points: [
{ x: 120, y: 160 },
{ x: 220, y: 240 },
{ x: 320, y: 180 },
],
});
console.log('stroke', stroke.id, 'room version', room.roomInfo.version);页面切换、图片插入、视口移动分别使用 room.setScenePath、room.insertImage、room.moveCamera；撤销与重做是 room.undo() / room.redo()。
第四步：导出与回放
curl --request GET "$NIMEET_API_BASE/v1/whiteboard/rooms/$ROOM_UUID/snapshot" \
--user "$NIMEET_CUSTOMER_ID:$NIMEET_CUSTOMER_SECRET"
curl --request GET "$NIMEET_API_BASE/v1/whiteboard/rooms/$ROOM_UUID/replay?from=2026-10-28T00:00:00Z" \
--user "$NIMEET_CUSTOMER_ID:$NIMEET_CUSTOMER_SECRET"快照包含所有场景、笔迹、图片和操作日志；回放返回按时间排序的操作帧。也可以直接下载 <ROOM_UUID>/snapshot.svg 作为当前场景的缩略图。
实时同步
Web SDK 通过注入的 LiveKit transport 把操作发布到 whiteboard topic：
import { LiveKitWhiteboardSync, WhiteboardSdk } from '@nimeet/sdk-whiteboard-web';
const sync = new LiveKitWhiteboardSync({
publishData: (payload, options) => room.localParticipant.publishData(payload, options),
});
room.localParticipant.on('dataReceived', (packet) => sync.receive(packet.payload));
const sdk = new WhiteboardSdk({ apiBase: 'https://api.your-domain.example' });
const whiteboard = await sdk.joinRoom({ uuid: ROOM_UUID, roomToken: ROOM_TOKEN, memberId: 'alice', sync });REST 仍是权威状态；实时通道丢包时调用 room.refresh() 重新拉取场景状态即可对齐。
下一步
- 认证与权限细节：核心概念
- 完整接口表：白板 REST API
- SDK 类与方法：SDK 参考