Events
You can subscribe to events for all participants using
meeting.participants.on()
method. Here are the supported events:
View mode change
Triggered when the View mode changes
- Javascript
- React
meeting.participants.on(
'viewModeChanged',
({ viewMode, currentPage, pageCount }) => {
console.log('view mode changed', viewMode);
},
);
const viewMode = useDyteSelector((meeting) => meeting.participants.viewMode);
Page change
- Javascript
- React
meeting.participants.on(
'pageChanged',
({ viewMode, currentPage, pageCount }) => {
console.log('page changed', currentPage);
},
);
const pageChanged = useDyteSelector(
(meeting) => meeting.participants.pageCount,
);
Active speaker
This event is triggered when a participant becomes active
when they starts to
speak.
- Javascript
- React
meeting.participants.on('activeSpeaker', (participant) => {
console.log(`${participant.id} is currently speaking`);
});
const activeSpeaker = useDyteSelector(
(meeting) => meeting.participants.lastActiveSpeaker,
);
Events on all participants
Instead of subscribing to individual participant events, you can subscribe to a
participant map, such as joined
& active
and get updated when any of the
participant emits an event.
If you want to subscribe to participants when they become active
, you can do
so by subscribing to meetings.participants.active.on('participantJoined')
Participant joined
Trigger an event when any participant joins the meeting.
- Javascript
- React
meeting.participants.joined.on('participantJoined', (participant) => {
console.log(`A participant with id "${participant.id}" has joined`);
});
/**
* Returns a list of all joined participants in the meeting
*/
const joinedParticipants = useDyteSelector(
(meeting) => meeting.participants.joined,
);
Alternatively,
meeting.participants.joined.on('participantJoined', (participant) => {
console.log(`A participant with id "${participant.id}" has joined`);
});
Participant left
Trigger an event when any participant leaves the meeting.
- Javascript
- React
meeting.participants.joined.on('participantLeft', (participant) => {
console.log(`A participant with id "${participant.id}" has left the meeting`);
});
/**
* Returns a list of all joined participants in the meeting
*/
const joinedParticipants = useDyteSelector(
(meeting) => meeting.participants.joined,
);
Alternatively,
meeting.participants.joined.on('participantLeft', (participant) => {
console.log(`A participant with id "${participant.id}" has left the meeting`);
});
Participant pinned
Trigger an event when a participant is pinned.
- Javascript
- React
meeting.participants.joined.on('pinned', (participant) => {
console.log(`Participant with id "${participant.id}" was pinned`);
});
// Returns a list of all pinned participants in the meeting, to listen to pinned event check the Javascript event
const pinnedParticipants = useDyteSelector(
(meeting) => meeting.participants.pinned,
);
Participant unpinned
Trigger an event when a participant is unpinned.
- Javascript
- React
meeting.participants.joined.on('unpinned', (participant) => {
console.log(`Participant with id "${participant.id}" was unpinned`);
});
// Returns a list of all pinned participants in the meeting, to listen to pinned event check the Javascript event
const pinnedParticipants = useDyteSelector(
(meeting) => meeting.participants.pinned,
);
Video update
Trigger an event when any participant starts / stops video.
- Javascript
- React
meeting.participants.joined.on('videoUpdate', (participant) => {
console.log(
`A participant with id "${participant.id}" updated their video track in the meeting`,
);
// Use the video track if it exists
if (participant.videoEnabled) {
// participant.videoTrack
} else {
// handle stop video
}
});
// Check for one participant
const videoEnabled = useDyteSelector(
(m) => m.participants.joined.get(participantId).videoEnabled,
);
// All video enabled participants
const videoEnabledParticipants = useDyteSelector((m) =>
m.participants.joined.toArray().find((p) => p.videoEnabled),
);
Audio update
Trigger an event when any participant starts / stops audio.
- Javascript
- React
meeting.participants.joined.on('audioUpdate', (participant) => {
console.log(
`A participant with id "${participant.id}" updated their audio track in the meeting`,
);
// Use the audio track if it exists
if (participant.audioEnabled) {
// participant.audioTrack
} else {
// handle stop audio
}
});
// Check for one participant
const audioEnabled = useDyteSelector(
(m) => m.participants.joined.get(participantId).audioEnabled,
);
// All audio enabled participants
const audioEnabledParticipants = useDyteSelector((m) =>
m.participants.joined.toArray().find((p) => p.audioEnabled),
);
Screen share update
Trigger an event when any participant starts / stops screen share.
- Javascript
- React
meeting.participants.joined.on('screenShareUpdate', (participant) => {
console.log(
`A participant with id "${participant.id}" updated their screen share in the meeting`,
);
// Use the screen share track if it exists
if (participant.screenShareEnabled) {
// participant.screenShareTrack
} else {
// handle stop screen share
}
});
// Check for one participant
const screensharingParticipant = useDyteSelector((m) =>
m.participants.joined.toArray().find((p) => p.screenShareEnabled),
);
// All screen sharing participants
const audioEnabledParticipants = useDyteSelector((m) =>
m.participants.joined.toArray().find((p) => p.screenShareEnabled),
);
Network quality score
Subscribe to the mediaScoreUpdate
event to monitor network
meeting.participants.joined.on(
'mediaScoreUpdate',
({ participantId, kind, isScreenshare, score, scoreStats }) => {
if (kind === 'video') {
console.log(
`Participant ${participantId}'s ${
isScreenshare ? 'screenshare' : 'video'
} quality score is `,
score,
);
}
if (kind === 'audio') {
console.log(
`Participant ${participantId}'s audio quality score is `,
score,
);
}
if (score < 5) {
console.log(`Participant ${participantId}'s media quality is poor`);
}
},
);
The scoreStats
object contains the statistics that contributed to the calculated media score.
The mediaScoreUpdate
event will be emitted with an object similar to the following example as its first parameter, every few seconds, if any participant's media is being shared.
// Audio Consumer
{
"kind": "audio",
"isScreenshare": false,
"score": 10,
"participantId": "f9b947d2-c9ca-4ea9-839b-c10304b0fffc",
"scoreStats": {
"score": 10,
"packetsLostPercentage": 0,
"jitter": 0.004, // seconds
"isScreenShare": false,
"bitrate": 1595 // bytes per second
}
}
// Video Consumer
{
"kind": "video",
"isScreenshare": false,
"score": 10,
"participantId": "f9b947d2-c9ca-4ea9-839b-c10304b0fffc",
"scoreStats": {
"score": 10,
"frameWidth": 640,
"frameHeight": 480,
"framesPerSecond": 24,
"packetsLostPercentage": 0,
"jitter": 0.002, // seconds
"isScreenShare": false,
"bitrate": 340460 // bytes per second
}
}
Events for specific participant
If you want to subscribe to above events but for a specific participant only,
you can do so by binding event to meeting.participants.joined.get(peerId).on()
method. where the peerId
is the id of the participant that you want to watch.
Webinar events
Here is a list of events that can are emitted for a participants in a WEBINAR
setup.
Event | Description |
---|---|
peerRequestToJoinStage | Emitted when a user has requested to join the webinar meeting. |
peerRejectedToJoinStage | Emitted when the user's request to join the meeting has been rejected. |
peerAcceptedToJoinStage | Emitted when the user's request to join the meeting has been accepted |
peerStoppedPresenting | Emitted when a participant stops presenting in the webinar meeting. |
peerStartedPresenting | Emitted when a participant starts presenting in the webinar meeting. |