Local User - Events

Room joined / leave

Trigger an update when the local user joins / leave a room.

const roomJoined = useDyteSelector((meeting) => meeting.self.roomJoined);

Video update

Triggered when the user starts / stops the video using enableVideo or disableVideo

const videoEnabled = useDyteSelector((meeting) => meeting.self.videoEnabled);
const videoTrack = useDyteSelector((meeting) => meeting.self.videoTrack);

useEffect(() => {
  const videoElem = document.getElementById('my-video');
  if (videoEnabled && videoTrack) {
    const stream = new MediaStream();
    stream.addTrack(videoTrack);
    videoElem.srcObject = stream;
    videoElem.play();
  }
}, [videoEnabled, videoTrack]);

Audio update

Triggered when the user starts / stops the audio using enableAudio or disableAudio

const audioEnabled = useDyteSelector((meeting) => meeting.self.audioEnabled);
const audioTrack = useDyteSelector((meeting) => meeting.self.audioTrack);

useEffect(() => {
  const audioElem = document.getElementById('my-audio');
  if (audioEnabled && audioTrack) {
    const stream = new MediaStream();
    stream.addTrack(audioTrack);
    audioElem.srcObject = stream;
    audioElem.play();
  }
}, [audioEnabled, audioTrack]);

Screenshare update

Triggered when the user starts / stops the screen share using enableScreenShare() or disableScreenShare().

const screenShareEnabled = useDyteSelector(
  (meeting) => meeting.self.screenShareEnabled
);
const screenShareTrack = useDyteSelector(
  (meeting) => meeting.self.screenShareTrack
);

Device update

Subscribe to the deviceUpdate event to handle the changing video, audio and speaker devices

meeting.self.on('deviceUpdate', ({ device }) => {
  // handle microphone device change
  if (device.kind === 'audioinput') {
    console.log('mic change', device);
  }
  // handle camera device change
  if (device.kind === 'videoinput') {
    console.log('camera change', device);
  }
  // handle speaker device change
  if (device.kind === 'audiooutput') {
    console.log('speaker change', device);
  }
});

Network quality score

Subscribe to the mediaScoreUpdate event to monitor network

meeting.self.on('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
  if (kind === 'video') {
    console.log(
      `Your ${isScreenshare ? 'screenshare' : 'video'} quality score is `,
      score
    );
  }

  if (kind === 'audio') {
    console.log('Your audio quality score is ', score);
  }

  if (score < 5) {
    console.log('Your media quality is poor');
  }
});

Permission Updates

Triggered when permissions are updated dynamically by a privileged user

Subscribe to chatUpdate, pollsUpdate, pluginsUpdate or * for any kind of permission updates Example:

meeting.self.permissions.on('chatUpdate', () => {
  // Chat permissions are updated
  // check meeting.self.permissions for updated permissions
});