# How to build breakout rooms in the Video SDK for web

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

> Note: The Video SDK now has a [built in breakout room feature set called
> "Subsessions"](/docs/video-sdk/web/subsessions/).

This article demonstrates how to implement a breakout room solution for
the [Video SDK for Web](/docs/video-sdk/web). Similar to Zoom Meetings,
a participant can only be in one Video SDK session at a time,
but you can bounce back and forth between sessions.

## On this page

-   [Initialize the SDK](#initialize-the-sdk)
-   [Join the main session](#join-the-main-session)
-   [Join the breakout session](#join-the-breakout-session)
-   [Return to the main session](#return-to-the-main-session)
-   [List sessions and participants](#list-sessions-and-participants)

## Initialize the SDK

The first step to building a breakout room flow is to initialize the
SDK. You only have to do this once.

```js
client.init("US-en", "CDN");
```

## Join the main session

Join the main session.

```js
function joinMainSession() {
    client.join(topic, signature, userName, password);
}
```

## Join the breakout session

When the time comes to hop into the breakout room, display a button that
says join breakout room or similar. Once clicked, leave the main
session, and join the breakout session.

```js
function joinBreakoutSession() {
    client.leave();
    client.join(topic, signature, userName, password);
}
```

If there is no participant in the main session, it will close after a
session timeout. You can still rejoin it, but `getChatHistory` will not
return the previous messages. Alternatively, you can disable the session
timeout by modifying the `sessionIdleTimeoutMins`. See
the [Reference](/docs/video-sdk/web/reference) for
details. If a participant remains in the main session, it will not
close, so `getChatHistory` will still be available.

As a best practice, you should regenerate the signature each time you
join a session.

## Return to the main session

To return to the main session, leave the breakout session and join the
main session:

```js
function rejoinMainSession() {
    client.leave();
    client.join(topic, signature, userName, password);
}
```

## List sessions and participants

With the APIs, you can display the session information and participants.
This is useful for listing the breakout sessions and the members of each
session.

### GET Sessions

Endpoint: `GET https://api.zoom.us/v2/videosdk/sessions`

Request Header:

```json
{
    "Authorization": "Bearer {{VIDEOSDK_JWT_TOKEN}}"
}
```

Response Body:

```json
{
"from": "2019-08-24",
"to": "2019-08-24",
"page_size": 30,
"next_page_token": "suQA5LvDBnH5No5OYD7mqpJuFzJqUOHK8U2",
"sessions": [
    {
    "id": "sfk/aOFJSJSYhGwk1hnxgw==",
    "session_name": "Main Session",
    "start_time": "2022-08-24T12:15:22Z",
    "end_time": "2022-08-24T14:15:22Z",
    "duration": "30:00",
    "user_count": 10,
    "has_voip": true,
    "has_video": true,
    "has_screen_share": true,
    "has_recording": true,
    "has_pstn": true,
    "session_key": "abc123"
    },
    {
    "id": "asdftFJSJSYhGwk1hnxgw==",
    "session_name": "JavaScript",
    "start_time": "2022-08-24T12:15:22Z",
    "end_time": "2022-08-24T14:15:22Z",
    "duration": "30:00",
    "user_count": 12,
    "has_voip": true,
    "has_video": true,
    "has_screen_share": true,
    "has_recording": true,
    "has_pstn": true,
    "session_key": "def456"
    }
    ...
]
}
```

### Get session participants

To get session participants, send a `GET` request to the
session `/users` endpoint.

Endpoint: `GET https://api.zoom.us/v2/videosdk/sessions/{sessionId}/users`

Request Header:

```json
{
    "Authorization": "Bearer {{VIDEOSDK_JWT_TOKEN}}"
}
```

Response Body:

```json
{
    "page_size": 12,
    "next_page_token": "suQA5LvDBnH5No5OYD7mqpJuFzJqUOHK8U2",
    "users": [
    {
        "id": "32dsfsd4g5gd",
        "name": "exampleuser",
        "device": "Windows",
        "ip_address": "127.0.0.1",
        "location": "New York",
        "network_type": "Wifi",
        "microphone": "Plantronics BT600",
        "speaker": "Plantronics BT600",
        "camera": "FaceTime HD Camera",
        "data_center": "SC",
        "connection_type": "P2P",
        "join_time": "2022-08-24T12:15:22Z",
        "leave_time": "2022-08-24T14:15:22Z",
        "user_key": "myUserKey"
    }
    ...
    ]
}
```

### Session webhooks

You can also receive [webhook
notifications](/docs/api/video-sdk/events/) when
session or participant actions occur, for example, when the session
starts or ends, a participant joins or leaves the session and more.
Webhooks are `POST` requests to your server with JSON payloads. They are
useful for keeping your user interface of session lists and participant
information updated automatically, instead of repeatedly calling the
Video SDK APIs.

Here is an example payload when a participant joins a session.

```json
{
    "event": "string",
    "event_ts": "integer [int64]",
    "payload": {
        "account_id": "string",
        "object": {
            "id": "string",
            "user": {
                "id": "string",
                "name": "string",
                "join_time": "string [date-time]"
            }
        }
    }
}
```

For more information, see the full [Video
SDK API](/docs/api/video-sdk/) and [webhook](/docs/api/video-sdk/events) references.