快速跑通 White 白板 Demo（Web版）
本地环境
macOS Catalina： 版本10.15.4
Visual Studio Code： 版本1.42.1 (可选)
Chrome： 版本 81.0.4044.138(正式版本) (64 位)
准备
- 访问 Netless ，注册账号，并在控制台中获取 SDK Token。
- 进入应用管理页面，获取 APP ID。
开始
- 在 Visual Studio Code（可选）中，新建一个
index.html文件。 - 复制以下代码，并注意替换代码中的 sdkToken 和 appIdentifier 。
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="https://docs.agora.io/favicon.ico">
<!-- 版本号根据最新版本更改即可 -->
<link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/2.8.0.css">
<script src="https://sdk.herewhite.com/white-web-sdk/2.8.0.js"></script>
<script>
//创建新房间，同时获取 RoomToken
var sdkToken = "NETLESSSDK_YWs9b0PTWQ";
var url = 'https://cloudcapiv4.herewhite.com/room?token=' + sdkToken;
var requestInit = {
method: 'POST',
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
name: "房间名称",
limit: 0, // 设置为 0 是不限制，推荐使用设置为 0：房间不限制，从业务上去限制。
mode: "persistent" // 普通房间，无法回放
// mode: "historied"， // 可回放房间
}),
};
// 请求创建房间，并获取 sdk 后端服务器 response
fetch(url, requestInit).then(function(response) {
return response.json();
}).then(function(json) {
console.log(json)
//初始化 SDK
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "121MHjfA",
preloadDynamicPPT: false // 可选,是否预先加载动态 PPT 中的图片，会显著提升用户体验，降低翻页的图片加载时长
//deviceType: "mouse"// 可选, touch or desktop , 默认会根据运行环境进行推断
// ...更多可选参数配置
});
//初始化 房间
whiteWebSdk.joinRoom({
uuid: json.msg.room.uuid,
roomToken: json.msg.roomToken,
},
{
onRoomStateChanged: modifyState => {
console.log(modifyState);
},
onPhaseChanged: phase => {
console.log(phase);
}
}).then(function(room) {
//实时房间实例
window.room = room;
room.bindHtmlElement(document.getElementById("whiteboard"));
}).catch(function(err) {
//初始化房间失败
console.log(e);
})
}).catch(function(err) {
console.error(err);
});
</script>
</head>
<body>
<div id="whiteboard" style="background-color:gray; width: 50%; height: 50vh;"></div>
</body>
</html>
运行程序
-
通过 Open with Live Server 运行
看到浏览器访问路径为http://127.0.0.1:5500/index.html，稍等片刻，鼠标变为画笔形状后，即可开始进行涂鸦。
-
通过 Chrome 浏览器直接打开
index.html。
看到浏览器访问路径为文件在本机上的绝对路径，稍等片刻，鼠标变为画笔形状后，即可开始进行涂鸦。
