Fix rtt stats for incoming videos

Azure-Samples · Jul 23, 2024 · 740a19f · 740a19f
1 parent 4629bab
commit 740a19f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
@@ -368,7 +368,10 @@ export default class CallCard extends React.Component {
                 }
                 this.state.allRemoteParticipantStreams.forEach(v => {
                     let renderer = v.streamRendererComponentRef.current;
-                    renderer?.updateReceiveStats(stats[v.stream.id]);
+                    const videoStats = stats[v.stream.id];
+                    const transportId = videoStats?.transportId;
+                    const transportStats = transportId && data?.transports?.length ? data.transports.find(item => item.id === transportId) : undefined;
+                    renderer?.updateReceiveStats(videoStats, transportStats);
                 });
                 if (this.state.logMediaStats) {
                     if (data.video.send.length > 0) {

diff --git a/Project/src/MakeCall/FunctionalStreamRenderer.js b/Project/src/MakeCall/FunctionalStreamRenderer.js
@@ -23,6 +23,7 @@ export const FunctionalStreamRenderer = forwardRef(({
     const [isMuted, setIsMuted] = useState(!!remoteParticipant?.isMuted);
     const [displayName, setDisplayName] = useState(remoteParticipant?.displayName?.trim() ?? '');
     const [videoStats, setVideoStats] = useState();
+    const [transportStats, setTransportStats] = useState();
 
     useEffect(() => {
         initializeComponent();
@@ -125,10 +126,11 @@ export const FunctionalStreamRenderer = forwardRef(({
     }
 
     useImperativeHandle(ref, () => ({
-        updateReceiveStats(videoStatsReceived) {
+        updateReceiveStats(videoStatsReceived, transportStatsReceived) {
             if (videoStatsReceived) {
                 if (videoStatsReceived !== videoStats && stream.isAvailable) {
                     setVideoStats(videoStatsReceived);
+                    setTransportStats(transportStatsReceived);
                 }
             }
         },
@@ -166,7 +168,7 @@ export const FunctionalStreamRenderer = forwardRef(({
                 {
                     videoStats && showMediaStats &&
                     <h4 className="video-stats">
-                        <VideoReceiveStats videoStats={videoStats} />
+                        <VideoReceiveStats videoStats={videoStats} transportStats={transportStats} />
                     </h4>
                 }
             </div>

diff --git a/Project/src/MakeCall/StreamRenderer.js b/Project/src/MakeCall/StreamRenderer.js
@@ -21,7 +21,8 @@ export default class StreamRenderer extends React.Component {
         this.state = {
             isSpeaking: false,
             displayName: this.remoteParticipant.displayName?.trim(),
-            videoStats: undefined
+            videoStats: undefined,
+            transportStats: undefined
         };
         this.call = props.call;
     }
@@ -122,9 +123,9 @@ export default class StreamRenderer extends React.Component {
         return this.renderer;
     }
 
-    updateReceiveStats(videoStats) {
+    updateReceiveStats(videoStats, transportStats) {
         if (this.state.videoStats !== videoStats) {
-            this.setState({ videoStats });
+            this.setState({ videoStats, transportStats });
         }
     }
 
@@ -172,7 +173,7 @@ export default class StreamRenderer extends React.Component {
                     {
                         this.state.videoStats &&
                         <h4 className="video-stats">
-                            <VideoReceiveStats videoStats={this.state.videoStats} />
+                            <VideoReceiveStats videoStats={this.state.videoStats} transportStats={this.state.transportStats} />
                         </h4>
                     }
                 </div>

diff --git a/Project/src/MakeCall/VideoReceiveStats.js b/Project/src/MakeCall/VideoReceiveStats.js
@@ -26,7 +26,7 @@ export default class VideoReceiveStats extends React.Component {
                     </tr>
                     <tr>
                         <td>rtt:</td>
-                        <td>{this.props.videoStats.pairRttInMs} ms</td>
+                        <td>{this.props.transportStats?.rttInMs ?? ''} ms</td>
                     </tr>
                     <tr>
                         <td>packetsPerSecond:</td>