互动白板

  • 互动白板 > 快速入门 > Web

    Web

    最近更新时间:2022-06-23 10:36:35

    本文介绍七牛白板 WEB 端加入房间和加入白板,且若白板是 ppt/pdf 模式下打开 ppt/pdf 的操作流程

    引入 SDK

    我们提供了两种方式引入方式,您可以直接下载 JS 文件,也可以通过 npm 完成引入

    NPM 安装

    运行下方的命令即可通过 npm 引入我们的 SDK

    $ npm install qnweb-whiteboard
    

    如果想要更新到最新版本或者指定版本,运行下列命令

    $ npm install qnweb-whiteboard@latest
    $ npm install qnweb-whiteboard@2.0.0   # 指定版本
    

    我们更加推荐您使用 yarn 来管理 npm 模块

    通过 yarn add qnweb-whiteboard 引入 SDK,通过 yarn add qnweb-whiteboard@latest 来更新版本

    安装好后,运行以下代码访问 SDK 的入口

    import QNWhiteBoard from "qnweb-whiteboard";
    console.log("current version is", QNWhiteBoard.version);
    

    运行时看到打印的 current version 表示引入成功

    直接导入 JS 文件

    每次发布版本,我们都会将最新的 SDK JS 文件放在我们的 Github 上,点击链接即可获取当前最新的 SDK JS 文件。 所以,每次想要升级版本时,只需要访问我们的 Github 页面,然后替换一下自己的 js 文件即可。

    SDK 的 JS 文件在导入页面后,会自动创建一个全局对象 QNWhiteBoard,这个对象的成员包括了 SDK 所导出的所有模块和对象。

    // 当页面资源加载完成后
    window.onload = () => {
      console.log("current version is", QNWhiteBoard.version);
    }
    

    运行时看到打印的 current version 表示引入成功。

    1. 准备

    • 引入 SDK
    • 引入 webassembly 资源,并通过 client.setBasePath([path]/whiteboardcanvas.html) 来设置白板 iframe 的 src 地址,[path] 为 webassembly 资源部署的路径。
    • 准备一个 div 容器,id 为 iframeBox

    2. 创建实例

    const client = QNWhiteBoard.create();
    const instance = client.createInstance(bucketId);
    

    3. 注册房间回调函数

    client.registerRoomEvent({
    	onJoinSuccess: () => console.log('onJoinSuccess'),
    	onJoinFailed: () => console.log('onJoinFailed'),
    	onRoomStatusChanged: () => console.log('onRoomStatusChanged'),
    })
    

    4. 加入房间

    // 参数: appId, meetingId, userId, token均从服务端获取,可查看开发指南 -> 服务端
    // 加入成功或失败后会调用步骤 3 中注册的回调
    client.joinRoom(appId, meetingId, userId, token);
    

    5. 关闭房间

    client.leaveRoom()
    

    以下流程确保在房间加入成功后使用,比如在 3 中 onJoinSuccess 回调中使用

    6. 创建白板实例

    参数 buckedId 从服务端获取,可查看服务端开发指南

    const instance = client.createInstance(buckedId)
    

    7. 注册白板回调函数

    instantce.registerWhiteBoardEvent({
    	onWhiteBoardOpened: () => console.log('onWhiteBoardOpened'),
    	onWhiteBoardOpenFailed: () => console.log('onWhiteBoardOpenFailed'),
    	onWhiteBoardClosed: () => console.log('onWhiteBoardClosed'),
    })
    // 如果是 ppt 模式,还可注册 ppt 回调函数
    instance.registerPPTEvent({
    	onFileLoadedSuccessful: () => console.log('onFileLoadedSuccessful'),
    	onFileLoadingFailed: () => console.log('onFileLoadingFailed'),
    	onFileStateChanged: (data) => console.log('onFileStateChanged', data),
    })
    // 如果是 pdf 模式,还可注册 pdf 回调函数
    instance.registerPDFEvent({
    	onFileLoadedSuccessful: () => console.log('onFileLoadedSuccessful'),
    	onFileLoadingFailed: () => console.log('onFileLoadingFailed'),
    	onFileStateChanged: (data) => console.log('onFileStateChanged', data),
    })
    

    ppt模式下 onFileStateChanged 回调参数内容如下:

    名称 类型 描述
    no number 当前 ppt 页号
    step number 当前 ppt 动画位置索引
    pageCount number ppt 总页数
    stepCount number ppt 总动画数

    pdf 模式下 onFileStateChanged 回调参数内容如下:

    名称 类型 描述
    currentPage number 当前 pdf 页号
    pageCount number pdf 总页数
    以上内容是否对您有帮助?
  • Qvm free helper
    Close