快速入门互动白板

本文介绍如何使用 anyRTC 互动白板 SDK。

开发环境要求

• 一个有效的 开发者账号。

• 一款支持 ArWhiteBoard SDK 的主流浏览器:

  浏览器	兼容性
  Chrome 49+	✔
  Safari 9+	✔
  Firefox 52+	✔
  微信浏览器	✔
  QQ 浏览器 10.5+	✔
  Internet Explorer 11+	✔

快速集成

本小节介绍如何获取 AppID 以及如何快速将 SDK 集成到项目中。

获取 AppID

参考以下步骤获取一个 AppID。若已经拥有 AppID，请跳过当前步骤，查看操作流程

• 1. 创建项目

  首先我们需要在开发者控制台创建一个「项目」。

• 2. 获取 APP ID

  获取项目的「APP ID」。

开通白板服务

参考图中所示，在anyRTC 控制台开通白板服务

获取 SDK

你可以通过如下几种方式获取最新的 SDK:

unpkg

/** 白板样式 */
<link rel="stylesheet" href="https://unpkg.com/ar-whiteboard@latest/dist/board.css" />

// 最新版本
<script src="https://unpkg.com/ar-whiteboard"></script>
// 指定版本
<script src="https://unpkg.com/ar-whiteboard@VERSION"></script>

jsdelivr

/** 白板样式 */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ar-whiteboard@latest/dist/board.css" />

// 最新版本
<script src="https://cdn.jsdelivr.net/npm/ar-whiteboard"></script>
// 指定版本
<script src="https://cdn.jsdelivr.net/npm/ar-whiteboard@VERSION"></script>

npm 引入

安装

npm install ar-whiteboard -D

引入

// 引入样式
import 'ar-whiteboard/dist/board.css'

// ES6
import ArWhiteBoard from 'ar-whiteboard'
// 或者是 commonJS
var ArWhiteBoard = require('ar-whiteboard')

操作流程

本节内容主要介绍如何实现互动白板。

初始化客户端

通过 new ArWhiteBoard 创建本地客户端 Board 的实例。

const initConfig = {
  id: '<DOM_ID>',
  appId: '<APP_ID>',
  userId: '<U_ID>',
  channel: '<CHANNEL_ID>',
  token: '<TOKEN>',
}
const Board = new ArWhiteBoard(initConfig)

使用相同 App ID 的应用才能互相通信。

监听回调

• 如果没有监听到错误事件，则说明白板能够正常使用了。
• 注意:针对白板行为的操作，一定要在该事件回调完成后再进行操作，否则无效。如翻页，设置背景色等行为。
• 查看更多白板回调，点击查看详情。

// 监听错误事件
Board.on('board-error', (errorCode, errorMessage) => {
  console.log(errorCode, errorMessage)
})

// 监听警告事件
Board.on('board-warning', (errorCode, errorMessage) => {
  console.log(errorCode, errorMessage)
})

// 白板历史数据同步完成回调
Board.on('data-sync-completed', () => {
  console.log('data-sync-completed')
})

设置画笔类型

在加入频道之后，我们需要设置画笔类型

Board.setBrushType(0)

清空当前白板页数据

• clearBackground: 默认只清除当前白板页的涂鸦，如果 clearBackground 参数为 true，则同时清除涂鸦和背景。

Board.clear(true)

设置当前白板页的背景图片

• image: 背景图片的 url 或者 base64 的图片地址。

  注意事项

  • url 必须是 https 链接
  • 资源必须允许跨域或者允许当前域

Board.setBackgroundImage('https//....')

设置当前白板页的背景颜色

• color: 十六进制的颜色值。例如：#ffffff，不区分大小写，或者 rgba(0, 0, 0, 1)。

Board.setBackgroundColor('#ffffff')

设置画笔颜色

• color: 十六进制的颜色值。例如：#ffffff，不区分大小写，或者 rgba(0, 0, 0, 1)。

Board.setBrushColor('#000')

设置当前白板页的缩放大小

• scale: 白板缩放的大小。比如：100 则为不缩放，范围在 [100 ~ 300] 之间。

Board.setBoardScale(100)

撤销当前白板页操作

• 按从后往前的顺序取消白板页的操作，可撤销涂鸦的形状、画笔、以及形状的移动位置。

Board.undo()

切换到上一页白板

Board.prevBoard()

切换到下一页白板

Board.nextBoard()

添加一页白板

• 只有 fileId 为 DEFAULT 才有效

Board.addBoard()

删除当前白板页

• 只允许删除默认文件（文件 ID 为 DEFAULT）内的白板页，且默认白板页（白板 ID 为 DEFAULT）无法删除。

Board.deleteBoard()

注意事项

选择画笔工具，避免使用 <select> 标签

因为使用 <select> 标签，document.activeElement 会变成 select 对象，画板会无法捕捉到 mouseout 事件，因此会导致激光笔工具再特定情况下移出画板无法删除激光笔。

收不到（或者收到多次）回调

• 检查是否在方法调用后监听的回调，确保回调在调用方法之前注册（监听）。
• 如果收到多次回调，检查是否自己封装的方法中多次监听回调方法（正常回调只需要注册一遍）。

主持人（老师）和观众（学生）

SDK 没有人员身份的标识和逻辑，客户端可以根据自己的业务需求，结合自己的业务系统配合 SDK uid 进行人员权限分配。

橡皮擦

• 可以擦除任何人的画笔痕迹
• 擦除后，该画笔变更为改画笔的临时拥有者，可以对该画笔进行撤销和重做

撤销和重做

• 只能撤销和重做自己的画笔
• 如果自己的画笔被其他人移动了，则该笔仅能被该移动者撤销和重做
• 清空白板（或背景）不允许被撤销和重做

重置画板

• 重置画板会删除所有画板页，仅保留第一页，但是不保留第一页的涂鸦

重连

• 重连时丢失的画笔，SDK 不保存。
• 断网期间进行的绘画，重连后不会同步。