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 &&