快速创建一个白板
1. 准备index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速上手</title>
<link href="https://res.qcloudtiw.com/board/third/videojs/1.0.0/video-js.min.css" rel="stylesheet">
<script src="https://res.qcloudtiw.com/board/third/videojs/1.0.0/video.min.js"></script>
<!-- axios SDK -->
<script src="https://res.qcloudtiw.com/board/third/axios/axios.min.js"></script>
<!-- COS SDK -->
<script src="https://res.qcloudtiw.com/board/third/cos/5.1.0/cos.min.js"></script>
<!-- TEduBoard SDK -->
<script src="./TEduBoard.min.js"></script>
<style>
#white-board {
width: 600px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="white-board"></div>
</body>
</html>
2. 准备一个userId和userSig
步骤一：登录 即时通讯控制台，单击 SDKAppID 对应的应用。
步骤二：单击【开发辅助工具】->【 UserSig 工具】，输入测试用户名，单击【生成签名（UserSig）】。
3. 创建白板实例
- 将第2步的替换initParams的userId和userSig
var initParams = {
id: 'white-board',
classId: 100,
sdkAppId: 1400127140,
userId: 'xxxxxx',
userSig: 'xxxx'
};
var teduBoard = new TEduBoard(initParams);
4. 监听关键事件
// 监听错误事件
teduBoard.on(TEduBoard.EVENT.TEB_ERROR, (errorCode, errorMessage) => {
console.log('======================: ', 'TEB_ERROR', ' errorCode:', errorCode, ' errorMessage:', errorMessage);
});
// 监听警告事件
teduBoard.on(TEduBoard.EVENT.TEB_WARNING, (warnCode, warnMessage) => {
console.log('======================: ', 'TEB_WARNING', ' warnCode:', warnCode, ' warnMessage:', warnMessage);
});
// 白板历史数据同步完成回调
teduBoard.on(TEduBoard.EVENT.TEB_HISTROYDATA_SYNCCOMPLETED, () => {
console.log('======================: ', 'TEB_HISTROYDATA_SYNCCOMPLETED');
});
- 如果没有监听到错误事件，则说明白板能够正常使用了。
- 注意:针对白板行为的操作，一定要在该事件回调完成后再进行操作，否则无效。如翻页，设置背景色等行为