The Agora Interactive Whiteboard SDK provides the state
property in the room
interface to indicate the various states of a room. By reading or modifying the state
property of a room
object, you can change the behavior of the whiteboard or implement custom business logic.
This page describes the different states of an interactive whiteboard room and how to listen for room state changes.
In an Agora interactive whiteboard room, the state
property includes the following fields:
memberState
: The whiteboard tool currently in use. See MemberState. By modifying the memberState
value of the current room, you can switch the whiteboard tool. See Use Whiteboard Tools.broadcastState
: The view mode of the user, as well as the user ID of the host in the room. See BroadcastState.cameraState
: The state of the view, including the coordinates of the center, the width and height, and the scale factor of the view. See CameraState.roomMembers
: The information of all the users in interactive mode (those who have read and write permission) in the room. See RoomMember.sceneState
: The information of the current scene, including the name, index, and path of the scene. See SceneState. By modifying the sceneState
value of the current room, you can switch the scene. See Manage Scenes.globalState
: The global state of the room. See GlobalState. You can use globalState
to implement custom business logic. To get the current room states, you can either read the value of each field, or register a callback to listen for their changes.
To follow the procedure on this page, ensure that you have integrated the Agora Interactive Whiteboard SDK into your project and implemented joining a room. For details, see Join a Whiteboard Room.
The following section extends the Join a Whiteboard Room sample code to show the implementation of getting or listening for room states.
After successfully joining a whiteboard room, to get a room state, you can directly read the corresponding field in the state
property of the room
object.
For example, to get information about the current scene (sceneState
) after joining a room, add the following line to the joinWhiteboard.js
file:
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
// Add the following code to get the path, name, and index of the current scene.
var sceneState = room.state.sceneState;
console.log("scene path:", sceneState.scenePath);
console.log("scene name:", sceneState.sceneName);
console.log("scene index:", sceneState.index);
}).catch(function(err) {
console.error(err);
});
Save the changes, refresh the index.html
page, and open the console of your browser. You can see the following information on the console:
[White] join room success
scene path: /init
scene name: init
scene index: 0
The Agora Interactive Whiteboard SDK provides the onRoomStateChanged
method in RoomCallbacks
to report room state changes. You can register this callback when calling joinRoom
to listen for room state changes in real time.
For example, to listen for changes of broadcastState
, you can add the following code to the joinWhiteboard.js
file:
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "RMmxxxQ",
});
var joinRoomParams = {
uuid: "a7exxxa69",
roomToken: "NETLESSROOM_YWs9xxxNjk",
};
// Define the callback to be listened for.
var roomCallbacks = {
onRoomStateChanged: function onStateChanged(modifyState) {
// When the broadcastState field changes, output the current broadcastState.
if (modifyState.broadcastState) {
console.log(modifyState);
} else {
// Ignore the changes of other fields.
}
},
};
// Register the callback when joining a room.
whiteWebSdk.joinRoom(joinRoomParams, roomCallbacks).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
// Set the view mode of the user as broadcaster.
room.setViewMode("broadcaster");
}).catch(function(err) {
console.error(err);
});
Save the changes, refresh the index.html
page, and open the console of your browser. You can see the following information on the console:
broadcasterId: 409
mode: "broadcaster"