Skip to content

Commit 5fc7941

Browse files
ravindra-dyteravindra-dyte
authored
Merge pull request #405 from dyte-io/docs/media-score-update
docs(media-score-update): added sample score stats objects
2 parents 6ab5782 + a627ec0 commit 5fc7941

File tree

9 files changed

+142
-94
lines changed

9 files changed

+142
-94
lines changed

‎docs/angular-ui-kit/components/dyte-network-indicator.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ A component that indicates poor network connection.
1111
It listens to the mediaScoreUpdate event of the passed participant to get the score.
1212

1313
```tsx
14-
(participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
14+
(participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => {
1515
console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
1616
});
1717
```

‎docs/partials/events/_participant-media-score-update.mdx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
Subscribe to the `mediaScoreUpdate` event to monitor network
2+
3+
```ts
4+
meeting.participants.joined.on(
5+
'mediaScoreUpdate',
6+
({ participantId, kind, isScreenshare, score, scoreStats }) => {
7+
if (kind === 'video') {
8+
console.log(
9+
`Participant ${participantId}'s ${
10+
isScreenshare ? 'screenshare' : 'video'
11+
} quality score is `,
12+
score
13+
);
14+
}
15+
16+
if (kind === 'audio') {
17+
console.log(
18+
`Participant ${participantId}'s audio quality score is `,
19+
score
20+
);
21+
}
22+
23+
if (score < 5) {
24+
console.log(`Participant ${participantId}'s media quality is poor`);
25+
}
26+
}
27+
);
28+
```
29+
30+
The `scoreStats` object contains the statistics that contributed to the calculated media score.
31+
32+
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.
33+
34+
```
35+
// Audio Consumer
36+
{
37+
"kind": "audio",
38+
"isScreenshare": false,
39+
"score": 10,
40+
"participantId": "f9b947d2-c9ca-4ea9-839b-c10304b0fffc",
41+
"scoreStats": {
42+
"score": 10,
43+
"packetsLostPercentage": 0,
44+
"jitter": 0.004, // seconds
45+
"isScreenShare": false,
46+
"bitrate": 1595 // bytes per second
47+
}
48+
}
49+
50+
// Video Consumer
51+
{
52+
"kind": "video",
53+
"isScreenshare": false,
54+
"score": 10,
55+
"participantId": "f9b947d2-c9ca-4ea9-839b-c10304b0fffc",
56+
"scoreStats": {
57+
"score": 10,
58+
"frameWidth": 640,
59+
"frameHeight": 480,
60+
"framesPerSecond": 24,
61+
"packetsLostPercentage": 0,
62+
"jitter": 0.002, // seconds
63+
"isScreenShare": false,
64+
"bitrate": 340460 // bytes per second
65+
}
66+
}
67+
```

‎docs/partials/events/_self-media-score-update.mdx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
Subscribe to the `mediaScoreUpdate` event to monitor network
2+
3+
```ts
4+
meeting.self.on('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => {
5+
if (kind === 'video') {
6+
console.log(
7+
`Your ${isScreenshare ? 'screenshare' : 'video'} quality score is `,
8+
score
9+
);
10+
}
11+
12+
if (kind === 'audio') {
13+
console.log('Your audio quality score is ', score);
14+
}
15+
16+
if (score < 5) {
17+
console.log('Your media quality is poor');
18+
}
19+
});
20+
```
21+
22+
The `scoreStats` object contains the statistics that contributed to the calculated media score.
23+
24+
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.
25+
26+
```
27+
// Audio Producer
28+
{
29+
"kind": "audio",
30+
"isScreenshare": false,
31+
"score": 10,
32+
"participantId": "c8aa91f6-0316-4025-8240-80d130e5acca", // meeting.self.id
33+
"scoreStats": {
34+
"score": 10,
35+
"bitrate": 22452, // bytes per second
36+
"packetsLostPercentage": 0,
37+
"jitter": 0, // seconds
38+
"isScreenShare": false
39+
}
40+
}
41+
42+
// Video Producer
43+
{
44+
"kind": "video",
45+
"isScreenshare": false,
46+
"score": 10,
47+
"participantId": "c8aa91f6-0316-4025-8240-80d130e5acca", // meeting.self.id
48+
"scoreStats": {
49+
"score": 10,
50+
"frameWidth": 640,
51+
"frameHeight": 480,
52+
"framesPerSecond": 24,
53+
"jitter": 0, // seconds
54+
"isScreenShare": false,
55+
"packetsLostPercentage": 0,
56+
"bitrate": 576195, // bytes per second
57+
"cpuLimitations": false,
58+
"bandwidthLimitations": false
59+
}
60+
}
61+
```

‎docs/react-ui-kit/components/dyte-network-indicator.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ A component that indicates poor network connection.
1515
It listens to the mediaScoreUpdate event of the passed participant to get the score.
1616

1717
```tsx
18-
(participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
18+
(participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => {
1919
console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
2020
});
2121
```

‎docs/react-web-core/local-user/events.mdx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -97,26 +97,10 @@ meeting.self.on('deviceUpdate', ({ device }) => {
9797

9898
## Network quality score
9999

100-
Subscribe to the `mediaScoreUpdate` event to monitor network
100+
import SelfMediaScoreUpdate from '@site/docs/partials/events/_self-media-score-update.mdx'
101101

102-
```ts
103-
meeting.self.on('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
104-
if (kind === 'video') {
105-
console.log(
106-
`Your ${isScreenshare ? 'screenshare' : 'video'} quality score is `,
107-
score
108-
);
109-
}
110-
111-
if (kind === 'audio') {
112-
console.log('Your audio quality score is ', score);
113-
}
102+
<SelfMediaScoreUpdate />
114103

115-
if (score < 5) {
116-
console.log('Your media quality is poor');
117-
}
118-
});
119-
```
120104

121105
## Permission Updates
122106

‎docs/react-web-core/participants/events.mdx‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -111,34 +111,12 @@ const screensharingParticipant = useDyteSelector((m) =>
111111

112112
## Network quality score
113113

114-
Subscribe to the `mediaScoreUpdate` event to monitor network
114+
import ParticipantMediaScoreUpdate from '@site/docs/partials/events/_participant-media-score-update.mdx'
115+
116+
<ParticipantMediaScoreUpdate />
117+
118+
115119

116-
```ts
117-
meeting.participants.joined.on(
118-
'mediaScoreUpdate',
119-
({ participantId, kind, isScreenshare, score }) => {
120-
if (kind === 'video') {
121-
console.log(
122-
`Participant ${participantId}'s ${
123-
isScreenshare ? 'screenshare' : 'video'
124-
} quality score is `,
125-
score
126-
);
127-
}
128-
129-
if (kind === 'audio') {
130-
console.log(
131-
`Participant ${participantId}'s audio quality score is `,
132-
score
133-
);
134-
}
135-
136-
if (score < 5) {
137-
console.log(`Participant ${participantId}'s media quality is poor`);
138-
}
139-
}
140-
);
141-
```
142120

143121
## Events for specific participant
144122

‎docs/ui-kit/components/dyte-network-indicator.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ A component that indicates poor network connection.
2323
It listens to the mediaScoreUpdate event of the passed participant to get the score.
2424

2525
```tsx
26-
participant.addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
26+
participant.addListener('mediaScoreUpdate', ({ kind, isScreenshare, score, scoreStats }) => {
2727
console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
2828
});
2929
```

‎docs/web-core/local-user/events.mdx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -139,26 +139,9 @@ meeting.self.on('deviceUpdate', ({ device }) => {
139139

140140
## Network quality score
141141

142-
Subscribe to the `mediaScoreUpdate` event to monitor network
142+
import SelfMediaScoreUpdate from '@site/docs/partials/events/_self-media-score-update.mdx'
143143

144-
```ts
145-
meeting.self.on('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
146-
if (kind === 'video') {
147-
console.log(
148-
`Your ${isScreenshare ? 'screenshare' : 'video'} quality score is `,
149-
score
150-
);
151-
}
152-
153-
if (kind === 'audio') {
154-
console.log('Your audio quality score is ', score);
155-
}
156-
157-
if (score < 5) {
158-
console.log('Your media quality is poor');
159-
}
160-
});
161-
```
144+
<SelfMediaScoreUpdate />
162145

163146
<head>
164147
<title>Web Core Events</title>

‎docs/web-core/participants/events.mdx‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -151,34 +151,9 @@ meeting.participants.joined.on('screenShareUpdate', (participant) => {
151151

152152
## Network quality score
153153

154-
Subscribe to the `mediaScoreUpdate` event to monitor network
154+
import ParticipantMediaScoreUpdate from '@site/docs/partials/events/_participant-media-score-update.mdx'
155155

156-
```ts
157-
meeting.participants.joined.on(
158-
'mediaScoreUpdate',
159-
({ participantId, kind, isScreenshare, score }) => {
160-
if (kind === 'video') {
161-
console.log(
162-
`Participant ${participantId}'s ${
163-
isScreenshare ? 'screenshare' : 'video'
164-
} quality score is `,
165-
score
166-
);
167-
}
168-
169-
if (kind === 'audio') {
170-
console.log(
171-
`Participant ${participantId}'s audio quality score is `,
172-
score
173-
);
174-
}
175-
176-
if (score < 5) {
177-
console.log(`Participant ${participantId}'s media quality is poor`);
178-
}
179-
}
180-
);
181-
```
156+
<ParticipantMediaScoreUpdate />
182157

183158
## Events for specific participant
184159

0 commit comments

Comments
 (0)