Before that, you need to register an enterprise account in Netless's management console and create an application. Then get the ʻApp Identifier
and ʻAK, SK
of this application, and generate theSDK Token
of this application.
You can read 《Project and Authority》 to understand the specific operation. After success, you will get the following content.
# App Identifier:
-_-AcIBWEeqEdX1jHT9ZPg/i25mN7NEhbum6g
# SDK Token:
NETLESSSDK_YWs9UU9JSkJobEZfYlBPLXdNeSZub25jZT0xNTg3MDkyMzUxMTQ0MDAmcm9sZT0wJnNpZz1mYmUzOTI3MjhkZmVhNTc4MzllZTdhZMxDYMYNzK1k1MxDymYgf1zYmj2RhZYMzY2RhZYMZYZYZYZYXD
This content is just for example, the content is not available, you need to operate it yourself to get your own content.
After that, create a folder to store HTML files and JS files in the future. Then, create a new file named index.html
in this folder, open it with an editor, and insert the following content.
<!DOCTYPE html>
<html>
<head>
<script src="https://sdk.netless.link/white-web-sdk/2.10.3.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div id="whiteboard" style="width: 100%; height: 100vh;"></div>
</body>
</html>
The <div id="whiteboard">
is a placeholder for the interactive whiteboard. Later, you will call the interactive whiteboard SDK method through JavaScript to inject the whiteboard entity into this <div>
.
Then, create a new file named index.js
in this folder. Open it with an editor and insert the following content.
Remember to replace the strings in the first and second lines of the following code with the content you prepared in advance.
var sdkToken = "Read "Apps and Permissions" to obtain SDK Token";
var appIdentifier = "Read "Apps and Permissions" to get App Identifier";
// Construct a Request to create a room
var url = "https://shunt-api.netless.link/v5/rooms";
var requestInit = {
method: "POST",
headers: {
"content-type": "application/json",
"token": sdkToken,
"region": "cn-hz",
},
};
window.fetch(url, requestInit).then(function(response) {
return response.json();
}).then(function(json) {
// Create the room successfully, get the uuid of the room
var roomUUID = json.uuid;
// Construct a Request to apply for Room Token
var url = "https://shunt-api.netless.link/v5/tokens/rooms/" + roomUUID;
var requestInit = {
method: "POST",
headers: {
"content-type": "application/json",
"token": sdkToken,
},
body: JSON.stringify({
"lifespan": 0, // indicates that the Room Token will never expire
"role": "admin", // indicates that Room Token has Admin authority
}),
};
fetch(url, requestInit).then(function(response) {
return response.json();
}).then(function(roomToken) {
// Successfully obtain Room Token of the room
joinRoom(roomUUID, roomToken);
}).catch(function(err) {
console.error(err);
});
}).catch(function(err) {
console.error(err);
});
function joinRoom(roomUUID, roomToken) {
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: appIdentifier,
});
var joinRoomParams = {
uuid: roomUUID,
roomToken: roomToken,
};
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
// Join the room successfully, get the room object
// and turn the previous <div id="whiteboard"/> placeholder into a whiteboard
room.bindHtmlElement(document.getElementById("whiteboard"));
}).catch(function(err) {
// failed to join the room
console.error(err);
});
}
Note for Vue users: Vue hijacks all properties and monitors the changes in the key-value in the properties. However, this monitoring is only useful for simple key-value objects. After the whiteboard is added to the room, the returned room/player object, It is not a pure key-value object, and you cannot directly use this.room = room to bind in Vue. For binding operation, please use this.$room = room.
Finally, open the index.html
file with a browser, and you will see a blank page. Use the mouse to write and draw on the page, if everything goes well, you can see the handwriting.