events.mdx

sidebar_position	6

Events

To integrate well with modern JS frameworks and workflows, Dyte SDK also emits a rich set of events on meeting events and state changes. Using these events on the client side, you can make your app event driven and respond to changes in the meeting in real-time. You can subscribe to the following events on the meeting object, which is an instance of Meeting.

Connected to the meeting

This event is triggered when the participant has connected to the meeting but hasn't started producing or consuming content streams. Think of this as establishing a successful connection to the meeting and nothing else.

meeting.on(meeting.Events.connect, () => {});

Joined the meeting

This event is triggered when the participant actually joins the meeting, and can start producing as well as consuming content streams.

meeting.on(meeting.Events.meetingJoined, () => {});

Input media devices get connected to the meeting

This event is triggered when the participant's local media input devices (camera, mic) are initialized and connected to the meeting for the first time. Since the media device states can be toggled only after the device is connected, you need to use this event to manage the starting state of participant's audio or video.

meeting.on(meeting.Events.localMediaConnected, () => {});

Disconnected from the meeting

This event is triggered when the participant gets disconnected from the meeting for any reason. It could be a bad network connection, the meeting being exited by the participant manually, the meeting tab / browser / app being closed by the participant, or just any other reason.

meeting.on(meeting.Events.disconnect, () => {});

End of the meeting

This event is triggered when the meeting is ended by the host or by the organization (as an admin function). In this case, all the participants are kicked out and you can take actions such as asking for feedback or redirecting to an exercise.

meeting.on(meeting.Events.meetingEnded, () => {});

Another participant joins the meeting

This event is triggered when another participant joins the meeting. "Join" here as the same context as the meetingJoined event: so when that event triggers for the a participant, this event triggers for all other participants that have already joined the meeting.

meeting.on(meeting.Events.participantJoin, (participant) => {});

Another participant leaves the meeting

This event is triggered when another participant disconnects from the meeting. "Disconnect" here as the same context as the disconnect event: so when that event triggers for the a participant, this event triggers for all other participants that have already joined the meeting.

meeting.on(meeting.Events.participantLeave, (participant) => {});

Receiving a chat message

This event is triggered when the participant receives a chat message. The chatMessage is an instance of ChatMessage, whose prototype is defined in the reference section and can be directly used as a type if you prefer using TypeScript bindings.

meeting.on(meeting.Events.chatMessage, (chatMessage) => {});

Receiving a custom broadcast event

This event is triggered when a custom message is broadcast to all participants in the meeting. A custom message may contain any serializable data. You can read more on how to send these messages here.

meeting.on(meeting.Events.roomMessage, (message) => {});

Receiving a custom targeted event

This event is triggered when a custom message is targeted to a particular participant in the meeting and only the target participant receives this event. A custom message may contain any serializable data. You can read more on how to send these messages here.

meeting.on(meeting.Events.message, (message) => {});

Detecting change in active speaker

This event is triggered when the active speaker in the meeting changes. Active speaker is the participant whose audio level has most recently been the highest (kind of like LRU with the selection factor being audio level). The participant is an instance of Participant, whose prototype is defined below in the reference section and can be directly used as a type if you prefer using TypeScript bindings.

meeting.on(meeting.Events.activeSpeaker (participant) => {
});

Recording started (version > 0.3.11)

This event is triggered when a recording of the meeting is started by the host or by the organization (as an admin function). You can use this event to show a popup or a warning to the participants about the meeting being recorded.

meeting.on(meeting.Events.recordingStarted, () => {});

Recording stopped (version > 0.3.11)

This event is triggered when a recording of the meeting is started by the host or by the organization (as an admin function). You can use this event to tell the participants about the recording being stopped.

meeting.on(meeting.Events.recordingStopped, () => {});