乐趣区

关于javascript:云课堂开发实践白板教程

jiezi

随着实时通信技术的一直演进和去年以来疫情的继续影响，越来越多的用户抉择了 云课堂、云会议 ，在线学习和在线散会的习惯逐渐养成。然而场景需要的多样性和用户的爆发式增长也对技术产生了十分大的挑战。
区别于过往在线教育的场景，现有计划更多思考教学的 互动体验、平台多样性、规模经济 等；同样的，相比传统视频会议的计划，现有计划更多思考 演示的互动成果、场景多样性、硬件兼容性。在这些计划中，性能更优、性能更全的实时音视频和互动白板都是必选项。

咱们的第二篇技术教程，就来分享一下 如何在 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 白板高级性能：

Web · Pano 开发者核心​developer.pano.video

Web 白板 API 文档：

RtcWhiteboard · Pano 开发者核心​developer.pano.video

最初，咱们曾经将残缺的Demo 源码上传至 Github，欢送参考，也期待大家能基于 Pano SDK 摸索出不一样的场景实际：

https://github.com/PanoVideo/PanoVideoDemo/tree/main/Web​github.com

退出移动版