feat: add jitter to pre call diagnostics report

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,
       },
     };
   }

packages/hms-video-store/src/diagnostics/interfaces.ts

@@ -88,4 +88,5 @@ export interface DiagnosticsRTCStats {
   bitrateSent: number;
   bitrateReceived: number;
   roundTripTime: number;
+  jitter: number;
 }

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 * 1000} ms`} />
         </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 * 1000} ms`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>