diff --git a/docs/angular-ui-kit/components/dyte-network-indicator.mdx b/docs/angular-ui-kit/components/dyte-network-indicator.mdx index 04f3b942f..9e402b782 100644 --- a/docs/angular-ui-kit/components/dyte-network-indicator.mdx +++ b/docs/angular-ui-kit/components/dyte-network-indicator.mdx @@ -11,7 +11,7 @@ A component that indicates poor network connection. It listens to the mediaScoreUpdate event of the passed participant to get the score. ```tsx - (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => { + (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => { console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`); }); ``` diff --git a/docs/partials/events/_participant-media-score-update.mdx b/docs/partials/events/_participant-media-score-update.mdx new file mode 100644 index 000000000..053b00c9c --- /dev/null +++ b/docs/partials/events/_participant-media-score-update.mdx @@ -0,0 +1,67 @@ +Subscribe to the `mediaScoreUpdate` event to monitor network + +```ts +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 + } +} +``` \ No newline at end of file diff --git a/docs/partials/events/_self-media-score-update.mdx b/docs/partials/events/_self-media-score-update.mdx new file mode 100644 index 000000000..34db890a5 --- /dev/null +++ b/docs/partials/events/_self-media-score-update.mdx @@ -0,0 +1,61 @@ +Subscribe to the `mediaScoreUpdate` event to monitor network + +```ts +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 + } +} +``` \ No newline at end of file diff --git a/docs/react-ui-kit/components/dyte-network-indicator.mdx b/docs/react-ui-kit/components/dyte-network-indicator.mdx index 16fa65d53..39317af7c 100644 --- a/docs/react-ui-kit/components/dyte-network-indicator.mdx +++ b/docs/react-ui-kit/components/dyte-network-indicator.mdx @@ -15,7 +15,7 @@ A component that indicates poor network connection. It listens to the mediaScoreUpdate event of the passed participant to get the score. ```tsx - (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => { + (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => { console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`); }); ``` diff --git a/docs/react-web-core/local-user/events.mdx b/docs/react-web-core/local-user/events.mdx index 791b06211..7b14b422f 100644 --- a/docs/react-web-core/local-user/events.mdx +++ b/docs/react-web-core/local-user/events.mdx @@ -97,26 +97,10 @@ meeting.self.on('deviceUpdate', ({ device }) => { ## Network quality score -Subscribe to the `mediaScoreUpdate` event to monitor network +import SelfMediaScoreUpdate from '@site/docs/partials/events/_self-media-score-update.mdx' -```ts -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 diff --git a/docs/react-web-core/participants/events.mdx b/docs/react-web-core/participants/events.mdx index dccdea232..1d6f85bf0 100644 --- a/docs/react-web-core/participants/events.mdx +++ b/docs/react-web-core/participants/events.mdx @@ -111,34 +111,12 @@ const screensharingParticipant = useDyteSelector((m) => ## Network quality score -Subscribe to the `mediaScoreUpdate` event to monitor network +import ParticipantMediaScoreUpdate from '@site/docs/partials/events/_participant-media-score-update.mdx' + + + + -```ts -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 diff --git a/docs/ui-kit/components/dyte-network-indicator.mdx b/docs/ui-kit/components/dyte-network-indicator.mdx index f001aade3..a1c629137 100644 --- a/docs/ui-kit/components/dyte-network-indicator.mdx +++ b/docs/ui-kit/components/dyte-network-indicator.mdx @@ -23,7 +23,7 @@ A component that indicates poor network connection. It listens to the mediaScoreUpdate event of the passed participant to get the score. ```tsx -participant.addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => { +participant.addListener('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => { console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`); }); ``` diff --git a/docs/web-core/local-user/events.mdx b/docs/web-core/local-user/events.mdx index 91cd598e5..1354a02ec 100644 --- a/docs/web-core/local-user/events.mdx +++ b/docs/web-core/local-user/events.mdx @@ -139,26 +139,9 @@ meeting.self.on('deviceUpdate', ({ device }) => { ## Network quality score -Subscribe to the `mediaScoreUpdate` event to monitor network +import SelfMediaScoreUpdate from '@site/docs/partials/events/_self-media-score-update.mdx' -```ts -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'); - } -}); -``` + Web Core Events diff --git a/docs/web-core/participants/events.mdx b/docs/web-core/participants/events.mdx index 5f47590cb..9e5f7cd6f 100644 --- a/docs/web-core/participants/events.mdx +++ b/docs/web-core/participants/events.mdx @@ -151,34 +151,9 @@ meeting.participants.joined.on('screenShareUpdate', (participant) => { ## Network quality score -Subscribe to the `mediaScoreUpdate` event to monitor network +import ParticipantMediaScoreUpdate from '@site/docs/partials/events/_participant-media-score-update.mdx' -```ts -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