文档反馈
文档反馈
互动白板 > 快速入门 > Javascript接入

引入资源

创建白板应用，首先要加载白板SDK脚本。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 最新SDK请在该地址下载：http://dev.yunxin.163.com/docs/product/%E4%BA%92%E5%8A%A8%E7%99%BD%E6%9D%BF/%E4%BA%A7%E5%93%81%E7%AE%80%E4%BB%8B/SDK&%E7%A4%BA%E4%BE%8B -->
        <script src="https://app.yunxin.163.com/webdemo/whiteboard/stable/3.1.0/sdk/WhiteBoardSDK_v3.1.0.js"></script>
        <script src="https://app.yunxin.163.com/webdemo/whiteboard/stable/3.1.0/sdk/ToolCollection_v3.1.0.js"></script>
    </head>
    <body style="width: 100vw; height: 100vh; overflow: hidden; margin: 0;">
        <div id="whiteboard" style="width: 100vw; height: 100vh;"></div>
        <script src='./index.js'></script>
    </body>
</html>

<div id="whiteboard"></div>是互动白板的容器。随后，通过调用SDK的方法，将互动白板与该容器绑定。随后，在index.js中输入下面内容：

获取account和token请参考云信IM账号相关文档

const appKey = '应用appKey' // 您可以在应用下AppKey管理中获取
const account = 'im用户账号'
const token = 'im账号密码' 
const nickname = '姓名'

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

// channel可以为8-9位的纯数字。不同端需要进入相同的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({
        /**
        * 工具栏容器。应该和白板容器一致
        */
        container: document.getElementById('whiteboard'),
        handler: drawPlugin,
        options: {
            platform: 'web'
        }
    })

    // 显示工具栏
    toolCollection.show()
})

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

相关文档

相关产品

×

反馈成功

非常感谢您的反馈，我们会继续努力做得更好。
确定