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.
This commit is contained in:
bgrozev 2018-08-07 13:31:51 -05:00 committed by virtuacoplenny
parent 7e1d97665a
commit 2ee1bf9351
9 changed files with 77 additions and 10 deletions

View File

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

View File

@ -198,6 +198,7 @@
"packetloss": "Packet loss:",
"resolution": "Resolution:",
"framerate": "Frame rate:",
"e2e_rtt": "E2E RTT:",
"less": "Show less",
"more": "Show more",
"address": "Address:",

10
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -96,6 +96,7 @@ const WHITELISTED_KEYS = [
'disableRtx',
'disableSuspendVideo',
'displayJids',
'e2eping',
'enableDisplayNameInStats',
'enableLayerSuspension',
'enableLipSync',

View File

@ -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;

View File

@ -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 } />

View File

@ -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);
});
},
/**

View File

@ -38,6 +38,11 @@ class ConnectionStatsTable extends Component {
*/
connectionSummary: PropTypes.string,
/**
* The end-to-end round-trip-time.
*/
e2eRtt: PropTypes.number,
/**
* Statistics related to frame rates for each ssrc.
* {{
@ -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 (
<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>