diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js index 8e7d3d8..0c132f4 100644 --- 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 index 13e6299..f337b8e 100644 --- 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 &&

- +

} diff --git a/Project/src/MakeCall/StreamRenderer.js b/Project/src/MakeCall/StreamRenderer.js index e6da657..06b3a7c 100644 --- 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 &&

- +

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