From fc43ad12fa6447fbe3f4e7cd5c28991be99619a3 Mon Sep 17 00:00:00 2001 From: Ravindra Singh Rathor Date: Fri, 29 Nov 2024 13:08:34 +0530 Subject: [PATCH 1/3] docs(media-score-update): added sample score stats objects --- .../components/dyte-network-indicator.mdx | 2 +- .../components/dyte-network-indicator.mdx | 2 +- docs/react-web-core/local-user/events.mdx | 20 +----- docs/react-web-core/participants/events.mdx | 32 ++------- .../components/dyte-network-indicator.mdx | 2 +- docs/web-core/local-user/events.mdx | 21 +----- .../local-user/self-media-score-update.mdx | 61 +++++++++++++++++ docs/web-core/participants/events.mdx | 29 +------- .../participant-media-score-update.mdx | 67 +++++++++++++++++++ 9 files changed, 142 insertions(+), 94 deletions(-) create mode 100644 docs/web-core/local-user/self-media-score-update.mdx create mode 100644 docs/web-core/participants/participant-media-score-update.mdx diff --git a/docs/angular-ui-kit/components/dyte-network-indicator.mdx b/docs/angular-ui-kit/components/dyte-network-indicator.mdx index 04f3b942f5..9e402b782e 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/react-ui-kit/components/dyte-network-indicator.mdx b/docs/react-ui-kit/components/dyte-network-indicator.mdx index 16fa65d534..39317af7c7 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 791b062111..1c713fbf58 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/web-core/local-user/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 dccdea2329..6fd65c9126 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/web-core/participants/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 f001aade36..a1c6291379 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 91cd598e53..1b7da0dc61 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/web-core/local-user/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/local-user/self-media-score-update.mdx b/docs/web-core/local-user/self-media-score-update.mdx new file mode 100644 index 0000000000..34db890a5f --- /dev/null +++ b/docs/web-core/local-user/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/web-core/participants/events.mdx b/docs/web-core/participants/events.mdx index 5f47590cb6..8b15282d32 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/web-core/participants/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/web-core/participants/participant-media-score-update.mdx b/docs/web-core/participants/participant-media-score-update.mdx new file mode 100644 index 0000000000..053b00c9c1 --- /dev/null +++ b/docs/web-core/participants/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 From d909a190f6b0b56d63c9e6077f7d9caef47b9ae6 Mon Sep 17 00:00:00 2001 From: Ravindra Singh Rathor Date: Fri, 29 Nov 2024 18:42:25 +0530 Subject: [PATCH 2/3] docs(media-score-update): removing the partial pages from index --- docs/react-web-core/local-user/events.mdx | 2 +- docs/react-web-core/participants/events.mdx | 2 +- ...self-media-score-update.mdx => _self-media-score-update.mdx} | 0 docs/web-core/local-user/events.mdx | 2 +- ...dia-score-update.mdx => _participant-media-score-update.mdx} | 0 docs/web-core/participants/events.mdx | 2 +- 6 files changed, 4 insertions(+), 4 deletions(-) rename docs/web-core/local-user/{self-media-score-update.mdx => _self-media-score-update.mdx} (100%) rename docs/web-core/participants/{participant-media-score-update.mdx => _participant-media-score-update.mdx} (100%) diff --git a/docs/react-web-core/local-user/events.mdx b/docs/react-web-core/local-user/events.mdx index 1c713fbf58..35ad4b3279 100644 --- a/docs/react-web-core/local-user/events.mdx +++ b/docs/react-web-core/local-user/events.mdx @@ -97,7 +97,7 @@ meeting.self.on('deviceUpdate', ({ device }) => { ## Network quality score -import SelfMediaScoreUpdate from '@site/docs/web-core/local-user/self-media-score-update.mdx' +import SelfMediaScoreUpdate from '@site/docs/web-core/local-user/_self-media-score-update.mdx' diff --git a/docs/react-web-core/participants/events.mdx b/docs/react-web-core/participants/events.mdx index 6fd65c9126..b0161a33a3 100644 --- a/docs/react-web-core/participants/events.mdx +++ b/docs/react-web-core/participants/events.mdx @@ -111,7 +111,7 @@ const screensharingParticipant = useDyteSelector((m) => ## Network quality score -import ParticipantMediaScoreUpdate from '@site/docs/web-core/participants/participant-media-score-update.mdx' +import ParticipantMediaScoreUpdate from '@site/docs/web-core/participants/_participant-media-score-update.mdx' diff --git a/docs/web-core/local-user/self-media-score-update.mdx b/docs/web-core/local-user/_self-media-score-update.mdx similarity index 100% rename from docs/web-core/local-user/self-media-score-update.mdx rename to docs/web-core/local-user/_self-media-score-update.mdx diff --git a/docs/web-core/local-user/events.mdx b/docs/web-core/local-user/events.mdx index 1b7da0dc61..f7c9a05b48 100644 --- a/docs/web-core/local-user/events.mdx +++ b/docs/web-core/local-user/events.mdx @@ -139,7 +139,7 @@ meeting.self.on('deviceUpdate', ({ device }) => { ## Network quality score -import SelfMediaScoreUpdate from '@site/docs/web-core/local-user/self-media-score-update.mdx' +import SelfMediaScoreUpdate from '@site/docs/web-core/local-user/_self-media-score-update.mdx' diff --git a/docs/web-core/participants/participant-media-score-update.mdx b/docs/web-core/participants/_participant-media-score-update.mdx similarity index 100% rename from docs/web-core/participants/participant-media-score-update.mdx rename to docs/web-core/participants/_participant-media-score-update.mdx diff --git a/docs/web-core/participants/events.mdx b/docs/web-core/participants/events.mdx index 8b15282d32..9019523242 100644 --- a/docs/web-core/participants/events.mdx +++ b/docs/web-core/participants/events.mdx @@ -151,7 +151,7 @@ meeting.participants.joined.on('screenShareUpdate', (participant) => { ## Network quality score -import ParticipantMediaScoreUpdate from '@site/docs/web-core/participants/participant-media-score-update.mdx' +import ParticipantMediaScoreUpdate from '@site/docs/web-core/participants/_participant-media-score-update.mdx' From a627ec07c827b8e4ed49405a4425a06969e9fb78 Mon Sep 17 00:00:00 2001 From: Ravindra Singh Rathor Date: Fri, 29 Nov 2024 18:47:06 +0530 Subject: [PATCH 3/3] docs(media-score-update): placing the partials to partials folder --- .../events}/_participant-media-score-update.mdx | 0 .../local-user => partials/events}/_self-media-score-update.mdx | 0 docs/react-web-core/local-user/events.mdx | 2 +- docs/react-web-core/participants/events.mdx | 2 +- docs/web-core/local-user/events.mdx | 2 +- docs/web-core/participants/events.mdx | 2 +- 6 files changed, 4 insertions(+), 4 deletions(-) rename docs/{web-core/participants => partials/events}/_participant-media-score-update.mdx (100%) rename docs/{web-core/local-user => partials/events}/_self-media-score-update.mdx (100%) diff --git a/docs/web-core/participants/_participant-media-score-update.mdx b/docs/partials/events/_participant-media-score-update.mdx similarity index 100% rename from docs/web-core/participants/_participant-media-score-update.mdx rename to docs/partials/events/_participant-media-score-update.mdx diff --git a/docs/web-core/local-user/_self-media-score-update.mdx b/docs/partials/events/_self-media-score-update.mdx similarity index 100% rename from docs/web-core/local-user/_self-media-score-update.mdx rename to docs/partials/events/_self-media-score-update.mdx diff --git a/docs/react-web-core/local-user/events.mdx b/docs/react-web-core/local-user/events.mdx index 35ad4b3279..7b14b422f7 100644 --- a/docs/react-web-core/local-user/events.mdx +++ b/docs/react-web-core/local-user/events.mdx @@ -97,7 +97,7 @@ meeting.self.on('deviceUpdate', ({ device }) => { ## Network quality score -import SelfMediaScoreUpdate from '@site/docs/web-core/local-user/_self-media-score-update.mdx' +import SelfMediaScoreUpdate from '@site/docs/partials/events/_self-media-score-update.mdx' diff --git a/docs/react-web-core/participants/events.mdx b/docs/react-web-core/participants/events.mdx index b0161a33a3..1d6f85bf08 100644 --- a/docs/react-web-core/participants/events.mdx +++ b/docs/react-web-core/participants/events.mdx @@ -111,7 +111,7 @@ const screensharingParticipant = useDyteSelector((m) => ## Network quality score -import ParticipantMediaScoreUpdate from '@site/docs/web-core/participants/_participant-media-score-update.mdx' +import ParticipantMediaScoreUpdate from '@site/docs/partials/events/_participant-media-score-update.mdx' diff --git a/docs/web-core/local-user/events.mdx b/docs/web-core/local-user/events.mdx index f7c9a05b48..1354a02ec3 100644 --- a/docs/web-core/local-user/events.mdx +++ b/docs/web-core/local-user/events.mdx @@ -139,7 +139,7 @@ meeting.self.on('deviceUpdate', ({ device }) => { ## Network quality score -import SelfMediaScoreUpdate from '@site/docs/web-core/local-user/_self-media-score-update.mdx' +import SelfMediaScoreUpdate from '@site/docs/partials/events/_self-media-score-update.mdx' diff --git a/docs/web-core/participants/events.mdx b/docs/web-core/participants/events.mdx index 9019523242..9e5f7cd6f0 100644 --- a/docs/web-core/participants/events.mdx +++ b/docs/web-core/participants/events.mdx @@ -151,7 +151,7 @@ meeting.participants.joined.on('screenShareUpdate', (participant) => { ## Network quality score -import ParticipantMediaScoreUpdate from '@site/docs/web-core/participants/_participant-media-score-update.mdx' +import ParticipantMediaScoreUpdate from '@site/docs/partials/events/_participant-media-score-update.mdx'