Netless implements recording and playback functions by recording signaling. Compared with the traditional screen recording mode, only a small amount of bandwidth is required, and high-definition results are output during playback. As long as the parameters are adjusted, Netless Cloud will automatically record the real-time room content.
Up to this chapter, we assume that you have installed the Netless Interactive Whiteboard SDK and introduced the project. If not, you may have skipped the previous chapters. It is strongly recommended to read 《Install》 first.
The tutorial in this chapter will only cover the related content of room state management once. If you want to learn more about related content, you can read 《Recording and Replay》 after reading this chapter.
At the beginning of the room creation, the cloud recording function can be turned on. You can open the room by adding the parameter ʻisRecord: true` when calling the Netless server API to create a room.
var url = "https://shunt-api.netless.link/v5/rooms";
var requestInit = {
method: "POST",
headers: {
"content-type": "application/json",
"token": sdkToken, // SDK Token issued must be prepared in advance
},
body: JSON.stringify({
isRecord: true, // Turn on cloud recording
}),
};
window.fetch(url, requestInit).then(function(response) {
return response.json();
}).then(function(roomJSON) {
// Create the room successfully, get the roomJSON describing the room information
console.log(roomJSON);
}).catch(function(err) {
// Failed, print out Error to analyze why it failed
console.error(err);
});
It is recommended to perform the room creation operation on the business server, not on the front end or the client. In order to demonstrate the complete process, this chapter uses the front-end window.fetch method to call the Netless server API. Do not emulate this behavior in formal web applications.
SDK Token is an important asset of the company and the team. In principle, it can only be generated and used in the business server. **It must not be written on the front end! Never transmit to the front end via the network! ** Otherwise, others can steal the SDK Token through decompilation, packet capture, etc. Once the SDK Token is leaked, it will cause serious security problems.
After it is turned on, all real-time interactions in the room will be automatically recorded by the Netless cloud. For more information about creating room API, please refer to 《Room|Server》.
With the following code, you can create a player instance for playback.
var replayRoomParams = {
room: "Playback room UUID",
roomToken: "Replay Room Token",
beginTimestamp: new Date("2020-01-01 22:00:00").getTime(), // start time of playback
duration: 10 * 60 * 1000, // playback duration (ms), here is 10 minutes
};
whiteWebSdk.replayRoom(replayRoomParams).then(function (player) {
// Obtain the playback data and successfully initialize the player instance
}).catch(function(err) {
// Failed to obtain playback data
console.error(err);
});
Note that there are two parameters beginTimestamp
and duration
. They are used to limit the scope of playback. For example, suppose your product is an online class. The course starts at 08:00 am and ends at 08:45. Then, you can set these two parameters to:
whiteWebSdk.replayRoom({
...otherReplayRoomParams,
beginTimestamp: new Date("2020-01-01 08:00:00").getTime(),
duration: 45 * 60 * 1000,
});
Considering that someone enters the venue early before get out of class and someone stays after class, these people will interact and be recorded. The limited range will exclude the content before 08:00 and the content after 08:45, allowing the playback to focus on the content in the classroom.
If you are not sure whether there is a playback video during this period, you can use the following code to judge.
whiteWebSdk.isPlayable({
room: "Playback room UUID",
roomToken: "Replay Room Token",
beginTimestamp: new Date("2020-01-01 22:00:00").getTime(), // start time of playback
duration: 10 * 60 * 1000, // playback duration (ms), here is 10 minutes
}).then(function (isPlayable) {
// isPlayable is a boolean value, used to judge whether there is playback video during this period
}).catch(function(err) {
// Failed to obtain playback data
console.error(err);
});
After that, we need to display the player on the web page. Before this, you need to prepare whiteboard placeholders in the Dom tree of the web page.
<div id="whiteboard" style="width: 100%; height: 100vh;"></div>
Then, use the following code to display the replayed whiteboard on the web page.
player.bindHtmlElement(document.getElementById("whiteboard"));
After executing the above code, you should only see the empty web page, this is because the first frame has not been loaded yet. You need to execute the following code to start playing.
player.play();
If you use react
to manage web views, there is no need to set whiteboard placeholder <div>
. After getting the player
object, the whiteboard playback page can be displayed by the following code.
JavaScript
import React from "react";
import {PlayerWhiteboard} from "white-react-sdk";
class App extends React.Component {
render() {
var style = {
width: "100%",
height: "100vh",
};
return <PlayerWhiteboard player={player} style={style}/>;
}
}
TypeScript
import * as React from "react";
import {PlayerWhiteboard} from "white-react-sdk";
class App extends React.Component {
public render(): React.ReactNode {
const style = {
width: "100%",
height: "100vh",
};
return <PlayerWhiteboard player={player} style={style}/>;
}
}
Netless interactive whiteboard provides a special SDK for React projects:
white-react-sdk
. This SDK is a superset that can completely replacewhite-web-sdk
.