Web端互动白板与标注_音视频通信(RTC)-阿里云帮助中心

介绍互动白板/标注功能和应用场景，以及如何通过接入白板接口实现互动白板/标注功能。

简介

白板是RTC应用的一项重要互动技术，可以丰富RTC应用场景，提高互动性。在线上会议、在线教育、远程协作、娱乐互动等场景均有较高使用价值。

DingRTC自研的互动白板同时支持多个平台，接入简单。使用原生渲染技术实现，具有时延低、同步性好、带宽占用小、功能丰富等特点，详细API 可参考RtcWhiteboard与WhiteboardManager。

同时在基于互动白板功能的基础上，可创建标注实例来实现 视频标注、共享标注、外部标注 等功能。

主要功能

支持画笔、直线、箭头、矩形、椭圆、文字等工具，可设置颜色、粗细等样式
可显示图片、支持自定义图章。
支持图形二次编辑或移动，撤销、重做
支持文档转码为图片或PDF显示（需要开通）
可区分角色，可显示协作者名称
白板支持多页及翻页显示，PDF可滚动浏览
支持画布缩放、视角同步与跟随
支持截图保存，云端录制和推流

集成方法

互动白板/标注接入方法

互动白板与标注支持独立使用和配合 dingrtc web sdk 使用两种方式：

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

下面提供集成示例，以ES6 语法为标准：

获取白板管理器并加入频道

// 独立使用
import { WhiteboardManager } from '@dingrtc/whiteboard';

const whiteboardManager = new WhiteboardManager();

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

// 配合 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: '',
});

创建白板/标注对象

指定白板/标注Id和相关初始配置。其中width和height与Id请在各端设置一致，以保持通信以及相同的体验。

白板：

// 配置设置白板视窗宽高与白板是否限定大小
const config = { width: 1280.0, height: 720.0, limit: true };
// 指定白板Id
const whiteboardId = 'xxxxxxx';
// 获取白板实例
const whiteboard = whiteboardManager.getWhiteboard(whiteboardId);
// 初始化视图
whiteboard.initVision(config.width, config.height, config.limit);

标注：

// 配置设置标注视窗宽高与标注是否限定大小
const config = { width: 1280.0, height: 720.0, limit: true };
// 指定标注Id，建议annotationId 可设置包含标注创建人与视频流归属人uid的信息，以方便跨端通信
const annotationId = 'xxxxxxx';
// 获取视频标注实例
const annotation = whiteboardManager.getAnnotation(annotationId, 'video');
// 初始化视图
annotation.initVision(config.width, config.height, config.limit);

打开白板/标注

传入白板/标注窗口Dom节点，调用open()打开白板。

第一个打开白板的用户会触发服务器产生白板创建的广播通知"whiteboard-start"，新加入频道的用户会收到当前已经创建的白板通知。用户可以在收到"whiteboard-start"之后open。

第一个打开标注的用户会触发服务器产生标注创建的广播通知"annotation-start"，新加入频道的用户会收到当前已经创建的标注通知。用户可以在收到"annotation-start"之后open。

说明

调用open()会自动加入对应的白板/标注会话；
标注的容器dom节点请设置其css样式背景色为transparent;

白板：

// 打开白板并加入会话
await whiteboard.open(dom);
// "whiteboard-start"事件
whiteboardManager.on("whiteboard-start", (whiteboardId) => {
  console.log(whiteboardId)
})

标注：

// 打开标注并加入会话
await annotation.open(dom);
// "whiteboard-start"事件
whiteboardManager.on("annotation-start", (annotationId, sourceType) => {
  console.log(annotationId, sourceType)
})

设置白板/标注工具等

import { ToolType } from '@dingrtc/whiteboard'

...
// 白板
whiteboard.setToolType(ToolType.Pen);
whiteboard.setSelectedShapeStyle({
   lineWidth: 5,
});
...
// 标注
annotation.setToolType(ToolType.Pen);
annotation.setSelectedShapeStyle({
   lineWidth: 5,
});

开始绘制

使用鼠标和触摸手势在白板/标注视图上绘制或操作

关闭白板/标注

调用close()接口关闭白板/标注窗口，但会继续同步该白板/标注会话的内容。

调用leave()接口会关闭白板/标注窗口，并断开白板/标注会话的连接，停止内容同步。

调用stop()接口会销毁服务器上的白板/标注会话，并通知所有人该白板/标注已结束，数据会被清空。请谨慎使用。

离开RTC频道也会自动离开相关白板/标注会话。

//关闭白板/标注视图
whiteboard.close();
annotation.close();

//离开白板/标注会话
whiteboard.leave();
annotation.leave();

//结束白板/标注会话
//白板/标注数据会清空，频道内所有人都受影响
whiteboard.stop();
annotation.stop();

// "whiteboard-stop"事件
whiteboardManager.on("whiteboard-stop", (whiteboardId) => {
  console.log(whiteboardId)
})
// "annotation-stop"事件
whiteboardManager.on("annotation-stop", (annotationId, sourceType) => {
  console.log(annotationId, sourceType)
})

另外建议在离开频道时调用whiteboardManager.clear() 方法，清理当前端侧白板/标注实例，避免历史数据对下次入会产生影响，并在下次入会时重新调用getWhiteboard()/getAnnotation()获取新的白板/标注实例。

简介

主要功能

集成方法

相关概念

互动白板/标注接入方法