接入G1互动白板

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

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

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

操作步骤

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

  2. 引入互动白板 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>
    
  3. 启动互动白板 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()
    })
    
  4. 效果预览。

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

此文档是否对你有帮助?
有帮助
去反馈
  • 操作步骤