Pano开发者中心
  • 文档中心
  • 下载中心

›白板

新手入门

  • 简介
  • 名词解释
  • 账号注册指南
  • 创建第一个应用

规则说明

  • Channel ID命名规则
  • 权限控制
  • 计费说明
  • 最长通话时长说明
  • 每月一万分钟免费说明
  • 布局参数说明

场景方案

    教育行业

    • 1vN互动小班课
    • 互动直播大班课

快速接入

  • 简介
  • 音视频

    • Windows (C++)
    • Android (Java)
    • iOS (Objective-C)
    • Web
    • Electron

    白板

    • Android (Java)
    • iOS (Objective-C)
    • Web

高级功能

  • 简介
  • 音视频

    • 屏幕共享
    • 状态回调
    • 音量指示
    • 混音/伴音
    • 混响
    • 耳返
    • 美颜
    • 音视频数据回调
    • 音视频外部采集
    • 收发多路视频
    • 设备诊断
    • 反馈

    白板

    • Android (Java)
    • iOS (Objective-C)
    • Web

操作实践

  • 切换大小屏

RESTful API

  • 基本格式
  • 获取Token
  • 频道管理
  • 云端录制
  • CDN推流
  • 文档转码
  • 服务端消息通知API

SDK API

  • SDK接口说明
  • Windows (C++)
  • Android (Java)
  • iOS/macOS (Objective-C)
  • Web SDK(IE)
  • Web SDK

    • PanoRtc 参考
    • RtcEngine
    • RtcWhiteboard
    • Constants

更新记录

  • 简介
  • SDK

    • Windows
    • macOS
    • iOS
    • Android
    • Electron
    • Flutter
    • React Native
    • Web
    • Web SDK(IE)
    • Web Whiteboard

    Demo-PanoVideoCall

    • Windows、Mac和Web
    • iOS
    • Android

    Demo-PanoAudioChat

    • iOS
    • Android

帮助

  • FAQ
  • 更多帮助

Web

本文结合部分 SDK API ,介绍如何快速接入白板功能。

如需查看完整 SDK API 列表,请点击左侧导航 SDK API - Web SDK - RtcWhiteboard 部分。

导入SDK

共有 3 种方式来导入白板 SDK。

  • 通过 下载中心 下载完整版 Web SDK 的 JS 文件(含音视频和白板功能),并通过 <script> 标签导入。
    通过 PanoRtc.RtcEngine、PanoRtc.RtcWhiteboard、PanoRtc.Constants 获取相应的模块。

    SDK 需要挂载 DOM,请将导入 SDK 的 <script> 标签添加到 <body> 中,不能添加到 <head> 中。

  • 通过命令行工具执行 npm install @pano.video/panortc 命令获取完整版 Web SDK 包(含音视频和白板功能)。
    通过代码 import PanoRtc from '@pano.video/panortc' 导入完整版SDK。
    通过代码 const { RtcEngine, RtcWhiteboard, Constants } = PanoRtc 解构赋值获取相应的模块。

    如果不解构赋值,也可以换用 PanoRtc.RtcEngine、PanoRtc.RtcWhiteboard、PanoRtc.Constants 获取相应的模块。

  • 通过命令行工具执行 npm install @pano.video/whiteboard 命令获取白板 Web SDK 包(仅白板功能)。
    通过代码 import { RtcWhiteboard, Constants } from '@pano.video/whiteboard' 导入白板SDK并获取相应的模块。

下文示例代码按照 PanoRtc.RtcEngine、PanoRtc.RtcWhiteboard、PanoRtc.Constants 的方式使用。

获取白板实例与加入白板频道

有 2 种方式来获取白板实例并加入白板频道。

  • 方式1:先通过 RtcEngine 实例加入白板频道,再获取白板实例
  • 方式2:先初始化白板实例,再加入白板频道

两种方式使用其中一种即可,不要混用。下面分别介绍这两种方式。

通过RtcEngine实例加入白板频道再获取白板实例

这种方式适用于通过 <script> 标签导入 JS 文件,或者通过 npm 获取完整版 SDK 的情况。
相应处理逻辑为:

  • 先通过 new PanoRtc.RtcEngine(appId) 初始化 RtcEngine 实例。
  • 再通过 RtcEngine 的 joinChannel 方法加入频道。joinChannel 的参数 optionalConfig - joinChannelType 需要配置为:
    • PanoRtc.Constants.whiteboardOnly (只加入白板频道),或者:
    • PanoRtc.Constants.mediaAndWhiteboard (同时加入音视频和白板频道)
  • 当加入频道成功收到 PanoRtc.RtcEngine.Events.whiteboardAvailable 事件时,调用 RtcEngine 的 getWhiteboard 方法获取白板实例。
  • 随后即可调用 RtcWhiteboard 实例的 open 方法打开白板。

初始化白板实例再加入白板频道

这种方式适用于全部 3 种导入白板SDK的情况。
相应处理逻辑为:

  • 先通过 new PanoRtc.RtcWhiteboard() 初始化 RtcWhiteboard 实例。
  • 通过 RtcWhiteboard 的 joinChannel 方法加入白板频道。
  • 在 joinChannel 方法的 onSuccess 回调中即可调用 RtcWhiteboard 实例的 open 方法打开白板。

注册通知

通过 RtcWhiteboard 实例的 on 方法注册回调通知。

// 以下为部分通知示例
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.openStateChanged, data => { ... }); // 白板开启状态变化
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.readyStateChanged, data => { ... }); // 白板就绪状态变化
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.whiteboardContentUpdate, data => { ... }); // 白板内容更新
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.whiteboardFailover, data => { ... }); // 白板断开自动重连状态变化
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.userRoleTypeChanged, data => { ... }); // 当前用户角色类型变化
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.docCreated, data => { ... }); // 文档创建事件
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.docDeleted, data => { ... }); // 文档删除事件
rtcWhiteboard.on(PanoRtc.RtcWhiteboard.Events.messageReceived, data => { ... }); // 收到消息

请按需处理各种事件通知,完整的通知列表,请查看 RtcWhiteboard EVENTS。

工具条

SDK 内部已实现白板工具绘制和数据同步,但是由于不同的开发者有不同的 UI 设计,因此 SDK 不提供涉及 UI 交互的白板工具条。
请开发者自行设计白板工具条,来结合调用 SDK 接口以执行相应的白板操作。
我们也提供包含工具条的 示例代码 供开发者参考。

工具条挂载点

SDK 会自动生成一个 DOM 节点用于挂载外部工具条。此挂载点不是必须的,开发者可以将工具条放置到任何自定义位置。
可以通过 RtcWhiteboard 实例的 toolsWrapper 属性来获取此挂载点。

console.info(rtcWhiteboard.toolsWrapper);

全局属性

白板颜色

背景色

通过 RtcWhiteboard 实例的 backgroundColor 属性来获取和设置白板背景色(仅支持 rgba 格式)。

console.info(rtcWhiteboard.backgroundColor);
rtcWhiteboard.backgroundColor = 'rgba(255, 255, 255, 1)';

白板背景色仅在本地显示,不会同步给其他用户。因此每位用户的白板背景色可以不同。

文字、线条和边框的颜色

通过 RtcWhiteboard 实例的 strokeStyle 属性来获取和设置文字、线条和边框的颜色(仅支持 rgba 格式)。 默认值为:'rgba(33, 212, 183, 1)'。

console.info(rtcWhiteboard.strokeStyle);
rtcWhiteboard.strokeStyle = 'rgba(255, 0, 0, 1)';

设置该属性后,仅对新添加的文字、线条和边框生效。如果需要更新已选择的文字、线条和边框的颜色,请使用 setSelectedShapeStyle 方法。

rtcWhiteboard.setSelectedShapeStyle({strokeStyle: 'rgba(33, 212, 183, 1)'});

适用于文字工具的全局属性

设置 RtcWhiteboard 实例的以下全局属性后,仅对新绘制的图形生效。
如果需要更新已选择的图形,请调用相应的设置方法 setSelectedShapeFontStyle。
详请参考 RtcWhiteboard Properties。

  • fontSize:表示字体大小,number 类型,默认值为:14。
rtcWhiteboard.fontSize = 14;
  • bold:表示是否粗体,boolean 类型,默认值为:false。
rtcWhiteboard.bold = true;
  • italic:表示是否斜体,boolean 类型,默认值为:false。
rtcWhiteboard.italic = true;

适用于图形工具的全局属性

设置 RtcWhiteboard 实例的以下全局属性后,仅对新绘制的图形生效。
如果需要更新已选择的图形,请调用相应的设置方法 setSelectedShapeStyle。
详请参考 RtcWhiteboard Properties。

  • lineWidth:表示线条和边框的宽度,number 类型,默认值为:5。
rtcWhiteboard.lineWidth = 5;
  • fillStyle:表示封闭图形(如椭圆和矩形)的填充颜色,string 类型(仅支持 rgba 格式),默认值为:'rgba(112, 124, 138, 1)'。
rtcWhiteboard.fillStyle = 'rgba(255, 0, 0, 1)';
  • fillType:表示封闭图形填充方式,string 类型,默认值为 'none' 表示不填充,可配置为 'color' 表示填充颜色。
    如果配置为填充颜色,则不再显示边框颜色。
rtcWhiteboard.fillType = 'color';

其他全局属性

  • selectedShape:表示当前被选中的图形
  • scale:表示当前白板视图的缩放比例
  • activeDoc:表示当前激活的文档信息
  • activeDocId:表示当前激活的文档ID
  • role:表示当前用户的角色
  • isAdmin:表示当前用户是否是管理员
console.info(rtcWhiteboard.selectedShape);
console.info(rtcWhiteboard.scale);
console.info(rtcWhiteboard.activeDoc);
console.info(rtcWhiteboard.activeDocId);
console.info(rtcWhiteboard.role);
console.info(rtcWhiteboard.isAdmin);

常用工具

工具类型

设置工具类型

通过 RtcWhiteboard 实例的 setToolType 方法设置工具类型。

rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Pen); // 笔(自由绘制)
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.LaserPointer); // 激光笔
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Line); // 直线工具
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Arrow); // 箭头工具
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Rect); // 矩形工具,按住 Shift 可以绘制正方形
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Ellipse); // 椭圆工具,按住 Shift 可以绘制圆形
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Text); // 文本工具
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Select); // 选择工具,可以框选多个图形
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Delete); // 删除选中的图形
// 橡皮檫工具,可以结合全局属性 lineWidth 控制擦除宽度
rtcWhiteboard.setToolType(PanoRtc.Constants.ShapeType.Eraser);

请在加入白板频道成功后再进行白板操作。

获取工具类型

通过 RtcWhiteboard 实例的 getToolType 方法获取当前工具类型。

rtcWhiteboard.getToolType();

设置工具样式

文本样式

通过 RtcWhiteboard 实例的 setSelectedShapeFontStyle 方法设置当前所选文本的字体样式。
支持 3 个可选参数:fontSize(字体大小)、bold(是否加粗)、italic(是否斜体)。

rtcWhiteboard.setSelectedShapeFontStyle({fontSize: 12, bold: true, italic: true});

形状样式

通过 RtcWhiteboard 实例的 setSelectedShapeStyle 方法设置当前所选形状的样式。
支持 4 个可选参数:

  • lineWidth,线条和边框的宽度,number 类型
  • strokeStyle,线条和边框的颜色,string 类型,仅支持 rgba 格式,如 'rgba(33, 212, 183, 1)'
  • fillStyle,封闭图形(如椭圆和矩形)的填充颜色,string 类型,仅支持 rgba 格式,如 'rgba(112, 124, 138, 1)'
  • fillType,封闭图形填充方式('none' 不填充,'color' 填充颜色,如果设置填充颜色,则不再显示边框颜色。)
rtcWhiteboard.setSelectedShapeStyle({lineWidth: 10, strokeStyle: 'rgba(33, 212, 183, 1)', fillStyle: 'rgba(112, 124, 138, 1)', fillType: 'color'});

撤销与重做

通过 RtcWhiteboard 实例的 undo 方法撤消上一次操作,redo 方法重做上一次被撤销的操作。

rtcWhiteboard.undo();

图片操作

设置背景图片缩放模式

通过 RtcWhiteboard 实例的 setBackgroundImageScalingMode 方法设置背景图片缩放模式。

// WBImageScalingMode 可选值:AutoFill/FillHeight/FillWidth/Fit
rtcWhiteboard.setBackgroundImageScalingMode(PanoRtc.Constants.WBImageScalingMode.AutoFill);

设置背景图片

通过 RtcWhiteboard 实例的 setBackgroundImage(url: string) 方法设置背景图片。

rtcWhiteboard.setBackgroundImage('https://domain/path/filename.jpg');

导入背景图片列表

通过 RtcWhiteboard 实例的 addBackgroundImages(urls: string[], addToCurrentDoc: boolean, docName: string) 方法导入背景图片列表。

  • addToCurrentDoc 参数表示是否添加到当前文档中。
  • (版本 1.2.0+)当 addToCurrentDoc 设置为 false 时, 可以通过 docName 参数指定新文档名称(如果不指定,则 SDK 自动生成文档名称)。
rtcWhiteboard.addBackgroundImages(['https://domain/path/filename1.jpg', 'https://domain/path/filename2.jpg', ...], false, 'NewDoc');

上传图片

通过 RtcWhiteboard 实例的 uploadImage(callback: function, setAsBackground: boolean) 方法上传图片,调用接口会自动打开文件选择框。
setAsBackground 为 true 时上传为背景图,false 时上传为图片元素(背景图不支持拖拽,图片元素支持拖拽)。

rtcWhiteboard.uploadImage(obj => {
  console.info(obj)
}, true);

如需将图片以 URL 格式上传,请使用 RtcWhiteboard 实例的 addImageShape(url: string): Promise‹QResult› 方法。

rtcWhiteboard.addImageShape('https://domain/path/filename.jpg')
.then(obj => console.info(obj))
.catch(error => console.info(error));

多媒体操作

上传音频

通过 RtcWhiteboard 实例的 uploadAudio 方法上传音频文件到当前页面(支持.mp3、.ogg格式)。

  • 调用此方法后,会自动弹出文件选择框。
  • 可以通过选择工具选中控件,进行缩放和移动。
  • 可以按 Delete 键删除生成的音频控件。
rtcWhiteboard.uploadAudio(obj => {
  // obj 中返回 code, state, message或uploadProgress
})

如需将音频以 URL 格式上传,请使用 RtcWhiteboard 实例的 addAudioShape(url: string): Promise‹QResult› 方法。

rtcWhiteboard.addAudioShape('https://domain/path/filename.mp3')
.then(obj => console.info(obj))
.catch(error => console.info(error));

上传视频

通过 RtcWhiteboard 实例的 uploadVideo 方法上传视频文件到当前页面(支持.mp4、.ogg、.webm格式)。

  • 调用此方法后,会自动弹出文件选择框。
  • 可以通过选择工具选中控件,进行缩放和移动。
  • 可以按 Delete 键删除生成的视频控件。
rtcWhiteboard.uploadVideo(obj => {
  // obj 中返回 code, state, message或uploadProgress
})

如需将视频以 URL 格式上传,请使用 RtcWhiteboard 实例的 addVideoShape(url: string): Promise‹QResult› 方法。

rtcWhiteboard.addVideoShape('https://domain/path/filename.mp4')
.then(obj => console.info(obj))
.catch(error => console.info(error));

画板操作

缩放

通过 RtcWhiteboard 实例的 setScale 方法设置当前画板的缩放比例(0.1 - 5,number 类型)。

rtcWhiteboard.setScale(1.5);

移动

通过 RtcWhiteboard 实例的 setTranslate(x: number, y: number, smooth: boolean, duration: number) 方法移动画板。

  • 每次调用,都是基于原始位置进行移动,而不是基于当前位置进行移动。
  • smooth 表示是否平滑移动,duration 表示平滑移动时间(单位毫秒)
rtcWhiteboard.setTranslate(100, 100, true, 1000);

获取位移

通过 RtcWhiteboard 实例的 getTranslate 方法获取画板的位移。

rtcWhiteboard.getTranslate(); // 例如:{x: 100, y: 100}

禁用鼠标和手势

通过 RtcWhiteboard 实例的 disableScaleAndMove 方法禁止通过鼠标和手势缩放和移动画板(仍然可以通过接口操作),enableScaleAndMove 方法启用。

rtcWhiteboard.disableScaleAndMove();

禁用滚轮缩放

通过 RtcWhiteboard 实例的 disableWheelScale 方法禁止通过滚轮缩放画板。

rtcWhiteboard.disableWheelScale();

更新画板尺寸

通过 RtcWhiteboard 实例的 updateCanvasSize 方法更新画板尺寸(当白板容器尺寸发生变化时调用)。
版本 1.2.0+ 支持以下两个属性:

  • autoAdjust:是否自动调整画布内容(默认 true)
  • keepScale:自动调整画布内容时是否保持缩放比例(默认 true)
rtcWhiteboard.updateCanvasSize(true, true);

获取可见区域坐标

通过 RtcWhiteboard 实例的 getViewportPosition 方法获取当前画板可见区域的坐标。

rtcWhiteboard.getViewportPosition();

清除画板内容

通过 RtcWhiteboard 实例的 clearContents(curPage: boolean, type: WBClearType) 方法清除所有用户在画板上的内容(需要管理员权限)。

  • curPage 参数表示是否仅限清除当前页面。
  • type 参数表示清除的内容类型。
    • 为 All 时清除所有用户的所有内容
    • 为 DRAWS 时清除所有用户添加的图形
    • 为 BACKGROUND_IMAGE 时清除所有用户添加的背景图片
rtcWhiteboard.clearContents(false, PanoRtc.Constants.WBClearType.All); // 管理员清除所有页面的所有内容

通过 RtcWhiteboard 实例的 clearUserContents(userId: string, curPage: boolean, clearType: WBClearType) 方法清除特定用户的画板内容。

  • 需要管理员权限才能清除其他用户添加的内容。
  • curPage 参数表示是否仅限清除当前页面。
  • type 参数表示清除的内容类型。
    • 为 All 时清除特定用户的所有内容
    • 为 DRAWS 时清除特定用户添加的图形
    • 为 BACKGROUND_IMAGE 时清除特定用户添加的背景图片
rtcWhiteboard.clearUserContents('10000', false, PanoRtc.Constants.WBClearType.DRAWS); // 管理员清除特定用户添加的图形

关闭白板

通过 RtcWhiteboard 实例的 close 方法关闭白板。可以通过 open 方法重新打开。

rtcWhiteboard.close();

高级功能

请 点此查看 Web 白板的高级功能介绍。

SDK API 指南

更多白板 SDK 接口,请 点此查看 API 列表。

示例代码

为方便开发者了解丰富的接口使用方式,我们还提供示例代码,请 体验参考。

Last updated on 2/7/2021
← iOS (Objective-C)简介 →
  • 导入SDK
  • 获取白板实例与加入白板频道
    • 通过RtcEngine实例加入白板频道再获取白板实例
    • 初始化白板实例再加入白板频道
  • 注册通知
  • 工具条
    • 工具条挂载点
  • 全局属性
    • 白板颜色
    • 适用于文字工具的全局属性
    • 适用于图形工具的全局属性
    • 其他全局属性
  • 常用工具
    • 工具类型
    • 设置工具样式
    • 撤销与重做
  • 图片操作
    • 设置背景图片缩放模式
    • 设置背景图片
    • 导入背景图片列表
    • 上传图片
  • 多媒体操作
    • 上传音频
    • 上传视频
  • 画板操作
    • 缩放
    • 移动
    • 禁用鼠标和手势
    • 禁用滚轮缩放
    • 更新画板尺寸
    • 获取可见区域坐标
    • 清除画板内容
  • 关闭白板
  • 高级功能
  • SDK API 指南
  • 示例代码
浙ICP备20002645号 Copyright ©2020 拍乐云. All Rights Reserved