接入互动白板

更新时间: 2022/12/15 19:14:24

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

如果需要接入G1的互动白板,请参见 接入G1互动白板G1G2的区别请参见 G1&G2

前提条件

操作步骤

  1. 在本地文件夹中创建互动白板的项目文件夹,并将解压后的互动白板 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.jsToolCollection_vx.x.x.jspptRenderer_vx.x.x.js为互动白板 SDK 的 G2 文件夹中的脚本文件。

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

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

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

    <!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>
    
  2. 在 JS 文件中初始化SDK,并加入房间。

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

    • 以下示例代码中的 appKey、appSecret 请替换为网易云信控制台您的应用对应的 App Key。

    • getAuthInfo 是传入函数,可以直接用 promise.resolve 传入 auth,例如下面示例代码。

    • 您可以自己定义何时向服务器请求 auth ,既可以在调用 getAuthInfo 时获取 auth 并返回,也可以提前获取,缓存下来,然后在 getAuthInfo 中返回。

    const 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()
    })
    
  3. 效果预览。

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

    Hello, World

常见问题

joinRoom 时返回 1403 错误

可能原因

checksum 的值不正确。

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

排查思路

  1. 访问 sha1-online 页面,计算appSecret + Nonce + curTime 的哈希值。

  2. 确认计算得出的哈希值是否和项目代码中的 checksum 的值一致。如果不一致,请检查以下参数的值是否正确:

    • curTime:时间戳的单位为,不是毫秒。
    • appSecret:请登录网易云信控制台,查看 appSecret 的值是否为目标应用的 App Secret

    AppKey.png

  3. 将 checksum 的值替换为正确的哈希值。

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 操作步骤
  • 常见问题
  • joinRoom 时返回 1403 错误