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:
parent
7e1d97665a
commit
2ee1bf9351
12
config.js
12
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
|
||||
|
|
|
@ -198,6 +198,7 @@
|
|||
"packetloss": "Packet loss:",
|
||||
"resolution": "Resolution:",
|
||||
"framerate": "Frame rate:",
|
||||
"e2e_rtt": "E2E RTT:",
|
||||
"less": "Show less",
|
||||
"more": "Show more",
|
||||
"address": "Address:",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -96,6 +96,7 @@ const WHITELISTED_KEYS = [
|
|||
'disableRtx',
|
||||
'disableSuspendVideo',
|
||||
'displayJids',
|
||||
'e2eping',
|
||||
'enableDisplayNameInStats',
|
||||
'enableLayerSuspension',
|
||||
'enableLipSync',
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 } />
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -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 (
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue