随着实时通信技术的不断演进和去年以来疫情的持续影响，越来越多的用户选择了云课堂、云会议，在线学习和在线开会的习惯逐步养成。然而场景需求的多样性和用户的爆发式增长也对技术产生了非常大的挑战。区别于过往在线教育的场景，现有方案更多考虑教学的互动体验、平台多样性、规模经济等；同样的，相比传统视频会议的方案，现有方案更多考虑演示的互动效果、场景多样性、硬件兼容性。在这些方案中，性能更优、功能更全的实时音视频和互动白板都是必选项。
我们的第二篇技术教程，就来分享一下如何在 Web 浏览器端，结合拍乐云 Pano 的互动白板 SDK，实现云课堂和云会议中的白板教学功能。
1、导入 SDK
Web 白板可以单独使用，也可以结合音视频使用。下面以单独使用为例。
开发者可以通过 NPM 快速安装 Pano 白板 Web SDK，也可以到官网下载 SDK JS 文件。
NPM 命令为：
npm install @pano.video/whiteboard
复制代码
2、初始化
通过 new RtcWhiteboard() 初始化 RtcWhiteboard 实例。
const whiteboard = new RtcWhiteboard();
复制代码
3、注册通知
注册监听 SDK 回调的各种通知事件，以便进行相应处理。
以下为部分通知示例，完整的通知列表，请查看 RtcWhiteboard EVENTS。
whiteboard.on(RtcWhiteboard.Events.openStateChanged, data => { ... }); // 白板开启状态变化whiteboard.on(RtcWhiteboard.Events.readyStateChanged, data => { ... }); // 白板就绪状态变化whiteboard.on(RtcWhiteboard.Events.whiteboardContentUpdate, data => { ... }); // 白板内容更新whiteboard.on(RtcWhiteboard.Events.docCreated, data => { ... }); // 文档创建事件whiteboard.on(RtcWhiteboard.Events.messageReceived, data => { ... }); // 收到消息
复制代码
4、加入频
通过 joinChannel 方法加入白板频道，加入成功后即可打开白板。
whiteboard.joinChannel({ appId: '应用的appId', channelId:'白板频道ID', name:'用户名', userId:'用户ID', token:'token' }, () => { // 加入白板频道成功 whiteboard.open(); // 打开白板 }, result => { // 加入白板频道失败，返回的 result 为错误码 })
复制代码
5、工具条
由于不同的开发者有不同的 UI 设计，因此 SDK 不提供涉及 UI 交互的白板工具条。开发者可以自行设计白板工具条，来结合调用 SDK 接口以执行相应的白板操作。官网 Demo 也展示了一个白板工具条及其源码可供设计和开发参考。
6、全局属性
可以设置全局的背景色，以及文字、线条和边框的颜色，文字工具属性、图形工具属性等。
// 设置白板背景色whiteboard.backgroundColor = 'rgba(255, 255, 255, 1)';// 设置文字、线条和边框的颜色whiteboard.strokeStyle = 'rgba(255, 0, 0, 1)';// 字体大小、粗体、斜体whiteboard.fontSize = 14;whiteboard.bold = true;whiteboard.italic = true;// 线条和边框的宽度whiteboard.lineWidth = 5;// 封闭图形（如椭圆和矩形）的填充颜色whiteboard.fillStyle = 'rgba(255, 0, 0, 1)';// 封闭图形填充方式whiteboard.fillType = 'color';
复制代码
7、常用工具
Pano 白板的各个工具已经高度封装，只需调用接口设置工具即可直接使用。
whiteboard.setToolType(PanoRtc.Constants.ShapeType.Pen); // 笔（自由绘制）whiteboard.setToolType(PanoRtc.Constants.ShapeType.LaserPointer); // 激光笔whiteboard.setToolType(PanoRtc.Constants.ShapeType.Line); // 直线工具whiteboard.setToolType(PanoRtc.Constants.ShapeType.Arrow); // 箭头工具whiteboard.setToolType(PanoRtc.Constants.ShapeType.Rect); // 矩形工具，按住 Shift 可以绘制正方形whiteboard.setToolType(PanoRtc.Constants.ShapeType.Ellipse); // 椭圆工具，按住 Shift 可以绘制圆形whiteboard.setToolType(PanoRtc.Constants.ShapeType.Text); // 文本工具whiteboard.setToolType(PanoRtc.Constants.ShapeType.Select); // 选择工具，可以框选多个图形whiteboard.setToolType(PanoRtc.Constants.ShapeType.Delete); // 删除选中的图形whiteboard.setToolType(PanoRtc.Constants.ShapeType.Eraser); // 橡皮檫工具
复制代码
8、图片操作
可以通过图片 URL 来设置背景图。
whiteboard.setBackgroundImage('https://domain/path/filename.jpg');
复制代码
也可以通过上传图片来设置背景图，或上传为图片元素。背景图不支持拖拽，图片元素支持拖拽。
调用接口会自动打开文件选择框（是不是很方便周到体贴入微）。
whiteboard.uploadImage(obj => {console.info(obj); // 回调上传进度结果}, false); // false表示不作为背景图而是上传为图片元素
复制代码
9、画板操作
可以通过鼠标和手势进行缩放和移动，也可以通过接口来响应。
// 缩放示例whiteboard.setScale(1.5);// 移动示例whiteboard.setTranslate(100, 100, true, 1000);// 禁用鼠标和手势whiteboard.disableScaleAndMove();
复制代码
10、了解更多
以上内容仅介绍了最基本的接口，完成初步的搭建。Pano SDK 还提供更多丰富的接口和功能，如文档操作、课件操作、视角跟随等。
动效课件和音视频播放
视角跟随 激光笔
详细内容请参考：
互动白板 - 拍乐云Pano_高清实时音视频通信云www.pano.video
Web · Pano开发者中心developer.pano.video
RtcWhiteboard · Pano开发者中心developer.pano.video
最后，我们已经将完整的 Demo 源码上传至 Github，欢迎参考，也期待大家能基于 Pano SDK 探索出不一样的场景实践：
https://github.com/PanoVideo/PanoVideoDemo/tree/main/Webgithub.com
评论