接入G1互动白板 - 互动白板

开发者中心

互动白板

集成开发

接入G1互动白板

更新时间： 2022/09/22 02:15:57

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

网易云信互动白板全新升级，推荐所有的客户使用互动白板 3.x 产品，同时网易云信也将持续维护互动白板 1.0及2.0 产品。

单击查看接入互动白板G2。
单击查看互动白板旧版文档。

操作步骤

在本地文件夹中创建互动白板的项目文件夹，并将解压后的互动白板 SDK 的脚本文件拷贝至文件夹中。文件目录类似如下：
```
├── index.html
├── scripts
│   └── index.js
│   └── WhiteBoardSDK_IM_vx.x.x.js
│   └── ToolCollection_vx.x.x.js
│   └── pptRenderer_vx.x.x.js
```
WhiteBoardSDK_IM_vx.x.x.js、ToolCollection_vx.x.x.js 和 pptRenderer_vx.x.x.js为互动白板 SDK 中的脚本文件。

引入互动白板 SDK 脚本。

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

html<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 最新SDK请在该地址下载：https://doc.yunxin.163.com/docs/TUxMzkzMjk/DMzNDkxMDc?platformId=70002 -->
        <script src="./scripts/WhiteBoardSDK_IM_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>

启动互动白板 SDK 脚本。

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

jsconst appKey = '应用appKey' // 您可以在应用下AppKey管理中获取
const account = 'im用户账号'
const token = 'im token' 
const nickname = '昵称'
const appSecret = '应用appsecret'

/**
* 该函数用于返回互动白板应用需要的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,
    account: account,
    nickname: nickname,   //非必须
    token: token,
    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，预期可以看到下面的画面：

在线咨询

微信咨询

电话咨询

此文档是否对你有帮助？

有帮助

去反馈

操作步骤