@dingrtc/whiteboard

安装

npm install @dingrtc/whiteboard

使用

@dingrtc/whiteboard 支持独立使用和配合 dingrtc sdk 使用两种方式：

• 独立使用：使用白板实例加入频道，适合只使用白板的情况
• 配合 dingrtc使用：与 dingrtc 实例共享入会链接，适合 dingrt和白板一起使用的情况

独立使用

import { WhiteboardManager } from '@dingrtc/whiteboard';

const whiteboardManager = new WhiteboardManager();

// 参考 https://help.aliyun.com/document_detail/2640080.html 开通 DingRTC 服务
// 获取用户配置以加入频道
await whiteboardManager.join({
  appId: '',
  userName: '',
  channel: '',
  uid: '',
  token: ''
});

const myWhiteboard = whiteboardManager.getWhiteboard('my-wb-id');

// 请自行在页面中添加白板容器dom，白板将渲染到这个 dom 中
const wbDom = document.getElementById('your-wb-dom');
await myWhiteboard.open(wbDom);

配合 dingrtc 使用

import DingRTC from 'dingrtc';
import { WhiteboardManager } from '@dingrtc/whiteboard';

const client = DingRTC.createClient();

const whiteboardManager = new WhiteboardManager();
// 白板和 rtc 共享同一个入会连接
client.register(whiteboardManager);

await client.join({
  appId: '',
  userName: '',
  channel: '',
  uid: '',
  token: '',
});

const myWhiteboard = whiteboardManager.getWhiteboard(defaultWhiteboardId);

// 请自行在页面中添加白板容器dom，白板将渲染到这个 dom 中
const wbDom = document.getElementById('your-wb-dom');
await myWhiteboard.open(wbDom);