Skip to content

Commit bd1ee9b

Browse files
vac0224vac0224
committed
Standardize content - Breakout rooms
Standardize headings, tables, properties, run Acrolinx
1 parent 9f378bd commit bd1ee9b

File tree

2 files changed

+57
-31
lines changed

2 files changed

+57
-31
lines changed

‎articles/communication-services/how-tos/calling-sdk/breakoutrooms.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Tutorial - Integrate Microsoft Teams breakout rooms
33
titleSuffix: An Azure Communication Services tutorial
4-
description: Use Azure Communication Services SDKs to access BreakoutRooms.
4+
description: Use Azure Communication Services SDKs to implement Microsoft Teams breakout rooms.
55
author: sravanthivelidandla
66
ms.author: insravan
77
ms.service: azure-communication-services
@@ -11,35 +11,38 @@ ms.date: 07/15/2024
1111
ms.custom: template-how-to
1212
---
1313

14-
# BreakoutRooms
15-
In this article, you learn how to implement Microsoft Teams breakout rooms with Azure Communication Services. This capability allows Azure Communication Services users in Teams meetings to participate in breakout rooms. Teams administrators control availability of breakout rooms in Teams meeting with Teams meeting policy. You can find additional information about breakout rooms in [Teams documentation](https://support.microsoft.com/office/use-breakout-rooms-in-microsoft-teams-meetings-7de1f48a-da07-466c-a5ab-4ebace28e461).
14+
# Breakout rooms
15+
16+
This article describes how to implement Microsoft Teams breakout rooms with Azure Communication Services. This capability enables Azure Communication Services users in Teams meetings to participate in breakout rooms. Teams administrators control the availability of breakout rooms in Teams meeting with Teams meeting policy. You can find additional information about breakout rooms in [Teams documentation](https://support.microsoft.com/office/use-breakout-rooms-in-microsoft-teams-meetings-7de1f48a-da07-466c-a5ab-4ebace28e461).
1617

1718
[!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include-document.md)]
1819

1920
## Prerequisites
2021

21-
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
22-
- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
22+
- An Azure account with an active subscription, see [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
23+
- A deployed Communication Services resource, see [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
2324
- A user access token to enable the calling client. For more information, see [Create and manage access tokens](../../quickstarts/identity/access-tokens.md).
24-
- Teams meeting organizer needs to assign Teams meeting policy that enables breakout rooms.[Teams meeting policy](/powershell/module/teams/set-csteamsmeetingpolicy?view=teams-ps&preserve-view=true)
25-
- Optional: Complete the quickstart to [add voice calling to your application](../../quickstarts/voice-video-calling/getting-started-with-calling.md)
25+
- Teams meeting organizer needs to assign Teams meeting policy that enables breakout rooms, see[Teams meeting policy](/powershell/module/teams/set-csteamsmeetingpolicy?view=teams-ps&preserve-view=true).
26+
- Optional: Complete the quickstart to [add voice calling to your application](../../quickstarts/voice-video-calling/getting-started-with-calling.md).
2627

2728
Only Microsoft 365 Users with Organizer, Co-Organizer, or Breakout Room manager roles can manage the breakout rooms.
2829

2930
## Support
31+
3032
The following tables define support of breakout rooms in Azure Communication Services.
33+
3134
### Identities and call types
32-
The following tables show support of breakout rooms for specific call type and identity.
35+
36+
The following table shows support in breakout rooms for specific call type and identity.
3337

3438
|Identities | Teams meeting | Room | 1:1 call | Group call | 1:1 Teams interop call | Group Teams interop call |
3539
|-----------------------------|---------------|------|----------|------------|------------------------|--------------------------|
3640
|Communication Services user | ✔️ | | | | | |
3741
|Microsoft 365 user | ✔️ | | | | | |
3842

39-
40-
4143
### Operations
42-
The following tables show support of individual APIs in calling SDK to individual identity types.
44+
45+
The following table show support for individual APIs in the calling SDK related to individual identity types.
4346

4447
|Operations | Communication Services user | Microsoft 365 user |
4548
|-----------------------------|------------------------------|-------------------|
@@ -55,14 +58,13 @@ The following tables show support of individual APIs in calling SDK to individua
5558
[2] Microsoft 365 users can use Graph API to participate in breakout room chat. The thread ID of the chat is provided in the assigned breakout room object.
5659

5760
### SDKs
58-
The following tables show support of breakout rooms feature in individual Azure Communication Services SDKs.
61+
62+
The following tables show support for the breakout rooms feature in individual Azure Communication Services SDKs.
5963

6064
| Support status | Web | Web UI | iOS | iOS UI | Android | Android UI | Windows |
6165
|----------------|-----|--------|--------|--------|----------|--------|---------|
6266
| Is Supported | ✔️ | | | | | | |
6367

64-
## Breakout rooms
65-
6668
[!INCLUDE [BreakoutRooms Client-side JavaScript](./includes/breakoutrooms/breakoutrooms-web.md)]
6769

6870
## Next steps

‎articles/communication-services/how-tos/calling-sdk/includes/breakoutrooms/breakoutrooms-web.md

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,40 @@ ms.topic: include
55
ms.date: 07/15/2024
66
ms.author: insravan
77
---
8+
89
[!INCLUDE [Install SDK](../install-sdk/install-sdk-web.md)]
910

11+
## Implement breakout rooms
12+
1013
`BreakoutRooms` is a `feature` of the class `Call`. First you need to import package `Features` from the Calling SDK:
1114

1215
```js
1316
import { Features} from "@azure/communication-calling";
1417
```
1518
### Create breakoutRoom feature
1619

17-
Then you can get the feature API object from the call instance:
20+
Then get the feature API object from the call instance:
21+
1822
```js
1923
const breakoutRoomsFeature = mainMeetingCall.feature(Features.BreakoutRooms);
2024
```
25+
2126
### Subscribe to breakoutRoom events
2227

23-
The `BreakoutRooms` API allows you to subscribe to `BreakoutRooms` events. A `breakoutRoomsUpdated` event comes from a `BreakoutRoomsCallFeature` instance and contains information about the created, updated and assigned breakout rooms.
28+
The `BreakoutRooms` API enables you to subscribe to `BreakoutRooms` events. A `breakoutRoomsUpdated` event comes from a `BreakoutRoomsCallFeature` instance and contains information about the created, updated, and assigned breakout rooms.
29+
30+
To receive breakout room details, subscribe to the `breakoutRoomsUpdated` event.
2431

25-
To receive breakout room details, subscribe to the `breakoutRoomsUpdated` event.
2632
```js
2733
breakoutRoomsFeature.on('breakoutRoomsUpdated', breakoutRoomsUpdatedListener);
2834
```
2935

3036
### Handle breakoutRoom events
3137

32-
Event **breakoutRoomsUpdated** provides instance of one of the following classes as an input parameter. You can use property `type` to distinguish between individual event types.
38+
Event `breakoutRoomsUpdated` provides instance of one of the following classes as an input parameter. You can use property `type` to distinguish between individual event types.
39+
40+
1. Class `BreakoutRoomsEvent`: This event is triggered when a user with the role organizer, co-organizer, or breakout room manager creates or updates the breakout rooms. Microsoft 365 users with role organizer, co-organizer, or breakout room manager can receive this type of event. Developers can use the breakout rooms in property `data` to render details about all breakout rooms. This class has property `type` equal to `"breakoutRooms"`.
3341

34-
1. Class `BreakoutRoomsEvent`: This event is triggered when a user with a role organizer, co-organizer, or breakout room manager creates or updates the breakout rooms. Microsoft 365 users with role organizer, co-organizer or breakout room manager can receive this type of event. Developers can use the breakout rooms in property `data` to render details about all breakout rooms. This class has property `type` equal to `"breakoutRooms"`.
3542
```js
3643
export interface BreakoutRoomsEvent {
3744
/**
@@ -45,7 +52,8 @@ Event **breakoutRoomsUpdated** provides instance of one of the following classes
4552
}
4653
```
4754

48-
2. Class `BreakoutRoomsSettingsEvent`: This event is triggered when a user with a role organizer, co-organizer, or breakout room manager updates the breakout room's settings. Developers can use this information to render the time when breakout room ends or decide whether to render button to join main room. This class has property `type` equal to `"breakoutRoomSettings"`.
55+
2. Class `BreakoutRoomsSettingsEvent`: When a user with a role organizer, co-organizer, or breakout room manager updates the breakout room's settings, it triggers this event. Developers can use this information to render the time when breakout room ends or decide whether to render a button to join main room. This class has property `type` equal to `"breakoutRoomSettings"`.
56+
4957
```js
5058
export interface BreakoutRoomSettingsEvent {
5159
/**
@@ -59,7 +67,7 @@ Event **breakoutRoomsUpdated** provides instance of one of the following classes
5967
}
6068
```
6169

62-
3. Class `AssignedBreakoutRoomsEvent`: This event is triggered when user is assigned to a breakout room, or assigned breakout room is updated. Users can join the breakout room when property `state` is set to `open`, leave the breakout room when property `state` is set to `closed` or render details of the breakout room. This class has property `type` equal to `"assignedBreakoutRoom"`.
70+
3. Class `AssignedBreakoutRoomsEvent`: This event is triggered when user is assigned to a breakout room, or assigned breakout room is updated. Users can join the breakout room when property `state` is set to `open`, leave the breakout room when property `state` is set to `closed`, or render details of the breakout room. This class has property `type` equal to `"assignedBreakoutRoom"`.
6371

6472
```js
6573
export interface AssignedBreakoutRoomEvent {
@@ -74,7 +82,8 @@ Event **breakoutRoomsUpdated** provides instance of one of the following classes
7482
}
7583
```
7684

77-
4. Class `JoinBreakoutRoomsEvent` : This event is triggered when the participant is joining breakout room call. This event can happen when user is automatically moved to breakout room (that is, if `assignedBreakoutRoom` has property `state` set to `open` and `autoMoveParticipantToBreakoutRoom` is set to `true`) or when user explicitly joins breakout room (that is, calls method `join` on the instance `assignedBreakoutRoom` when `autoMoveParticipantToBreakoutRoom` is set to `false`). Property `data` contains the breakout room `call` instance, that developers can use to control breakout room call. This class has property `type` equal to `"join"`.
85+
4. Class `JoinBreakoutRoomsEvent` : This event is triggered when the participant is joining a breakout room call. This event can happen when a user is automatically moved to breakout room (that is, if `assignedBreakoutRoom` has property `state` set to `open` and `autoMoveParticipantToBreakoutRoom` is set to `true`) or when a user explicitly joins a breakout room (that is, calls method `join` on the instance `assignedBreakoutRoom` when `autoMoveParticipantToBreakoutRoom` is set to `false`). Property `data` contains the breakout room `call` instance, that developers can use to control breakout room call. This class has property `type` equal to `"join"`.
86+
7887
```js
7988
export interface JoinBreakoutRoomEvent {
8089
/**
@@ -87,7 +96,9 @@ Event **breakoutRoomsUpdated** provides instance of one of the following classes
8796
data: Call | TeamsCall;
8897
}
8998
```
90-
The following code shows you valuable information received in the breakout room events:
99+
100+
The following code shows the useful information received in the breakout room events:
101+
91102
```js
92103
const breakoutRoomsUpdatedListener = (event) => {
93104
switch(event.type) {
@@ -118,9 +129,11 @@ The following code shows you valuable information received in the breakout room
118129
}
119130
breakoutRoomsFeature.on('breakoutRoomsUpdated', breakoutRoomsUpdatedListener);
120131
```
132+
121133
### List available breakout rooms
122134

123-
Microsoft 365 user with role organizer, co-organizer, or breakout room manager can access all breakout rooms.
135+
Microsoft 365 users with role organizer, co-organizer, or breakout room manager can access all breakout rooms.
136+
124137
```js
125138
const breakoutRooms = breakoutRoomsFeature.breakoutRooms;
126139
breakoutRooms.forEach((room)=>{
@@ -131,6 +144,7 @@ breakoutRooms.forEach((room)=>{
131144
### List invitees
132145

133146
Microsoft 365 user with role organizer, co-organizer, or breakout room manager can access participants assigned to individual breakout rooms.
147+
134148
```js
135149
breakoutRooms.forEach((room)=>{
136150
console.log(`${room.displayName}`);
@@ -143,6 +157,7 @@ breakoutRooms.forEach((room)=>{
143157
### Join breakout room
144158

145159
If the `assignedBreakoutRoom` has property `autoMoveParticipantToBreakoutRoom` set to `true`, then the user is automatically moved to the breakout room when the property `state` is set to `open`. If `autoMoveParticipantToBreakoutRoom` is set to `false`, then use the following code to join breakout room.
160+
146161
This triggers `breakoutRoomsUpdated` event with class `JoinBreakoutRoomsEvent` that has property `type` set as `join`. You can use the instance of a class `call` in property `data` to manage breakout room call.
147162

148163
```js
@@ -177,7 +192,8 @@ console.log(`Participants of the breakoutRoom : <br/>" + breakoutRoomParticipant
177192

178193
### Stop receiving breakout rooms events
179194

180-
Use the following code to stop receiving breakoutRooms events
195+
Use the following code to stop receiving breakoutRooms events.
196+
181197
```js
182198
breakoutRoomsFeature.off('breakoutRoomsUpdated', breakoutRoomsUpdatedListener);
183199
```
@@ -188,43 +204,53 @@ Breakout rooms have the following properties:
188204
```js
189205
const displayName : string = breakoutRoom.displayName;
190206
```
207+
191208
- `displayName` : Name of the breakout room. This property is read-only.
192209

193210
```js
194211
const threadId : string = breakoutRoom.threadId;
195212
```
213+
196214
- `threadId` : You can use chat thread ID to join chat of the breakout room. This property is read-only.
197215

198216
```js
199217
const state : BreakoutRoomState = breakoutRoom.state;
200218
```
219+
201220
- `state` : State of the breakout room. It can be either `open` or `closed`. Users would be able to join the breakout room only when the state is `open`. This property is read-only.
202221

203222
```js
204223
const autoMoveParticipantToBreakoutRoom : boolean = breakoutRoom.autoMoveParticipantToBreakoutRoom;
205224
```
206-
- `autoMoveParticipantToBreakoutRoom` : Boolean value, which indicates whether the users are moved to breakout rooms automatically when the `state` of `assignedBreakoutRoom` is set to `open`. This property is read-only. In the Teams UI settings for breakout rooms, the organizer, co-organizer, or breakout room manager can adjust this specific setting. By setting this option to `true`, participants will be automatically transferred to their designated breakout room. Conversely, if it's set to `false`, the `join` method must be manually invoked to move participants into the breakout room.
225+
226+
- `autoMoveParticipantToBreakoutRoom` : Boolean value, which indicates whether the users are moved to breakout rooms automatically when the `state` of `assignedBreakoutRoom` is set to `open`. This property is read-only. In the Teams UI settings for breakout rooms, the organizer, co-organizer, or breakout room manager can adjust this specific setting. By setting this option to `true`, participants are automatically transferred to their designated breakout room. Conversely, if you set this property to `false`, then you must manually call the `join` method to move participants into the breakout room.
207227

208228
```js
209229
const call : Call | TeamsCall = breakoutRoom.call;
210230
```
211-
- `call` : Breakout room call object. This is returned when the user joins the breakout room call automatically or by calling `join` method on `assignedBreakoutRoom` object. This property is read-only.
231+
232+
- `call` : Breakout room call object. This object is returned when the user joins the breakout room call automatically or by calling `join` method on `assignedBreakoutRoom` object. This property is read-only.
212233

213234
```js
214235
const invitees : Invitee[] = breakoutRoom.invitees;
215236
```
237+
216238
- `invitees` : The list of invitees who are assigned to the breakout room. This property is read-only.
217239

218240
### Breakout room settings
241+
219242
Breakout rooms share setting that has the following properties:
243+
220244
```js
221245
const disableReturnToMainMeeting : boolean = breakoutRoomsSettings.disableReturnToMainMeeting;
222246
```
247+
223248
- `disableReturnToMainMeeting` : Disable participants to return to the main meeting from the breakout room call. This property is read-only. In the Teams UI settings for breakout rooms, the organizer, co-organizer, or breakout room manager can adjust this specific setting to control when the participant of breakout rooms can return to the main meeting.
224249

225250
```js
226251
const roomEndTime : TimestampInfo = breakoutRoomsSettings.roomEndTime;
227252
```
253+
228254
- `roomEndTime`: Breakout room end time set by the Microsoft 365 user with role organizer, co-organizer, or breakout room manager of the main meeting. This property is read-only.
229255

230256
### Troubleshooting
@@ -238,7 +264,5 @@ const roomEndTime : TimestampInfo = breakoutRoomsSettings.roomEndTime;
238264
|412 | 46256| ExpectedError | Unable to join Breakout Room as the room is closed. | Ensure that the `state` of `assignedBreakoutRoom` is `open` and call `breakoutRoomsFeature.assignedBreakoutRoom.join()` method explicitly.|
239265
|412 | 46257| UnexpectedServerError | Unable to resume main meeting. | Follow the instructions defined in the section `Leave breakout room` for manual leaving of breakout room. If the issue persists, gather browser console logs and contact Azure Communication Services support. |
240266
|412| 46258 | UnexpectedClientError | Unable to read breakout room details. | Gather browser console logs and contact Azure Communication Services support. |
241-
|500 | 46259| UnexpectedServerError | Could not hang up the Breakout room call. | Follow the instructions defined in the section `Leave breakout room` for manual leaving of breakout room. |
242-
|412| 46260 | UnexpectedClientError | Cannot join Breakout Room as it is not yet assigned. | Ensure that the `breakoutRoomsFeature.assignedBreakoutRoom` is having the details of the assigned breakout room. Ensure that the `state` of `assignedBreakoutRoom` is `open` and call `breakoutRoomsFeature.assignedBreakoutRoom.join()` method explicitly. |
243-
244-
267+
|500 | 46259| UnexpectedServerError | Couldn't hang up the Breakout room call. | Follow the instructions defined in the section `Leave breakout room` for manual leaving of breakout room. |
268+
|412| 46260 | UnexpectedClientError | Can't join Breakout Room as it isn't yet assigned. | Ensure that the `breakoutRoomsFeature.assignedBreakoutRoom` is having the details of the assigned breakout room. Ensure that the `state` of `assignedBreakoutRoom` is `open` and call `breakoutRoomsFeature.assignedBreakoutRoom.join()` method explicitly. |

0 commit comments

Comments
 (0)