kgess-mirror/cloudflare-docs
1
0
Fork 0
mirror of https://github.com/cloudflare/cloudflare-docs.git synced 2026-01-11 20:06:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

docs(realtimekit): added realtimekit docs for breakout rooms (#27343)
Some checks are pending
Publish / Production (push) Waiting to run
Details

Browse source
This commit is contained in:
Ravindra Singh Rathor 2026-01-07 08:56:15 +05:30 • committed by GitHub
parent 77cd7a1d44
commit 80c3e28375
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 514 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
src/content/docs/realtime/realtimekit/core/breakout-rooms.mdx Normal file
View file

@ -0,0 +1,144 @@
---
pcx_content_type: content
title: Breakout Rooms
slug: realtime/realtimekit/core/breakout-rooms
sidebar:
order: 15
---
import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro";
import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
import { Render } from "~/components";
<Render file="realtimekit/web/breakout-room-preface" product="realtime" />
### Validate permissions
Before creating breakout rooms, validate the permissions of the current participant to ensure that the participant has the required permissions to create breakout rooms. Incorrect permissions can lead to errors being thrown.
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-permission-check" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-permission-check" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-permission-check" product="realtime" />
</RTKCodeSnippet>
### Create breakout rooms
<RTKSDKSelector />
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-creation-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-creation-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-creation-sdk-api" product="realtime" />
</RTKCodeSnippet>
### Retrieve list of breakout rooms and their participants
If there are more than one host in the room creating breakouts, you can retrieve consolidated list of breakout rooms using the following API.
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-fetch-meetings-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-fetch-meetings-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-creation-sdk-api" product="realtime" />
</RTKCodeSnippet>
### Move participants to breakout rooms
Once you have created breakout rooms, assign participants to the rooms.
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-move-participant-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-move-participant-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-move-participant-sdk-api" product="realtime" />
</RTKCodeSnippet>
### Move participants, with a specific preset, to breakout rooms
Once you have created breakout rooms, assign participants to the rooms.
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-move-preset-participant-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-move-preset-participant-sdk-api" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-move-preset-participant-sdk-api" product="realtime" />
</RTKCodeSnippet>
### Move local participant to breakout room
To move the local participant to a different breakout room or back to the parent meeting, use the same API as for moving other participants, but pass the local participant's ID. The local participant must have the appropriate permissions: `canSwitchConnectedMeetings` to switch between breakout rooms, or `canSwitchToParentMeeting` to return to the parent meeting, if the request was originated by the non-host local participant.
### Handle breakout room events
If a participant has been moved to a breakout room, the `changingMeeting` event is triggered, followed by the `meetingChanged` event. These events are also triggered when a participant switches between the main meeting and breakout rooms. Participants will autojoin the breakout room if they are assigned to it. You won't have to join meeting explicitly.
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-handle-breakout-events" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-handle-breakout-events" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-handle-breakout-events" product="realtime" />
</RTKCodeSnippet>
### Close breakout rooms
You can close/delete the breakout rooms. This will force participants in those meetings to come to the main room.
<RTKCodeSnippet id="web-web-components">
<Render file="realtimekit/web/breakout-room-close-breakout" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-react">
<Render file="realtimekit/web/breakout-room-close-breakout" product="realtime" />
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
<Render file="realtimekit/web/breakout-room-close-breakout" product="realtime" />
</RTKCodeSnippet>
## Next steps
You have successfully integrated breakout rooms into your RealtimeKit application. Participants can now:
- Join the main meeting
- Be assigned to breakout rooms by the host
- Switch between the main meeting and breakout rooms
- Collaborate in smaller focused groups
For more advanced customization, explore the following:
- [UI Kit Components Library](/realtime/realtimekit/ui-kit/component-library/) - Browse available components
- [UI Kit States](/realtime/realtimekit/ui-kit/meeting-lifecycle/) - Learn how components synchronize
- [Build Your Own UI](/realtime/realtimekit/ui-kit/build-your-own-ui/) - Create custom meeting interfaces

317
src/content/docs/realtime/realtimekit/ui-kit/breakout-rooms.mdx
View file

@ -5,106 +5,15 @@ sidebar:
order: 10
---
import { Tabs, TabItem, Render } from "~/components";
import { Render } from "~/components";
import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro";
import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
<Render file="realtimekit/common/default-meeting-examples" product="realtime" />
The breakout rooms feature, also known as connected meetings, is currently in beta, which means it is still being tested and evaluated, and may undergo some changes.
<Render file="realtimekit/web/breakout-room-preface" product="realtime" />
Breakout rooms allow participants of a meeting to split into smaller groups for targeted discussions and collaboration. With the rise of remote work and online learning, breakout rooms have become an essential tool for enhancing engagement and building community in virtual settings. They are an ideal choice for workshops, online classrooms, or when you need to speak privately with select participants outside the main meeting.
:::note
Breakout rooms are currently supported on web only.
:::
## Key features
The following are some of the key features of RealtimeKit's breakout rooms:
- Manage permissions and privileges of hosts and participants using presets
- Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms
- Participants can start and stop video, interact with other participants using chat and polls, and mute/unmute audio
- Record all breakout sessions individually like any other RealtimeKit meeting
## Roles in a breakout room
Roles in the breakout room are managed by presets.
### Host
Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms.
### Participants
As a participant in a breakout room, you can:
- **Switch to Parent Meeting** - Switch back to the main meeting (if you have the required permissions)
- **Switch Connected Meetings** - Move from the main meeting to smaller, focused discussion groups (breakout rooms) for collaboration
- **Collaborate** - Use tools such as chat and polls during breakout sessions
## Audio and video
Each breakout room functions as an independent meeting. When you switch to a breakout room from the main meeting, it automatically switches to the audio and video of the breakout session. You can mute or unmute your audio and start or stop your video at any time during the breakout session, just as you can in the main meeting.
When the breakout session ends, your audio and video automatically switch back to the main meeting.
- If your video was turned on during a breakout session, it will remain on when you return to the main session
- Your audio will be muted when you switch back to the main meeting
## Recording breakout sessions
Each breakout session is a separate session. Each breakout session's recording is stored and managed separately, just like any other RealtimeKit meeting. For more information, refer to [Recording](/realtime/realtimekit/recording-guide/).
## Prerequisites
Before creating breakout rooms:
- **For hosts** - Create a preset with Full Access permissions in Connected Meetings
- **For participants** - Create a preset with Switch to Parent Meeting and/or Switch Connected Meetings permissions in Connected Meetings
## Create a breakout room
Breakout rooms allow the participants to split into separate sessions. The host can create breakout rooms, assign participants, start and close the breakout rooms.
### Step 1: Create presets
A preset is a set of permissions and UI configurations that are applied to hosts and participants. They determine the look, feel, and behavior of the breakout room.
For breakout rooms, you must provide the following permissions for hosts and participants in Connected Meetings:
#### Host
The host preset should have **Full Access** permission in Connected Meetings. This allows the host to:
- Create breakout rooms
- Assign participants to rooms
- Start and close breakout rooms
- Switch between rooms
#### Participants
You can choose to provide the following permissions to participants:
- **Switch Connected Meetings** - Allows participants to move between breakout rooms
- **Switch to Parent Meeting** - Allows participants to return to the main meeting
### Step 2: Save the preset
1. Once you have made all the changes to your preset, click **Save**
2. Enter a name for your preset and click **Save**
3. Your preset is listed - click **Edit** to make any changes
### Step 3: Create a meeting
Create a RealtimeKit meeting using the [Create Meeting API](/api/resources/realtime_kit/subresources/meetings/). This API returns a unique identifier for your meeting.
### Step 4: Add participants
After creating the meeting, add each participant using the [Add Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/). The `presetName` created earlier must be passed in the body of the Add Participant API request.
### Step 5: Start breakout room
### Start breakout room
1. In your RealtimeKit meeting, click **Breakout Rooms**
2. In the Create Breakout dialog, add the number of rooms you want and click **Create**
@ -139,59 +48,13 @@ To assign participants manually:
After setting up breakout rooms via the API, you need to integrate them into your application using the RealtimeKit SDK.
### Step 1: Install the SDK
<RTKSDKSelector />
Install the RealtimeKit SDK:
<Tabs syncKey="realtimeKitFrameworkTabs">
<TabItem label="Web Components">
Add this script tag to your HTML file:
```html
<script type="module">
import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";
defineCustomElements();
</script>
```
</TabItem>
<TabItem label="React">
```bash
npm install @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui
```
</TabItem>
</Tabs>
### Step 2: Initialize the SDK with breakout rooms support
### Initialize the SDK with breakout rooms support
Initialize the SDK and add an event handler for breakout rooms:
<Tabs syncKey="realtimeKitFrameworkTabs">
<TabItem label="Web Components">
```html
<script type="module">
import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";
let meeting = await RealtimeKitClient.init({
authToken: "<participant_auth_token>",
});
// Add event handler for breakout rooms
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
meeting = newMeeting;
document.querySelector("rtk-meeting").meeting = meeting;
});
</script>
```
The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. Update the meeting object reference when this event fires.
</TabItem>
<TabItem label="React">
<RTKCodeSnippet id="web-react">
```jsx
import {
@ -233,47 +96,75 @@ function App() {
The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. In React, the meeting object is automatically managed by the provider.
</TabItem>
</Tabs>
</RTKCodeSnippet>
### Step 3: Render the meeting UI
Use the default meeting UI component which includes built-in breakout room support:
<Tabs syncKey="realtimeKitFrameworkTabs">
<TabItem label="Web Components">
<RTKCodeSnippet id="web-web-components">
```html
<body>
<rtk-meeting id="my-meeting"></rtk-meeting>
<script type="module">
import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";
<script type="module">
import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";
let meeting = await RealtimeKitClient.init({
authToken: "<participant_auth_token>",
});
// Add event handler for breakout rooms
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
meeting = newMeeting;
document.querySelector("rtk-meeting").meeting = meeting;
});
</script>
```
The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. Update the meeting object reference when this event fires.
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
```ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import RealtimeKitClient from '@cloudflare/realtimekit';
import { RtkMeeting } from '@cloudflare/realtimekit-angular';
@Component({
selector: 'app-root',
template: `<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myid') meetingComponent: RtkMeeting;
rtkMeeting: RealtimeKitClient;
async ngAfterViewInit() {
let meeting = await RealtimeKitClient.init({
authToken: "<participant_auth_token>",
authToken: '<participant_auth_token>',
});
// Add event handler for breakout rooms
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
meeting = newMeeting;
document.querySelector("rtk-meeting").meeting = meeting;
if (this.meetingComponent) {
this.meetingComponent.meeting = meeting;
}
});
document.querySelector("rtk-meeting").showSetupScreen = true;
document.querySelector("rtk-meeting").meeting = meeting;
</script>
</body>
this.rtkMeeting = meeting;
if (this.meetingComponent) {
this.meetingComponent.meeting = meeting;
}
}
}
```
:::note
The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. Update the meeting object reference when this event fires.
The Default Meeting UI (`rtk-meeting` component) automatically joins the session, so you do not need to call `meeting.join()`.
</RTKCodeSnippet>
:::
### Render the meeting UI
</TabItem>
<TabItem label="React">
Use the default meeting UI component which includes built-in breakout room support:
<RTKCodeSnippet id="web-react">
```jsx
import {
@ -317,11 +208,95 @@ The Default Meeting UI (`RtkMeeting` component) automatically joins the session,
:::
</TabItem>
</Tabs>
The `showSetupScreen` property controls whether the setup screen is displayed, allowing participants to preview their audio and video before joining the session.
</RTKCodeSnippet>
<RTKCodeSnippet id="web-web-components">
```html
<body>
<rtk-meeting id="my-meeting"></rtk-meeting>
<script type="module">
import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";
let meeting = await RealtimeKitClient.init({
authToken: "<participant_auth_token>",
});
// Add event handler for breakout rooms
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
meeting = newMeeting;
document.querySelector("rtk-meeting").meeting = meeting;
});
document.querySelector("rtk-meeting").showSetupScreen = true;
document.querySelector("rtk-meeting").meeting = meeting;
</script>
</body>
```
:::note
The Default Meeting UI (`rtk-meeting` component) automatically joins the session, so you do not need to call `meeting.join()`.
:::
The `showSetupScreen` property controls whether the setup screen is displayed, allowing participants to preview their audio and video before joining the session.
</RTKCodeSnippet>
<RTKCodeSnippet id="web-angular">
```html
<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>
```
```ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import RealtimeKitClient from '@cloudflare/realtimekit';
import { RtkMeeting } from '@cloudflare/realtimekit-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
@ViewChild('myid') meetingComponent: RtkMeeting;
rtkMeeting: RealtimeKitClient;
async ngAfterViewInit() {
let meeting = await RealtimeKitClient.init({
authToken: '<participant_auth_token>',
});
// Add event handler for breakout rooms
meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
meeting = newMeeting;
if (this.meetingComponent) {
this.meetingComponent.meeting = meeting;
}
});
this.rtkMeeting = meeting;
if (this.meetingComponent) {
this.meetingComponent.meeting = meeting;
}
}
}
```
:::note
The Default Meeting UI (`rtk-meeting` component) automatically joins the session, so you do not need to call `meeting.join()`.
:::
The `showSetupScreen` property controls whether the setup screen is displayed, allowing participants to preview their audio and video before joining the session.
</RTKCodeSnippet>
## Next steps
You have successfully integrated breakout rooms into your RealtimeKit application. Participants can now:

21
src/content/partials/realtime/realtimekit/web/breakout-room-close-breakout.mdx Normal file
View file

@ -0,0 +1,21 @@
---
{}
---
```js
await meeting.connectedMeetings.deleteMeetings([
"MEETING_ID_TO_CLOSE_1",
"MEETING_ID_TO_CLOSE_2",
]);
```
This would also trigger `stateUpdate` event updating the list of breakout rooms & participants.
```js
meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
console.log("stateUpdate", {meetings, parentMeeting});
});
// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object
console.log("Meetings List", meeting.connectedMeetings.meetings);
console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);
```

15
src/content/partials/realtime/realtimekit/web/breakout-room-creation-sdk-api.mdx Normal file
View file

@ -0,0 +1,15 @@
---
{}
---
```js
const breakoutRooms = await meeting.connectedMeetings.createMeetings([
{ title: "Breakout Room 1" },
{ title: "Breakout Room 2" },
{ title: "Breakout Room 3" },
]);
console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));
```
`breakoutRooms` is an array of basic meeting information such as id and title. You can use the `id` of these objects to move participants to the breakout room.

24
src/content/partials/realtime/realtimekit/web/breakout-room-fetch-meetings-sdk-api.mdx Normal file
View file

@ -0,0 +1,24 @@
---
{}
---
```js
const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();
```
`breakoutRoomsInfo` is an object containing the list of breakout rooms and their participants, along with details of the parent meeting.
This data can be used to display the list of breakout rooms & participants in the UI. This API refetches the list of breakout rooms & participants, therefore can be considered the source of truth for breakout rooms & participants. It is advised to call this API, to get the latest list of breakout rooms & participants, if a lot of changes are in progress.
You can also listen to `stateUpdate` event to get the latest list of breakout rooms & participants, as they are updated in real-time.
```js
meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
console.log("stateUpdate", {meetings, parentMeeting});
// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object
console.log("Meetings List", meeting.connectedMeetings.meetings);
console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);
});
```

18
src/content/partials/realtime/realtimekit/web/breakout-room-handle-breakout-events.mdx Normal file
View file

@ -0,0 +1,18 @@
---
{}
---
```js
// Listen to changingMeeting event to show a custom UI to indicate that a meeting switch is happening
meeting.connectedMeetings.on("changingMeeting", (meetingId) => {
console.log("Switching to breakout room or main meeting with id: " + meetingId);
console.log("Show a Custom UI to indicate that a meeting switch is happening");
});
// Listen to meetingChanged event to update the meeting object reference
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
console.log("Switched to breakout room or main meeting");
console.log("Every action now should be performed on this meeting");
});
```

20
src/content/partials/realtime/realtimekit/web/breakout-room-move-participant-sdk-api.mdx Normal file
View file

@ -0,0 +1,20 @@
---
{}
---
```js
// Retrieve list of breakout rooms & participants
const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();
/*
* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.
* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.
*/
// Move participants to breakout rooms
const response = await meeting.connectedMeetings.moveParticipants(
"SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in
"TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved
["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved
);
```

11
src/content/partials/realtime/realtimekit/web/breakout-room-move-preset-participant-sdk-api.mdx Normal file
View file

@ -0,0 +1,11 @@
---
{}
---
```js
const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(
"SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in
"TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved
[{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // array of objects with presetId field
);
```

20
src/content/partials/realtime/realtimekit/web/breakout-room-permission-check.mdx Normal file
View file

@ -0,0 +1,20 @@
---
{}
---
```js
// Check if breakout rooms are supported
const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;
// Check if any breakout rooms are already created
const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;
// Check if the current participant has permission to create breakout rooms
const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;
// Check if the current participant has permission to switch to parent meeting
const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;
// Check if the current participant has permission to switch to connected meeting
const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;
```

95
src/content/partials/realtime/realtimekit/web/breakout-room-preface.mdx Normal file
View file

@ -0,0 +1,95 @@
---
{}
---
:::note
The breakout rooms feature, also known as connected meetings, is currently in beta, which means it is still being tested and evaluated, and may undergo some changes.
:::
Breakout rooms allow participants of a meeting to split into smaller groups for targeted discussions and collaboration. With the rise of remote work and online learning, breakout rooms have become an essential tool for enhancing engagement and building community in virtual settings. They are an ideal choice for workshops, online classrooms, or when you need to speak privately with select participants outside the main meeting.
:::note
Breakout rooms are currently supported on web only.
:::
In RealtimeKit, breakout rooms are created as a separate meeting. Each breakout room is an independent meeting and can be managed like any other RealtimeKit meeting. RealtimeKit provides a set of SDK APIs to create, manage, and switch between breakout rooms.
## Key features
The following are some of the key features of RealtimeKit's breakout rooms:
- Manage permissions and privileges of hosts and participants using presets
- Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms
- Participants can start and stop video, interact with other participants using chat and polls, and mute/unmute audio
- Record all breakout sessions individually like any other RealtimeKit meeting
## Roles in a breakout room
Roles in the breakout room are managed by presets.
### Host
Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms.
### Participants
As a participant in a breakout room, you can:
- **Switch to Parent Meeting** - Switch back to the main meeting (if you have the required permissions)
- **Switch Connected Meetings** - Move from the main meeting to smaller, focused discussion groups (breakout rooms) for collaboration
- **Collaborate** - Use tools such as chat and polls during breakout sessions
## Audio and video
Each breakout room functions as an independent meeting. When you switch to a breakout room from the main meeting, it automatically switches to the audio and video of the breakout session. You can mute or unmute your audio and start or stop your video at any time during the breakout session, just as you can in the main meeting.
When the breakout session ends, your audio and video automatically switch back to the main meeting.
- If your video was turned on during a breakout session, it will remain on when you return to the main session
- If your microphone was on during a breakout session, it will stay on when you return to the main session
## Recording breakout sessions
Each breakout session is a separate session. Each breakout session's recording is stored and managed separately, just like any other RealtimeKit meeting. For more information, refer to [Recording](/realtime/realtimekit/recording-guide/).
## Breakout rooms management
Breakout rooms allow the participants to split into separate sessions. The host can create breakout rooms, assign participants, start and close the breakout rooms.
### Create presets
A preset is a set of permissions and UI configurations that are applied to hosts and participants. They determine the look, feel, and behavior of the breakout room.
For breakout rooms, you must provide the following permissions for hosts and participants in Connected Meetings:
#### Host
The host preset should have **Full Access** permission in Connected Meetings. This allows the host to:
- Create breakout rooms
- Assign participants to rooms
- Start and close breakout rooms
- Switch between rooms
#### Participants
You can choose to provide the following permissions to participants:
- **Switch Connected Meetings** - Allows participants to move between breakout rooms
- **Switch to Parent Meeting** - Allows participants to return to the main meeting
### Save the preset
1. Once you have made all the changes to your preset, click **Save**
2. Enter a name for your preset and click **Save**
3. Your preset is listed - click **Edit** to make any changes
### Create a meeting
Create a RealtimeKit meeting using the [Create Meeting API](/api/resources/realtime_kit/subresources/meetings/). This API returns a unique identifier for your meeting.
### Add participants
After creating the meeting, add each participant using the [Add Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/). The `presetName` created earlier must be passed in the body of the Add Participant API request.