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