1.3.6 • Published 2 years ago
twhiteboard-ui v1.3.6
腾讯云互动白板 3.0 UI
接入流程
- 开通服务，拿到
SecretID/SecretKey，用于业务后台后续调用白板后台接口时的签名。 - 业务后台调用白板后台
CreateApp接口创建应用，拿到AppID/AppSecretKey，用于后续进房用户token的签发。 - 业务后台在客户端请求时调用白板后台
CreateRoom、ModifyUserRole接口，用于创建房间、修改用户角色。 - 客户端集成白板组件。
组件集成
- NPM包安装
npm i @tencent/whiteboard @tencent/whiteboard-ui --registry https://mirrors.tencent.com/npm/- HTML代码修改
<html>
<head>
<!---嵌入依赖资源--->
<link rel="stylesheet" href="https://res.qcloudtiw.com/sketch/css/font/family.css">
<link rel="stylesheet" href="https://res.qcloudtiw.com/sketch/css/materialdesignicons.min.css">
<script src="https://res.qcloudtiw.com/sketch/libs/pdf/pdf.min.js"></script>
</head>
<body>
<!---创建DOM节点用于嵌入白板--->
<div id="whiteboard"></div>
</body>
</html>- JS代码修改
// CommonJS 包引入
const newWhiteBoardUI = require('@tencent/whiteboard-ui');
// ESModule 包引入
import newWhiteBoardUI from '@tencent/whiteboard-ui';
// 调用业务后台接口创建房间
const roomId = await createRoom();
// 调用业务后台接口获取签名
const token = await getToken('用户名', '密码');
// 调用业务后台接口修改角色授权
await modifyUserRole('用户名', 'admin');
// 初始化白板
newWhiteBoardUI('#whiteboard', {
roomId,
token,
});- 样式引入
<style>
@import '@tencent/whiteboard-ui/style.css';
</style>