Add codec reporting (if present in lib-jitsi-meet output) to connection stats (#6054)

* Add codec reporting to the stats window for connections.
This will report the audio/video codecs, if reported by lib-jitsi-meet.

lang/main.json

@@ -102,6 +102,7 @@
         "bandwidth": "Estimated bandwidth:",
         "bitrate": "Bitrate:",
         "bridgeCount": "Server count: ",
+        "codecs": "Codecs (A/V): ",
         "connectedTo": "Connected to:",
         "e2e_rtt": "E2E RTT:",
         "framerate": "Frame rate:",

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -340,6 +340,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
             bandwidth,
             bitrate,
             bridgeCount,
+            codec,
             e2eRtt,
             framerate,
             maxEnabledResolution,
@@ -355,6 +356,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
                 bandwidth = { bandwidth }
                 bitrate = { bitrate }
                 bridgeCount = { bridgeCount }
+                codec = { codec }
                 connectionSummary = { this._getConnectionStatusTip() }
                 e2eRtt = { e2eRtt }
                 framerate = { framerate }

react/features/connection-indicator/statsEmitter.js

@@ -122,6 +122,7 @@ const statsEmitter = {
     _onStatsUpdated(localUserId: string, stats: Object) {
         const allUserFramerates = stats.framerate || {};
         const allUserResolutions = stats.resolution || {};
+        const allUserCodecs = stats.codec || {};
 
         // FIXME resolution and framerate are maps keyed off of user ids with
         // stat values. Receivers of stats expect resolution and framerate to
@@ -129,7 +130,8 @@ const statsEmitter = {
         // stats objects.
         const modifiedLocalStats = Object.assign({}, stats, {
             framerate: allUserFramerates[localUserId],
-            resolution: allUserResolutions[localUserId]
+            resolution: allUserResolutions[localUserId],
+            codec: allUserCodecs[localUserId]
         });
 
         this._emitStatsUpdate(localUserId, modifiedLocalStats);
@@ -138,8 +140,9 @@ const statsEmitter = {
         // and update remote user stats as needed.
         const framerateUserIds = Object.keys(allUserFramerates);
         const resolutionUserIds = Object.keys(allUserResolutions);
+        const codecUserIds = Object.keys(allUserCodecs);
 
-        _.union(framerateUserIds, resolutionUserIds)
+        _.union(framerateUserIds, resolutionUserIds, codecUserIds)
             .filter(id => id !== localUserId)
             .forEach(id => {
                 const remoteUserStats = {};
@@ -156,6 +159,12 @@ const statsEmitter = {
                     remoteUserStats.resolution = resolution;
                 }
 
+                const codec = allUserCodecs[id];
+
+                if (codec) {
+                    remoteUserStats.codec = codec;
+                }
+
                 this._emitStatsUpdate(id, remoteUserStats);
             });
     }

react/features/connection-stats/components/ConnectionStatsTable.js

@@ -34,6 +34,11 @@ type Props = {
      */
     bridgeCount: number,
 
+    /**
+     * Audio/video codecs in use for the connection.
+     */
+    codec: Object,
+
     /**
      * A message describing the connection quality.
      */
@@ -219,6 +224,45 @@ class ConnectionStatsTable extends Component<Props> {
         );
     }
 
+    /**
+     * Creates a a table row as a ReactElement for displaying codec, if present.
+     * This will typically be something like "Codecs (A/V): opus, vp8".
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderCodecs() {
+        const { codec, t } = this.props;
+
+        if (!codec) {
+            return;
+        }
+
+        let codecString;
+
+        // Only report one codec, in case there are multiple for a user.
+        Object.keys(codec || {})
+            .forEach(ssrc => {
+                const { audio, video } = codec[ssrc];
+
+                codecString = `${audio}, ${video}`;
+            });
+
+        if (!codecString) {
+            codecString = 'N/A';
+        }
+
+        return (
+            <tr>
+                <td>
+                    <span>{ t('connectionindicator.codecs') }</span>
+                </td>
+                <td>{ codecString }</td>
+            </tr>
+        );
+    }
+
+
     /**
      * Creates a table row as a ReactElement for displaying a summary message
      * about the current connection status.
@@ -452,6 +496,7 @@ class ConnectionStatsTable extends Component<Props> {
                     { isRemoteVideo ? this._renderRegion() : null }
                     { this._renderResolution() }
                     { this._renderFrameRate() }
+                    { this._renderCodecs() }
                     { isRemoteVideo ? null : this._renderBridgeCount() }
                 </tbody>
             </table>