Integrating Breakout Rooms
Step 1: Install the SDK​
You can install the package using CDN, npm or Yarn.
- npm
- yarn
- CDN
Install the SDK using npm.
npm install @dytesdk/web-core
Install the SDK using yarn.
yarn add @dytesdk/web-core
Add the following script tag in the head of your HTML file.
<script src="https://cdn.dyte.in/core/dyte.js" />
Step 2: Initialize the SDK​
authToken | After you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken. |
let meeting = await DyteClient.init({
authToken,
});
// add additional event handler for breakout rooms
meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
meeting = newMeeting;
});
Step 3: Pass the meeting object to pre-built ui component​
- HTML
- ReactJS
- Angular
<body>
<dyte-meeting id="my-meeting"></dyte-meeting>
<script>
document.getElementById('my-meeting').meeting = meeting;
</script>
</body>
For detailed guide, check out - https://docs.dyte.io/ui-kit/quickstart
<DyteMeeting meeting={meeting} />
For detailed guide, check out - https://docs.dyte.io/react-ui-kit/quickstart
class AppComponent {
title = 'MyProject';
@ViewChild('myid') meetingComponent: DyteMeeting;
dyteMeeting: DyteClient;
async ngAfterViewInit() {
const meeting = await DyteClient.init({
authToken: '<auth-token>',
});
meeting.join();
this.dyteMeeting = meeting;
if (this.meetingComponent) this.meetingComponent.meeting = meeting;
}
}
For detailed guide, check out - https://docs.dyte.io/angular-ui-kit/quickstart