feat: Displays the E2E RTT in the connection stats table. (#3344)

* feat: Displays the E2E RTT in the connection stats table. * fix: Whitelists the ping config properties. * ref: Addresses feedback. * npm: Updates lib-jitsi-meet to e097a1189ed99838605d90b959e129155bc0e50a. * ref: Moves the e2ertt and region to the existing stats object.
jitsi · Aug 7, 2018 · 2ee1bf9 · 2ee1bf9
1 parent 7e1d976
commit 2ee1bf9
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 10 deletions.
diff --git a/config.js b/config.js
@@ -347,6 +347,18 @@ var config = {
         // userRegion: "asia"
     }
 
+    // Options related to end-to-end (participant to participant) ping.
+    // e2eping: {
+    //   // The interval in milliseconds at which pings will be sent.
+    //   // Defaults to 10000, set to <= 0 to disable.
+    //   pingInterval: 10000,
+    //
+    //   // The interval in milliseconds at which analytics events
+    //   // with the measured RTT will be sent. Defaults to 60000, set
+    //   // to <= 0 to disable.
+    //   analyticsInterval: 60000,
+    //   }
+
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold

diff --git a/lang/main.json b/lang/main.json
@@ -198,6 +198,7 @@
         "packetloss": "Packet loss:",
         "resolution": "Resolution:",
         "framerate": "Frame rate:",
+        "e2e_rtt": "E2E RTT:",
         "less": "Show less",
         "more": "Show more",
         "address": "Address:",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "js-md5": "0.6.1",
     "jsc-android": "224109.1.0",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#2be752fc88ff71e454c6b9178b21a33b59c53f41",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#e097a1189ed99838605d90b959e129155bc0e50a",
     "lodash": "4.17.4",
     "moment": "2.19.4",
     "moment-duration-format": "2.2.2",

diff --git a/react/features/base/config/functions.js b/react/features/base/config/functions.js
@@ -96,6 +96,7 @@ const WHITELISTED_KEYS = [
     'disableRtx',
     'disableSuspendVideo',
     'displayJids',
+    'e2eping',
     'enableDisplayNameInStats',
     'enableLayerSuspension',
     'enableLipSync',

diff --git a/react/features/base/lib-jitsi-meet/index.js b/react/features/base/lib-jitsi-meet/index.js
@@ -14,6 +14,7 @@ export const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
 export const JitsiConnectionEvents = JitsiMeetJS.events.connection;
 export const JitsiConnectionQualityEvents
     = JitsiMeetJS.events.connectionQuality;
+export const JitsiE2ePingEvents = JitsiMeetJS.events.e2eping;
 export const JitsiMediaDevicesEvents = JitsiMeetJS.events.mediaDevices;
 export const JitsiParticipantConnectionStatus
     = JitsiMeetJS.constants.participantConnectionStatus;

diff --git a/react/features/connection-indicator/components/ConnectionIndicator.js b/react/features/connection-indicator/components/ConnectionIndicator.js
@@ -324,6 +324,7 @@ class ConnectionIndicator extends Component {
      * @returns {void}
      */
     _onStatsUpdated(stats = {}) {
+        // Rely on React to batch setState actions.
         const { connectionQuality } = stats;
         const newPercentageState = typeof connectionQuality === 'undefined'
             ? {} : { percent: connectionQuality };
@@ -337,7 +338,6 @@ class ConnectionIndicator extends Component {
             stats: newStats
         });
 
-        // Rely on React to batch setState actions.
         this._updateIndicatorAutoHide(newStats.percent);
     }
 
@@ -410,8 +410,10 @@ class ConnectionIndicator extends Component {
         const {
             bandwidth,
             bitrate,
+            e2eRtt,
             framerate,
             packetLoss,
+            region,
             resolution,
             transport
         } = this.state.stats;
@@ -421,10 +423,12 @@ class ConnectionIndicator extends Component {
                 bandwidth = { bandwidth }
                 bitrate = { bitrate }
                 connectionSummary = { this._getConnectionStatusTip() }
+                e2eRtt = { e2eRtt }
                 framerate = { framerate }
                 isLocalVideo = { this.props.isLocalVideo }
                 onShowMore = { this._onToggleShowMore }
                 packetLoss = { packetLoss }
+                region = { region }
                 resolution = { resolution }
                 shouldShowMore = { this.state.showMoreStats }
                 transport = { transport } />

diff --git a/react/features/connection-indicator/statsEmitter.js b/react/features/connection-indicator/statsEmitter.js
@@ -2,7 +2,10 @@
 
 import _ from 'lodash';
 
-import { JitsiConnectionQualityEvents } from '../base/lib-jitsi-meet';
+import {
+    JitsiConnectionQualityEvents,
+    JitsiE2ePingEvents
+} from '../base/lib-jitsi-meet';
 
 declare var APP: Object;
 
@@ -33,6 +36,17 @@ const statsEmitter = {
 
         conference.on(JitsiConnectionQualityEvents.REMOTE_STATS_UPDATED,
             (id, stats) => this._emitStatsUpdate(id, stats));
+
+        conference.on(
+            JitsiE2ePingEvents.E2E_RTT_CHANGED,
+            (participant, e2eRtt) => {
+                const stats = {
+                    e2eRtt,
+                    region: participant.getProperty('region')
+                };
+
+                this._emitStatsUpdate(participant.getId(), stats);
+            });
     },
 
     /**

diff --git a/react/features/connection-stats/components/ConnectionStatsTable.js b/react/features/connection-stats/components/ConnectionStatsTable.js
@@ -39,15 +39,20 @@ class ConnectionStatsTable extends Component {
         connectionSummary: PropTypes.string,
 
         /**
-         * Statistics related to framerates for each ssrc.
+         * The end-to-end round-trip-time.
+         */
+        e2eRtt: PropTypes.number,
+
+        /**
+         * Statistics related to frame rates for each ssrc.
          * {{
          *     [ ssrc ]: Number
          * }}
          */
         framerate: PropTypes.object,
 
         /**
-         * Whether or not the statitics are for local video.
+         * Whether or not the statistics are for local video.
          */
         isLocalVideo: PropTypes.bool,
 
@@ -65,6 +70,11 @@ class ConnectionStatsTable extends Component {
          */
         packetLoss: PropTypes.object,
 
+        /**
+         * The region.
+         */
+        region: PropTypes.string,
+
         /**
          * Statistics related to display resolutions for each ssrc.
          * {{
@@ -208,6 +218,27 @@ class ConnectionStatsTable extends Component {
         );
     }
 
+    /**
+     * Creates a table row as a ReactElement for displaying end-to-end RTT and
+     * the region.
+     *
+     * @returns {ReactElement}
+     * @private
+     */
+    _renderE2eRtt() {
+        const { e2eRtt, region, t } = this.props;
+        const str = `${e2eRtt.toFixed(0)}ms (${region ? region : 'unknown'})`;
+
+        return (
+            <tr>
+                <td>
+                    <span>{ t('connectionindicator.e2e_rtt') }</span>
+                </td>
+                <td>{ str }</td>
+            </tr>
+        );
+    }
+
     /**
      * Creates a table row as a ReactElement for displaying frame rate related
      * statistics.
@@ -330,12 +361,15 @@ class ConnectionStatsTable extends Component {
      * @returns {ReactElement}
      */
     _renderStatistics() {
+        const isRemoteVideo = !this.props.isLocalVideo;
+
         return (
             <table className = 'connection-info__container'>
                 <tbody>
                     { this._renderConnectionSummary() }
                     { this._renderBitrate() }
                     { this._renderPacketLoss() }
+                    { isRemoteVideo ? this._renderE2eRtt() : null }
                     { this._renderResolution() }
                     { this._renderFrameRate() }
                 </tbody>