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, () => {});