云课堂开发实践：在线白板SDK开发教程.doc

云课堂开发实践：白板SDK开发教程随着实时通信技术的不断演进和去年以来疫情的持续影响，越来越多的用户选择了云课堂、云会议，学习和开会的习惯逐步养成然而场景需求的多样性和用户的爆发式增长也对技术产生了非常大的挑战区别于过往教育的场景，现有方案更多考虑教学的互动体验、平台多样性、规模经济等；同样的，相比传统视频会议的方案，现有方案更多考虑演示的互动效果、场景多样性、硬件兼容性在这些方案中，性能更优、功能更全的实时音视频和互动白板都是必选项我们的第二篇技术教程，就来分享一下如何在Web浏览器端，结合拍乐云Pano的互动白板SDK,实现云课堂和云会议中的白板教学功能1、导入SDKWeb白板可以单独使用，也可以结合音视频使用下面以单独使用为例开发者可以通过NPM快速安装Pano白板WebSDK,也可以到官网下载SDKJS文件NPM命令为：npminstall@pano.video/whiteboard2、初始化通过newRtcWhiteboard()初始化RtcWhiteboard实例constwhiteboard=newRtcWhiteboard();3、注册通知注册监听SDK回调的各种通知事件，以便进行相应处理。

以下为部分通知示例,完整的通知列表,请查看RtcWhiteboardEVENTSwhiteboard.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也展示了一个白板工具条及其源码可供设计和开发参考1^2f-———-召Pano白板iEIJ®I6、全局属性可以设置全局的背景色，以及文字、线条和边框的颜色，文字工具属性、图形工具属性等//设置白板背景色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、了解更多以上内容仅介绍了最基本的接口，完成初步的搭建°PanoSDK还提供更多丰富的接口和功能，如文档操作、课件操作、视角跟随等详细内容请参考：互动白板功能介绍：Web白板咼级功能：・Web白板API文档：最后，我们已经将完整的Demo源码上传至Github,欢迎参考，也期待大家能基于PanoSDK探索出不一样的场景实践：。