引入资源
创建白板应用,首先要加载白板SDK
脚本。
<!doctype html>
<html lang="en">
<head>
<script src="https://app.yunxin.163.com/webdemo/whiteboard/sdk/WhiteBoardSDK_v3.1.0.js"></script>
<script src="https://app.yunxin.163.com/webdemo/whiteboard/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
文件。将看到下面的页面。
本篇文档内容是否对您有帮助?


此文档对你是否有帮助
×


×