Local User - Events

You can subscribe to various events on the local user by calling meeting.self.on(EVENT_NAME).

Meeting joined

Triggered when the join event completes and now the meeting is ready to produce and consume media.

meeting.self.on('roomJoined', () => {
  console.log(
    'User has joined the meeting and ready to produce and consume media'
  );
});

Meeting left

Triggered when the local user leaves the meeting.

meeting.self.on('roomLeft', ({ state }) => {
  // state is a string whose values are explained below
  if (state === 'left') {
    console.log('User has left the meeting');
  }
});

Here are all the possible values of the state variable.

Event	Description
left	Participant has left the meeting.
kicked	Participant is removed from the meeting.
ended	Everyone is removed from the meeting, and the session has ended.
rejected	Participant's request to join the meeting is rejected (when you're in a waiting room).
disconnected	Temporary network disconnection
failed	Failed to join the meeting
connected-meeting	Participant has left this meeting and joined a connected meeting (Breakout meeting)

Video update

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

const videoElem = document.getElementById('my-video');

meeting.self.on('videoUpdate', async ({ videoEnabled, videoTrack }) => {
  if (videoEnabled) {
    const stream = new MediaStream();
    stream.addTrack(videoTrack);
    videoElem.srcObject = stream;
    videoElem.play();
  } else {
    videoElem.stop();
  }
});

Audio update

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

const audioElem = document.getElementById('my-audio');

meeting.self.on('audioUpdate', async ({ audioEnabled, audioTrack }) => {
  if (audioEnabled) {
    const stream = new MediaStream();
    stream.addTrack(audioTrack);
    audioElem.srcObject = stream;
    audioElem.play();
  } else {
    audioElem.stop();
  }
});

Screenshare update

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

const screenElem = document.getElementById('my-screen-share');

meeting.self.on(
  'screenShareUpdate',
  async ({ screenShareEnabled, screenShareTracks }) => {
    if (screenShareEnabled) {
      const stream = new MediaStream();
      stream.addTrack(screenShareTracks.video);
      screenElem.srcObject(stream);
      await screenElem.play();
    } else {
      await screenElem.stop();
    }
  }
);

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

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 media is being shared.

// Audio Producer
{
    "kind": "audio",
    "isScreenshare": false,
    "score": 10,
    "participantId": "c8aa91f6-0316-4025-8240-80d130e5acca", // meeting.self.id
    "scoreStats": {
        "score": 10,
        "bitrate": 22452, // bytes per second
        "packetsLostPercentage": 0,
        "jitter": 0, // seconds
        "isScreenShare": false
    }
}

// Video Producer
{
    "kind": "video",
    "isScreenshare": false,
    "score": 10,
    "participantId": "c8aa91f6-0316-4025-8240-80d130e5acca", // meeting.self.id
    "scoreStats": {
        "score": 10,
        "frameWidth": 640,
        "frameHeight": 480,
        "framesPerSecond": 24,
        "jitter": 0, // seconds
        "isScreenShare": false,
        "packetsLostPercentage": 0,
        "bitrate": 576195, // bytes per second
        "cpuLimitations": false,
        "bandwidthLimitations": false
    }
}

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
});