Merge pull request #405 from dyte-io/docs/media-score-update

docs(media-score-update): added sample score stats objects
dyte-io · Nov 29, 2024 · 5fc7941 · 5fc7941
2 parents 6ab5782 + a627ec0
commit 5fc7941
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 94 deletions.
diff --git 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
@@ -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
+    }
+}
+```
diff --git a/docs/partials/events/_self-media-score-update.mdx 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
+    }
+}
+```
diff --git 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
@@ -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);
-  }
+<SelfMediaScoreUpdate />
 
-  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
@@ -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'
+
+<ParticipantMediaScoreUpdate />
+
+
 
-```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
@@ -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
@@ -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');
-  }
-});
-```
+<SelfMediaScoreUpdate />
 
 <head>
   <title>Web Core Events</title>

diff --git 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`);
-    }
-  }
-);
-```
+<ParticipantMediaScoreUpdate />
 
 ## Events for specific participant