Skip to main content

Participant Events

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.

const joinedParticipants = useDyteSelector(
  (meeting) => meeting.participants.joined
);

Participant pinned​

Trigger an event when a participant is pinned / unpinned.

const pinnedParticipants = useDyteSelector(
  (meeting) => meeting.participants.pinned
);

Video update​

Trigger an event when the target participant starts / stops video.

const videoEnabled = useDyteSelector(
  (m) => m.participants.joined.get(participantId).videoEnabled
);

### Audio update

Trigger an event when the target participant starts / stops audio.

```ts
const audioEnabled = useDyteSelector((m) =>
  m.participants.joined.get(participantId).audioEnabled
);

Screen share update​

Trigger an event when the target participant starts / stops screen share.

const screenShareEnabled = useDyteSelector(
  (m) => m.participants.joined.get(participantId).screenShareEnabled
);

Trigger an event when any participant starts / stops screen share.

const screensharingParticipant = 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 }) => {
    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`);
    }
  }
);

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.