# Manage room state (/en/realtime-media/whiteboard/build/manage-room-state-and-events/room-state-management)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

The 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 feature is for Web only.

This page describes the different states of an interactive whiteboard room and how to listen for room state changes.

## Understand the tech [#understand-the-tech]

In an interactive whiteboard room, the `state` property includes the following fields:

* [`memberState`](/en/api-reference/whiteboard/web): The whiteboard tool currently in use. By modifying the `memberState` value of the current room, you can switch the whiteboard tool. See [Use Whiteboard Tools](../draw-and-edit-content/whiteboard-tools.mdx).
* [`broadcastState`](/en/api-reference/whiteboard/web): The view mode of the user, as well as the user ID of the host in the room.
* [`cameraState`](/en/api-reference/whiteboard/web): The state of the view, including the coordinates of the center, the width and height, and the scale factor of the view.
* [`roomMember`](/en/api-reference/whiteboard/web).: The information of all the users in interactive mode (those who have read and write permission) in the room.
* [`sceneState`](/en/api-reference/whiteboard/web): The information of the current scene, including the name, index, and path of the scene. By modifying the `sceneState` value of the current room, you can switch the scene. See [Manage Scenes](../display-files-and-manage-scenes/scenes/manage-scenes.mdx).
* [`globalState`](/en/api-reference/whiteboard/web): The global state of the room. 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.

## Prerequisites [#prerequisites]

To follow the procedure on this page, ensure that you have integrated the Whiteboard SDK into your project and implemented joining a room. For details, see [Join the Whiteboard Room](../set-up-and-build-your-first-app/get-started-uikit/#join-the-whiteboard-room).

The following section extends the [Join a Whiteboard Room](../set-up-and-build-your-first-app/get-started-sdk/#join-the-interactive-whiteboard-room-from-your-app-client) sample code to show the implementation of getting or listening for room states.

## Implement room state management [#implement-room-state-management]

### Read the value of a state [#read-the-value-of-a-state]

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:

```javascript
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:

```json
[White] join room success
scene path: /init
scene name: init
scene index: 0
```

### Use callbacks to listen for state changes [#use-callbacks-to-listen-for-state-changes]

The 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:

```javascript
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:

```text
broadcasterId: 409
mode: "broadcaster"
```

## API reference [#api-reference]

* [`roomState`](/en/api-reference/whiteboard/web)
* [`joinRoom`](/en/api-reference/whiteboard/web)
* [`RoomCallbacks`](/en/api-reference/whiteboard/web)