互动白板 > 快速入门 > Web

Web

最近更新时间: 2022-08-10 11:44:18

本文介绍七牛白板 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 资源，并通过 initConfig({ path: '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 总页数

以上内容是否对您有帮助？