feat: add jitter to pre call diagnostics report (#3386)

Co-authored-by: Kaustubh Kumar <kaustubhkumar05@gmail.com> Co-authored-by: Ravi theja <ravi.theja@100ms.live>
100mslive · Dec 2, 2024 · 2e8fee4 · 2e8fee4
1 parent bd78913
commit 2e8fee4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/packages/hms-video-store/src/diagnostics/DiagnosticsStatsCollector.ts b/packages/hms-video-store/src/diagnostics/DiagnosticsStatsCollector.ts
@@ -67,7 +67,9 @@ export class DiagnosticsStatsCollector {
     const ridAveragedVideoBitrateList = this.localVideoTrackStatsList.map(trackStatsMap =>
       trackStatsMap ? calculateAverage(Object.values(trackStatsMap), curr => curr.bitrate) : 0,
     );
-
+    const audioJitter = getLastElement(this.remoteAudioTrackStatsList)?.jitter || 0;
+    const videoJitter = getLastElement(this.remoteVideoTrackStatsList)?.jitter || 0;
+    const jitter = Math.max(audioJitter, videoJitter);
     const lastLocalAudioTrackStats = getLastElement(this.localAudioTrackStatsList);
     const lastLocalVideoTrackStats = getLastElement(this.localVideoTrackStatsList);
 
@@ -80,6 +82,7 @@ export class DiagnosticsStatsCollector {
         bytesReceived: lastSubscribeStats?.bytesReceived || 0,
         bitrateSent: calculateAverage(this.peerStatsList, curr => curr.publish?.bitrate),
         bitrateReceived: calculateAverage(this.peerStatsList, curr => curr.subscribe?.bitrate),
+        jitter: jitter,
       },
       audio: {
         roundTripTime,
@@ -91,6 +94,7 @@ export class DiagnosticsStatsCollector {
         bytesSent: lastLocalAudioTrackStats
           ? Object.values(lastLocalAudioTrackStats).reduce((acc, curr) => acc + (curr.bytesSent || 0), 0)
           : 0,
+        jitter: audioJitter,
       },
       video: {
         roundTripTime,
@@ -102,6 +106,7 @@ export class DiagnosticsStatsCollector {
         bytesSent: lastLocalVideoTrackStats
           ? Object.values(lastLocalVideoTrackStats).reduce((acc, curr) => acc + (curr.bytesSent || 0), 0)
           : 0,
+        jitter: videoJitter,
       },
     };
   }

diff --git a/packages/hms-video-store/src/diagnostics/interfaces.ts b/packages/hms-video-store/src/diagnostics/interfaces.ts
@@ -88,4 +88,5 @@ export interface DiagnosticsRTCStats {
   bitrateSent: number;
   bitrateReceived: number;
   roundTripTime: number;
+  jitter: number;
 }
diff --git a/packages/roomkit-react/src/Diagnostics/ConnectivityTest.tsx b/packages/roomkit-react/src/Diagnostics/ConnectivityTest.tsx
@@ -164,6 +164,7 @@ const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter} s`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>
@@ -182,6 +183,7 @@ const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter} s`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>