Add mediastats display on local video render

Project/src/MakeCall/CallCard.js

@@ -98,6 +98,8 @@ export default class CallCard extends React.Component {
         };
         this.selectedRemoteParticipants = new Set();
         this.dataChannelRef = React.createRef();
+        this.localVideoPreviewRef = React.createRef();
+        this.localScreenSharingPreviewRef = React.createRef();
         this.isSetCallConstraints = this.call.setConstraints !== undefined;
     }
 
@@ -343,6 +345,16 @@ export default class CallCard extends React.Component {
                     let renderer = v.streamRendererComponentRef.current;
                     renderer?.updateReceiveStats(stats[v.stream.id]);
                 });
+                if (this.state.logMediaStats) {
+                    if (data.video.send.length > 0) {
+                        let renderer = this.localVideoPreviewRef.current;
+                        renderer?.updateSendStats(data.video.send[0]);
+                    }
+                    if (data.screenShare.send.length > 0) {
+                        let renderer = this.localScreenSharingPreviewRef.current;
+                        renderer?.updateSendStats(data.screenShare.send[0]);
+                    }
+                }
             });
             mediaCollector.on('summaryReported', (data) => {
                 if (this.state.logMediaStats) {
@@ -761,7 +773,12 @@ export default class CallCard extends React.Component {
         this.setState(prevState => ({
             ...prevState,
             logMediaStats: !prevState.logMediaStats
-        }));
+        }), () => {
+            if (!this.state.logMediaStats) {
+                this.localVideoPreviewRef.current?.updateSendStats(undefined);
+                this.localScreenSharingPreviewRef.current?.updateSendStats(undefined);
+            }
+        });
     }
 
     getDummyAudioStream() {
@@ -1403,6 +1420,7 @@ export default class CallCard extends React.Component {
                         <div className="ms-Grid-row">
                             <div className="ms-Grid-col ms-sm12 ms-md4 ms-lg4">
                                 <LocalVideoPreviewCard
+                                    ref={this.localVideoPreviewRef}
                                     identifier={this.identifier}
                                     stream={this.localVideoStream}/>
                             </div>
@@ -1449,6 +1467,7 @@ export default class CallCard extends React.Component {
                             {
                                 <div className="ms-Grid-col ms-sm12 ms-md6 ms-lg6">
                                     <LocalVideoPreviewCard
+                                        ref={this.localScreenSharingPreviewRef}
                                         identifier={this.identifier}
                                         stream={this.localScreenSharingStream}/>
                                 </div>

Project/src/MakeCall/LocalVideoPreviewCard.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { VideoStreamRenderer} from '@azure/communication-calling';
 import { utils } from '../Utils/Utils';
+import VideoSendStats from './VideoSendStats';
 
 export default class LocalVideoPreviewCard extends React.Component {
     constructor(props) {
@@ -10,6 +11,9 @@ export default class LocalVideoPreviewCard extends React.Component {
         this.type = this.stream.mediaStreamType;
         this.view = undefined;
         this.componentId = `${utils.getIdentifierText(this.identifier)}-local${this.type}Renderer`;
+        this.state = {
+            videoStats: undefined
+        };
     }
 
     async componentDidMount() {
@@ -33,7 +37,20 @@ export default class LocalVideoPreviewCard extends React.Component {
 
     render() {
         return (
-            <div style={{ width: '100%' }} id={this.componentId}></div>
+            <div style={{ width: '100%' }} id={this.componentId}>
+                {
+                    this.state.videoStats &&
+                    <h4 className="video-stats">
+                        <VideoSendStats videoStats={this.state.videoStats} />
+                    </h4>
+                }
+            </div>
         );
     }
+
+    updateSendStats(videoStats) {
+        if (this.state.videoStats !== videoStats) {
+            this.setState({ videoStats });
+        }
+    }
 }

Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js

@@ -119,8 +119,6 @@ export default class CustomVideoEffects extends React.Component {
                 // start processing.
                 this.bwCtx.filter = "grayscale(1)";
                 this.bwCtx.drawImage(bwVideoElem, 0, 0, width, height);
-                const imageData = this.bwCtx.getImageData(0, 0, width, height);
-                this.bwCtx.putImageData(imageData, 0, 0);
                 // schedule the next one.
                 let delay = Math.abs(1000/FPS - (Date.now() - begin));
                 this.bwTimeout = setTimeout(processVideo, delay);
@@ -191,4 +189,4 @@ export default class CustomVideoEffects extends React.Component {
 
     }
 
-}
+}

Project/src/MakeCall/VideoSendStats.js

@@ -0,0 +1,62 @@
+import React from "react";
+
+export default class VideoSendStats extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <table>
+                {
+                    this.props.videoStats &&
+                    <tbody>
+                        <tr>
+                            <td>codec:</td>
+                            <td>{this.props.videoStats.codecName}</td>
+                        </tr>
+                        <tr>
+                            <td>bitrate:</td>
+                            <td>{(this.props.videoStats.bitrate/1000).toFixed(1)} kbps</td>
+                        </tr>
+                        <tr>
+                            <td>jitter:</td>
+                            <td>{this.props.videoStats.jitterInMs} ms</td>
+                        </tr>
+                        <tr>
+                            <td>rtt:</td>
+                            <td>{this.props.videoStats.rttInMs} ms</td>
+                        </tr>
+                        <tr>
+                            <td>packetsPerSecond:</td>
+                            <td>{this.props.videoStats.packetsPerSecond}</td>
+                        </tr>
+                        <tr>
+                            <td>frameWidthSent:</td>
+                            <td>{this.props.videoStats.frameWidthSent} px</td>
+                        </tr>
+                        <tr>
+                            <td>frameHeightSent:</td>
+                            <td>{this.props.videoStats.frameHeightSent} px</td>
+                        </tr>
+                        <tr>
+                            <td>frameRateInput:</td>
+                            <td>{this.props.videoStats.frameRateInput} fps</td>
+                        </tr>
+                        <tr>
+                            <td>frameRateEncoded:</td>
+                            <td>{this.props.videoStats.frameRateEncoded} fps</td>
+                        </tr>
+                        {
+                            this.props.videoStats.altLayouts?.length > 0 &&
+                            <tr>
+                                <td>simulcast:</td>
+                                <td>{this.props.videoStats.altLayouts[0].frameWidthSent}x{this.props.videoStats.altLayouts[0].frameHeightSent}</td>
+                            </tr>
+                        }
+                    </tbody>
+                }
+            </table>
+        );
+    }
+}