# @dingrtc/whiteboard

## 安装

```bash
npm install @dingrtc/whiteboard
```

## 使用

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

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

### 独立使用

```javascript
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` 使用

```javascript
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);
```