anyrtc-whiteboard
Version:
This is an white board SDK include ui, simple ot use, you can visit anyrtc.io get app token.
275 lines (189 loc) • 8.68 kB
Markdown
## API接口
|API Name | Desciption|
|----------|:-------------:|
|[initEngineWithAnyRTCInfo](#initEngineWithAnyRTCInfo) | 连接画板服务|
|[initWithRoomID](#initWithRoomID) | 初始化画板，返回所有画板信息|
|[setBrushModel](#setBrushModel) | 设置画笔类型 |
|[getBrushModel](#getBrushModel) | 获取画笔类型 |
|[setBrushWidth](#setBrushWidth) | 设置画笔粗细 |
|[getBrushWidth](#getBrushWidth) | 获取画笔粗细 |
|[setBrushColor](#setBrushColor) | 设置画笔颜色 |
|[getBrushColor](#getBrushColor) | 获取画笔颜色 |
|[updateCurrentBgImage](#updateCurrentBgImage) | 更新当前画板背景图片 |
|[getCurrentBgImageURL](#getCurrentBgImageURL) | 获取当前画板背景图片 |
|[addBoard](#addBoard) | 添加一页画板(向前或向后) |
|[deleteCurrentBoard](#deleteCurrentBoard) | 删除当前画板页 |
|[prePage](#prePage) | 切换到上一页 |
|[nextPage](#nextPage) | 切换到下一页 |
|[switchPage](#switchPage) | 切换到具体某一页 |
|[setCanvasSize](#setCanvasSize) | 设置画板大小（页面变化时调用） |
|[setBoardScale](#setBoardScale) | 放大缩小画板 |
|[undo](#undo) | 撤销当前画板页自己绘制的笔迹 |
|[destoryBoard](#destoryBoard) | 清除所有画板的笔迹以及背景图片 |
|[cleanAllDraws](#cleanAllDraws) | 清除所有画板的笔迹 |
|[clearCurrentDraw](#clearCurrentDraw) | 清除当前画板所有笔迹 |
|[leave](#leave) | 离开画板（房间） |
## 事件监听
|API Name | Desciption|
|----------|:-------------:|
|[onBoardServerDisconnect](#onBoardServerDisconnect) | 白板断开连接 |
|[onBoardPageChange](#onBoardPageChange) |当画板发生变化，将会收到该回调（例如翻页、添加一页、删除一页、背景图片更新等等）|
|[onBoardDrawsChangeTimestamp](#onBoardDrawsChangeTimestamp) | 画板实时变化时间戳回调 |
|[onBoardDestroy](#onBoardDestroy) | 画板被销毁时的回调 |
|[onBoardError](#onBoardError) | 白板发生错误，错误码 |
---
## API介绍
<h3 id="initEngineWithAnyRTCInfo">initEngineWithAnyRTCInfo</h3>
> 连接画板服务,返回code为0表示连接成功。<Promise>
|Params | Desciption|
|----------|:-------------:|
|DEV_ID | anyRTC开发平台的开发者ID |
|APP_ID | anyRTC开发平台的应用的appID|
|APP_KEY | anyRTC开发平台的应用的appKEY |
|APP_TOKEN | anyRTC开发平台的应用的appTOKEN |
|APP_DOMAIN | 授权网站域名 |
<h3 id="initWithRoomID">initWithRoomID</h3>
> 初始化画板，返回所有画板信息。<Promise>
|Params | Desciption|
|----------|:-------------:|
|anyRTCId | 房间号ID |
|fileId | 文件ID |
|userId | 用户id |
|backgroundList | 画板背景图URL(保证图片源允许跨域),第一次创建房间时必生效，后续初始化不会覆盖掉之前服务端的背景图片 |
> ***backgroundList*** 的参数
|Params | Desciption|
|----------|:-------------:|
|board_background | 背景图片 |
|board_number | 画板的页数 |
注意：该参数为画板背景图片的队列，存储着每一页的背景图片。第一次初始化时```backgroundList```参数为```必填```。当第一次初始化之后，再次初始化时不会清除上一次的画板数据，而是读取上次的数据进行渲染。
<h3 id="setBrushModel">setBrushModel</h3>
> 设置画笔的类型
|Params | key | value |
|----------|:-------------:|---|
|nType | ```0``` | 不可编辑 |
| | ```1```| 涂鸦(默认) |
| |```2```| 箭头 |
| |```3``` | 直线 |
| | ```4``` | 矩形 |
<h3 id="getBrushModel">getBrushModel</h3>
> 获取画笔的类型
<h3 id="setBrushWidth">setBrushWidth</h3>
> 设置画笔的粗细
|Params | Desciption|
|----------|:-------------:|
|nWidth | ```int```型，例如10，该值均自动转换为```px```。 |
<h3 id="getBrushWidth">getBrushWidth</h3>
> 获取画笔的粗细
|Params | Desciption|
|----------|:-------------:|
|nWidth | ```int```型，例如10，该值均自动转换为```px```。 |
<h3 id="setBrushColor">setBrushColor</h3>
> 设置画笔的颜色
|Params | Desciption|
|----------|:-------------:|
|strColor | 颜色的十六进制码。例如```#000000```,为了和移动平台的兼容性，请勿缩写为```#000``` |
<h3 id="getBrushColor">getBrushColor</h3>
> 获取画笔的颜色
<h3 id="updateCurrentBgImage">updateCurrentBgImage</h3>
> 更新当前画板背景图片
|Params | Desciption|
|----------|:-------------:|
|strBGUrl | 图片url |
<h3 id="getCurrentBgImageURL">getCurrentBgImageURL</h3>
> 获取当前画板的背景图片URL
<h3 id="addBoard">addBoard</h3>
> 在当前画板之前或之后插入一个新的画板
|Params | Desciption|
|----------|:-------------:|
|withFront | ```0```表示在当前画板```之前```插入，```1```表示在当前画板```之后```插入 |
|boardBGUrl | 插入新画板的背景图片URL(保证图片源允许跨域) |
<h3 id="deleteCurrentBoard">deleteCurrentBoard</h3>
> 删除当前页的画板
<h3 id="prePage">prePage</h3>
> 切换到上一页
|Params | Desciption|
|----------|:-------------:|
|needSync | ```true```其他端的画板同步滑动到上一页，```false```仅本地滑动到上一页 |
<h3 id="nextPage">nextPage</h3>
> 切换到下一页
|Params | Desciption|
|----------|:-------------:|
|needSync | ```true```其他端的画板同步滑动到下一页，```false```仅本地滑动到下一页 |
<h3 id="switchPage">switchPage</h3>
> 滑动画板到第几页
|Params | Desciption|
|----------|:-------------:|
|needSync | ```true```其他端的画板同步滑动到指定页，```false```仅本地滑动到指定页 |
|nIndex | 滑动画板到第几页（Int型） |
<h3 id="setCanvasSize">setCanvasSize</h3>
> 设置画板大小，当尺寸变化，或者放大缩小时调用
|Params | Desciption|
|----------|:-------------:|
|nWidth | 画板将要设置的宽度 |
|nHeight | 画板将要设置的高度 |
<h3 id="setBoardScale">setBoardScale</h3>
> 设置画板大小，当尺寸变化，或者放大缩小时调用
|Params | Desciption|
|----------|:-------------:|
|nScale | 画板放大比例，1~3倍 |
<h3 id="undo">undo</h3>
> 撤销画笔,撤销当前画板上自己的画笔,逐条撤销
<h3 id="destoryBoard">destoryBoard</h3>
> 清除所有画板的笔迹以及背景图片
<h3 id="cleanAllDraws">cleanAllDraws</h3>
> 清除所有画板的笔迹
<h3 id="clearCurrentDraw">clearCurrentDraw</h3>
> 清除当前画板所有笔迹
<h3 id="leave">leave</h3>
> 离开画板（房间）
----
<h3 id="onBoardServerDisconnect">画板断开连接</h3>
> 画板断开连接
```
实例.on("onBoardServerDisconnect", () => {
});
```
<h3 id="onBoardPageChange">监听画板变化</h3>
> 监听画板变化，当画板发生变化，将会收到该回调（例如翻页、添加一页、删除一页、背景图片更新等等
```
实例.on("onBoardPageChange", (nIndex, nTotalIndex, currentBgUrl, bgList) => {
});
```
|Params | Desciption |
|----------|:-------------:|
|nIndex | - | 当前画板页数 |
|nTotalIndex | 画板总页数 |
|currentBgUrl | 当前画板背景图片URL |
|bgList | 画板背景图片的队列 |
<h3 id="onBoardDrawsChangeTimestamp">画板实时变化时间戳回调</h3>
> 主持人监听并实现录制，非主持人不做处理
```
实例.on("onBoardDrawsChangeTimestamp", (timestamp) => {
//这里可以截图画板，制作画板录像，一张图片为一帧
});
```
<h3 id="onBoardDestroy">画板被摧毁</h3>
```
实例.on("onBoardDestroy", () => {
});
```
<h3 id="onBoardError">监听画板错误</h3>
```
实例.on("onBoardError", error => {
});
```
<h3 id="onBoardError">错误码</h3>
> 错误码
|code | Desciption |
|----------|:-------------:|
|AnyRTCBoardCodeParameterError |参数为空或者参数错误|
|AnyRTCBoardCodeNoNet | 当前无网络|
|AnyRTCBoardCodeSessionPastDue | Session已过期|
|AnyRTCBoardCodeDeveloperInfoError | 开发者信息错误|
|AnyRTCBoardCodeDeveloperArrearage | 账号欠费|
|AnyRTCBoardCodeDeveloperNotOpen | 该功能未开通|
|AnyRTCBoardCodeDatabaseError | 数据库异常|
|AnyRTCBoardCodeBackgroundListIsNull | 背景图片队列为空 |
## 技术支持
> 加QQ技术咨询群：580477436 (一群) 554714720 (二群)
> 欢迎加入[anyRTC社区](https://bbs.anyrtc.io) 和我们一起探讨WebRTC技术以及解决集成问题。