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