接入互动白板 - 互动白板

开发者中心

互动白板

集成开发

接入互动白板

更新时间： 2024/07/24 13:59:48

本文介绍如何在 Web 端接入互动白板。

如果需要接入G1的互动白板，请参见接入G1互动白板。G1和G2的区别请参见 G1&G2。

前提条件

操作步骤

在本地文件夹中创建互动白板的项目文件夹，并将解压后的互动白板 SDK 的g2文件夹中的WhiteBoardSDK, ToolCollection以及pptRenderer拷贝到scripts文件夹中。文件目录类似如下：
```
├── index.html
├── scripts
│   └── index.js
│   └── WhiteBoardSDK_vx.x.x.js
│   └── ToolCollection_vx.x.x.js
│   └── pptRenderer_vx.x.x.js
```

WhiteBoardSDK_vx.x.x.js、ToolCollection_vx.x.x.js 和 pptRenderer_vx.x.x.js为互动白板 SDK 的 G2 文件夹中的脚本文件。

HTML中引入互动白板 SDK 脚本。

将以下代码复制到 index.html 中。

请修改脚本文件的版本号，使其与 scripts 文件夹中的版本号一致。

html<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 请将以下脚本的路径修改为互动白板SDK在本地的相对路径 -->
        <script src="./scripts/WhiteBoardSDK_vx.x.x.js"></script>
        <script src="./scripts/ToolCollection_vx.x.x.js"></script>
        <!-- 如果需要展示动态ppt，需要添加下面的脚本。动态ppt的工具栏配置请参考进阶教程->文档与页面 -->
        <script src="./scripts/pptRenderer_vx.x.x.js"></script>
        <!-- sha1算法，用于在客户端生成auth。实际开发时，不需要引入下面的脚本，auth应该在服务器生成 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.js"></script>
    </head>
    <body style="width: 100vw; height: 100vh; overflow: hidden; margin: 0;">
        <div id="whiteboard" style="width: 100vw; height: 100vh;"></div>
        <script src='./scripts/index.js'></script>
    </body>
</html>

在 JS 文件中初始化SDK，并加入房间。

将以下代码复制到 index.js 文件中。

以下示例代码中的 appKey、appSecret 请替换为网易云信控制台您的应用对应的 App Key。
getAuthInfo 是传入函数，可以直接用 promise.resolve 传入 auth，例如下面示例代码。
您可以自己定义何时向服务器请求 auth ，既可以在调用 getAuthInfo 时获取 auth 并返回，也可以提前获取，缓存下来，然后在 getAuthInfo 中返回。

jsconst appKey = '应用appKey' // 您可以在网易云信控制台的应用下AppKey管理中获取
const appSecret = '应用appSecret'
const nickname = '昵称'
const uid = 123123          //正整数, 应该小于Number.MAX_SAFE_INTEGER，同一uid多处登录会被互踢。如果需要多端同步，可以设置通过两个不同的 uid 登录。

/**
* 该函数用于返回互动白板应用需要的auth信息。
* 在需要时，互动白板sdk会调用该函数，该函数通过promise将auth交给sdk
*
* 下面代码仅为demo，在实际开发时，请不要将appSecret保存在客户端，这可能会导致appSecret被窃取。实际开发时，可以使用getAuthInfo向服务器请求Auth消息，最后在promise中将auth信息返回给sdk。
*/
function getAuthInfo() {
    const Nonce = 'xxxx'   //任意长度小于128位的随机字符串
    const curTime = Math.round((Date.now() / 1000)) //当前UTC时间戳，从1970年1月1日0点0分0秒开始到现在的秒数
    const checksum = sha1(appSecret + Nonce + curTime)
    return Promise.resolve({
        nonce: Nonce,
        checksum: checksum,
        curTime: curTime
    })
}

const sdk = WhiteBoardSDK.getInstance({
    appKey: appKey,
    nickname: nickname,     //非必须
    uid: uid,
    container: document.getElementById('whiteboard'),
    platform: 'web',
    record: true,   //是否开启录制
    getAuthInfo: getAuthInfo
})

// channel任意字符串。不同端需要进入相同的channel才能够互通
const channel = '821937123'
sdk.joinRoom({
channel: channel,
createRoom: true
})
.then((drawPlugin) => {
    // 允许编辑
    drawPlugin.enableDraw(true)
    // 设置画笔颜色
    drawPlugin.setColor('rgb(243,0,0)')

    // 初始化工具栏
    const toolCollection = ToolCollection.getInstance({
        /**
        * 工具栏容器。应该和白板容器一致
        *
        * 注意工具栏内子元素位置为绝对定位。因此，工具栏外的容器应该设置定位为relative, absolute, 或者fixed。
        * 这样，工具栏才能够正确的显示在容器内部
        */
        container: document.getElementById('whiteboard'),
        handler: drawPlugin,
        options: {
            platform: 'web'
        }
    })
    
    // 显示工具栏
    toolCollection.show()
})

效果预览。

一切设置完毕后，用浏览器打开index.html文件，选择画笔，写上Hello, World，预期可以看到下面的画面。

常见问题

joinRoom 时返回 1403 错误

可能原因

checksum 的值不正确。

checksum 错误时，getAuthInfo 环节不会报错，但是 joinRoom 环节会报 1403 错误。

排查思路

访问 sha1-online 页面，计算appSecret + Nonce + curTime 的哈希值。
确认计算得出的哈希值是否和项目代码中的 checksum 的值一致。如果不一致，请检查以下参数的值是否正确：
- curTime：时间戳的单位为秒，不是毫秒。
- appSecret：请登录网易云信控制台，查看 appSecret 的值是否为目标应用的 App Secret。
将 checksum 的值替换为正确的哈希值。

此文档是否对你有帮助？

有帮助

去反馈

前提条件
操作步骤
常见问题
joinRoom 时返回 1403 错误