云课堂开发实践:在线白板SDK开发教程
随着实时通信技术的不断演进和去年以来疫情的持续影响,越来越多的用户选择了云课堂、云会议,在线学习和在线开会的习惯逐步养成。然而场景需求的多样性和用户的爆发式增长也对技术产生了非常大的挑战。区别于过往在线教育的场景,现有方案更多考虑教学的互动体验、平台多样性、规模经济等;同样的,相比传统视频会议的方案,现有方案更多考虑演示的互动效果、场景多样性、硬件兼容性。在这些方案中,性能更优、功能更全的实时音视频和互动白板都是必选项。
我们的第二篇技术教程,就来分享一下如何在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/Webgithub.com
云课堂开发实践:在线白板SDK开发教程相关推荐
- 【云原生】设备云之基于FlexManager的C#SDK开发案例代码
文章目录 前言 一.C#SDK开发说明 1.软件版本 2.开发依赖 3.引入项目文件 二.示例代码 1.创建全局变量 2.创建IFBoxClientManager.ILogger实例并初始化. 3.开 ...
- 云课堂HTML5作业,在线考试|钉钉云课堂,实现智能批改作业试卷!
钉钉的 "云课堂"的主要功能是在线学习,管理员或发布者发布文章.视频.系列课等内容供大家学习,后台可以统计学习时长,并且进行排名.对于学校来说,它的考试功能是非常强大并且便捷的. ...
- C++ 砺儒云课堂作业 第9章 模块化开发
简答题: 1.用自己的话描述逐步细化的过程. 答:逐步细化就是将一个大问题分成若干个小问题,小问题分解成小小问题,直到一个问题可以用一段小程序实现为止.每个问题的解决过程是一个函数,实现小问题的函数通 ...
- 教育直播APP开发,在线教育系统开发(功能)
受疫情的影响给各行各业的未来发展之路带来更深刻的思考,各行各业都不例外.一方面,不少商户把重心放在线下,线上生意只是起到补充作用,而疫情期间线下生意无法正常开展,倒逼其更加重视线上生意,尤其是玩转线上 ...
- 教育直播APP开发,在线教育系统开发,主要功能
受疫情的影响给各行各业的未来发展之路带来更深刻的思考,各行各业都不例外.一方面,不少商户把重心放在线下,线上生意只是起到补充作用,而疫情期间线下生意无法正常开展,倒逼其更加重视线上生意,尤其是玩转线上 ...
- 小熊派4G开发板初体验SDK开发
小熊派4G开发板初体验 开发板硬件资源介绍 前阵子小熊派发布了一款超高性价比的4G开发板(19.8元包邮),但是板子仅限量1000套.小熊派官方给我送了一块,我们一起来学习学习: 板子做得小巧精致,控 ...
- kinect二次开发_Kinect for Windows SDK开发初体验(二)操作Camera
作者:马宁 Kinect SDK出来之后,不到24小时,很多Geek们已经将自己的示例发布到网上去了.可见,好东西肯定会被大家认可的,不好的东西投入再多的宣传也没用. 这一篇我们就要正式进入Kinec ...
- [相机开发] VC++联合相机SDK开发
SDK的英文全名是:software development kit,翻译成中文的意思就是"软件开发工具包"通俗一点说 就是第三服务商提供的实现软件产品某项功能的开发包.里面就是动 ...
- 【开发实践】美团为什么开发 Kylin On Druid(上)?
前言 在大数据分析领域,Apache Kylin 和 Apache Druid (incubating) 是两个普遍使用的 OLAP 引擎,都具有支持在超大数据上进行快速查询的能力.在一些对大数据分析 ...
最新文章
- go定时器 每天重复_通过测试学习Go:Hello, World
- js复制网站文字追加网站来源,网站版权
- 关于正则表达式的那些个爱恨情仇
- SAP gateway的307重定向
- 20个全屏响应式菜单效果荟萃
- python实现设计模式
- android压缩gif大小,使用手机制作GIF动图,免费无水印、大小可调,安卓、iphone都可以...
- 立帖为据,每日学习一课编程技术
- 如何用GoldWave中文版提取伴奏?
- 最新苹果手机使用iTunes换手机铃声2017
- SVN不能Cleanup的几种解决办法
- 基于Spring Boot+vue的民宿预定管理系统的设计与实现
- git强制覆盖master分支
- 2023南宁师范大学计算机考研信息汇总
- dws公共汇总粒度事实层设计
- 忽略' scanf '的返回值,用属性warn_unused_result声明的疑问
- 站在时代的风口:人工智能时代的思维方式
- G1还有新生代和老年代么?
- 图像的小波变换处理(一)
- 实习-VPN表单-前端后端数据库-1