Skip to main content

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

const viewMode = useDyteSelector((meeting) => meeting.participants.viewMode);

Page change

const pageChanged = useDyteSelector(
(meeting) => meeting.participants.pageCount,
);

Active speaker

This event is triggered when a participant becomes active when they starts to speak.

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.

/**
* 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.

/**
* 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.

// 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.

// 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.

// 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.

// 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.

// 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.

EventDescription
peerRequestToJoinStageEmitted when a user has requested to join the webinar meeting.
peerRejectedToJoinStageEmitted when the user's request to join the meeting has been rejected.
peerAcceptedToJoinStageEmitted when the user's request to join the meeting has been accepted
peerStoppedPresentingEmitted when a participant stops presenting in the webinar meeting.
peerStartedPresentingEmitted when a participant starts presenting in the webinar meeting.