How to build breakout rooms in the Video SDK for web

Note: The Video SDK now has a built in breakout room feature set called "Subsessions".

This article demonstrates how to implement a breakout room solution for the Video SDK for 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.

Initialize the SDK

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

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

Join the main session

Join the main session.

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.

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

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:

{
    "Authorization": "Bearer {{VIDEOSDK_JWT_TOKEN}}"
}

Response Body:

{
"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:

{
    "Authorization": "Bearer {{VIDEOSDK_JWT_TOKEN}}"
}

Response Body:

{
    "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 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.

{
    "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 and webhook references.