From 2ee1bf9351140341c4cd68542a7a05da17c3c2f1 Mon Sep 17 00:00:00 2001 From: bgrozev Date: Tue, 7 Aug 2018 13:31:51 -0500 Subject: [PATCH] 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. --- config.js | 12 ++++++ lang/main.json | 1 + package-lock.json | 10 ++--- package.json | 2 +- react/features/base/config/functions.js | 1 + react/features/base/lib-jitsi-meet/index.js | 1 + .../components/ConnectionIndicator.js | 6 ++- .../connection-indicator/statsEmitter.js | 16 +++++++- .../components/ConnectionStatsTable.js | 38 ++++++++++++++++++- 9 files changed, 77 insertions(+), 10 deletions(-) diff --git a/config.js b/config.js index 6bf662e6e..3c94dbccb 100644 --- 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 index d4c5a3346..2d5f356f6 100644 --- 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 index 96b8cd4fa..e418cc4b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9719,8 +9719,8 @@ } }, "lib-jitsi-meet": { - "version": "github:jitsi/lib-jitsi-meet#2be752fc88ff71e454c6b9178b21a33b59c53f41", - "from": "github:jitsi/lib-jitsi-meet#2be752fc88ff71e454c6b9178b21a33b59c53f41", + "version": "github:jitsi/lib-jitsi-meet#e097a1189ed99838605d90b959e129155bc0e50a", + "from": "github:jitsi/lib-jitsi-meet#e097a1189ed99838605d90b959e129155bc0e50a", "requires": { "@jitsi/sdp-interop": "0.1.13", "@jitsi/sdp-simulcast": "0.2.1", @@ -14298,9 +14298,9 @@ } }, "sdp": { - "version": "2.7.4", - "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.7.4.tgz", - "integrity": "sha512-0+wTfgvUUEGcvvFoHIC0aiGbx6gzwAUm8FkKt5Oqqkjf9mEEDLgwnoDKX7MYTGXrNNwzikVbutJ+OVNAGmJBQw==" + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.8.0.tgz", + "integrity": "sha512-wRSES07rAwKWAR7aev9UuClT7kdf9ZTdeUK5gTgHue9vlhs19Fbm3ccNEGJO4y2IitH4/JzS4sdzyPl6H2KQLw==" }, "sdp-transform": { "version": "2.3.0", diff --git a/package.json b/package.json index b4ae09bb4..a2db2f112 100644 --- 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 index 58ca66efa..48b5c4388 100644 --- 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 index a6bea339b..841c2134e 100644 --- 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 index 563da8fc7..2b0990e0d 100644 --- 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 index 409875a7c..e7ae5ac4c 100644 --- 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 index 6279f8233..c9f1efd46 100644 --- a/react/features/connection-stats/components/ConnectionStatsTable.js +++ b/react/features/connection-stats/components/ConnectionStatsTable.js @@ -39,7 +39,12 @@ 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 * }} @@ -47,7 +52,7 @@ class ConnectionStatsTable extends Component { 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 ( + + + { t('connectionindicator.e2e_rtt') } + + { str } + + ); + } + /** * 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 ( { this._renderConnectionSummary() } { this._renderBitrate() } { this._renderPacketLoss() } + { isRemoteVideo ? this._renderE2eRtt() : null } { this._renderResolution() } { this._renderFrameRate() }