2021-03-26 05:22:50 +08:00
|
|
|
import { defineMessages } from 'react-intl';
|
2020-04-10 01:01:46 +08:00
|
|
|
import Auth from '/imports/ui/services/auth';
|
2021-03-26 05:22:50 +08:00
|
|
|
import { Session } from 'meteor/session';
|
|
|
|
import { notify } from '/imports/ui/services/notification';
|
2021-08-13 03:39:04 +08:00
|
|
|
import AudioService from '/imports/ui/components/audio/service';
|
2021-08-14 04:24:44 +08:00
|
|
|
import VideoService from '/imports/ui/components/video-provider/service';
|
2021-08-23 23:36:01 +08:00
|
|
|
import ScreenshareService from '/imports/ui/components/screenshare/service';
|
2020-04-10 01:01:46 +08:00
|
|
|
|
2024-03-07 01:28:18 +08:00
|
|
|
const STATS = window.meetingClientSettings.public.stats;
|
2021-03-26 05:22:50 +08:00
|
|
|
const NOTIFICATION = STATS.notification;
|
2020-04-10 01:01:46 +08:00
|
|
|
|
2021-03-26 05:22:50 +08:00
|
|
|
const intlMessages = defineMessages({
|
|
|
|
saved: {
|
|
|
|
id: 'app.settings.save-notification.label',
|
|
|
|
description: 'Label shown in toast when data savings are saved',
|
|
|
|
},
|
|
|
|
notification: {
|
|
|
|
id: 'app.connection-status.notification',
|
|
|
|
description: 'Label shown in toast when connection loss is detected',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2022-09-15 09:16:27 +08:00
|
|
|
let lastLevel = -1;
|
|
|
|
const levelDep = new Tracker.Dependency();
|
2020-04-28 22:20:19 +08:00
|
|
|
|
|
|
|
let statsTimeout = null;
|
|
|
|
|
2021-03-26 05:22:50 +08:00
|
|
|
const URL_REGEX = new RegExp(/^(http|https):\/\/[^ "]+$/);
|
|
|
|
const getHelp = () => {
|
|
|
|
if (URL_REGEX.test(STATS.help)) return STATS.help;
|
|
|
|
|
|
|
|
return null;
|
|
|
|
};
|
2020-04-28 22:20:19 +08:00
|
|
|
|
2021-03-26 05:22:50 +08:00
|
|
|
const getStats = () => {
|
2022-09-15 09:16:27 +08:00
|
|
|
levelDep.depend();
|
|
|
|
return STATS.level[lastLevel];
|
2020-04-28 22:20:19 +08:00
|
|
|
};
|
|
|
|
|
2021-04-24 05:37:52 +08:00
|
|
|
const setStats = (level = -1, type = 'recovery', value = {}) => {
|
2022-09-15 09:16:27 +08:00
|
|
|
if (lastLevel !== level) {
|
|
|
|
lastLevel = level;
|
|
|
|
levelDep.changed();
|
2021-03-26 05:22:50 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-04-28 22:20:19 +08:00
|
|
|
const handleAudioStatsEvent = (event) => {
|
|
|
|
const { detail } = event;
|
|
|
|
if (detail) {
|
|
|
|
const { loss, jitter } = detail;
|
|
|
|
let active = false;
|
|
|
|
// From higher to lower
|
|
|
|
for (let i = STATS.level.length - 1; i >= 0; i--) {
|
2021-04-24 05:37:52 +08:00
|
|
|
if (loss >= STATS.loss[i] || jitter >= STATS.jitter[i]) {
|
2020-04-28 22:20:19 +08:00
|
|
|
active = true;
|
2022-09-15 09:16:27 +08:00
|
|
|
setStats(i, 'audio', { loss, jitter });
|
2020-04-28 22:20:19 +08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2021-03-26 05:22:50 +08:00
|
|
|
|
|
|
|
if (active) startStatsTimeout();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const startStatsTimeout = () => {
|
|
|
|
if (statsTimeout !== null) clearTimeout(statsTimeout);
|
|
|
|
|
|
|
|
statsTimeout = setTimeout(() => {
|
2022-09-15 09:16:27 +08:00
|
|
|
setStats(-1, 'recovery', {});
|
2021-03-26 05:22:50 +08:00
|
|
|
}, STATS.timeout);
|
|
|
|
};
|
|
|
|
|
2020-05-14 21:35:25 +08:00
|
|
|
const sortLevel = (a, b) => {
|
|
|
|
const indexOfA = STATS.level.indexOf(a.level);
|
|
|
|
const indexOfB = STATS.level.indexOf(b.level);
|
|
|
|
|
|
|
|
if (indexOfA < indexOfB) return 1;
|
|
|
|
if (indexOfA === indexOfB) return 0;
|
|
|
|
if (indexOfA > indexOfB) return -1;
|
|
|
|
};
|
2020-04-10 01:01:46 +08:00
|
|
|
|
2023-12-05 22:18:45 +08:00
|
|
|
const sortOnline = (a, b) => {
|
|
|
|
if (!a.user.isOnline && b.user.isOnline) return 1;
|
|
|
|
if (a.user.isOnline === b.user.isOnline) return 0;
|
|
|
|
if (a.user.isOnline && !b.user.isOnline) return -1;
|
2020-04-10 01:01:46 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const isEnabled = () => STATS.enabled;
|
|
|
|
|
2020-04-28 22:20:19 +08:00
|
|
|
if (STATS.enabled) {
|
|
|
|
window.addEventListener('audiostats', handleAudioStatsEvent);
|
|
|
|
}
|
|
|
|
|
2021-03-26 05:22:50 +08:00
|
|
|
const getNotified = () => {
|
|
|
|
const notified = Session.get('connectionStatusNotified');
|
|
|
|
|
|
|
|
// Since notified can be undefined we need a boolean verification
|
|
|
|
return notified === true;
|
|
|
|
};
|
|
|
|
|
|
|
|
const notification = (level, intl) => {
|
|
|
|
if (!NOTIFICATION[level]) return null;
|
|
|
|
|
|
|
|
// Avoid toast spamming
|
|
|
|
const notified = getNotified();
|
|
|
|
if (notified) {
|
|
|
|
return null;
|
|
|
|
}
|
2021-04-02 02:10:15 +08:00
|
|
|
Session.set('connectionStatusNotified', true);
|
|
|
|
|
2021-04-23 09:07:48 +08:00
|
|
|
if (intl) notify(intl.formatMessage(intlMessages.notification), level, 'warning');
|
2021-03-26 05:22:50 +08:00
|
|
|
};
|
|
|
|
|
2021-08-18 03:51:50 +08:00
|
|
|
/**
|
|
|
|
* Calculates the jitter buffer average.
|
|
|
|
* For more information see:
|
|
|
|
* https://www.w3.org/TR/webrtc-stats/#dom-rtcinboundrtpstreamstats-jitterbufferdelay
|
|
|
|
* @param {Object} inboundRtpData The RTCInboundRtpStreamStats object retrieved
|
|
|
|
* in getStats() call.
|
|
|
|
* @returns The jitter buffer average in ms
|
|
|
|
*/
|
|
|
|
const calculateJitterBufferAverage = (inboundRtpData) => {
|
|
|
|
if (!inboundRtpData) return 0;
|
|
|
|
|
|
|
|
const {
|
|
|
|
jitterBufferDelay,
|
|
|
|
jitterBufferEmittedCount,
|
|
|
|
} = inboundRtpData;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
if (!jitterBufferDelay || !jitterBufferEmittedCount) return '--';
|
2021-08-18 03:51:50 +08:00
|
|
|
|
|
|
|
return Math.round((jitterBufferDelay / jitterBufferEmittedCount) * 1000);
|
|
|
|
};
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
/**
|
|
|
|
* Given the data returned from getStats(), returns an array containing all the
|
|
|
|
* the stats of the given type.
|
|
|
|
* For more information see:
|
|
|
|
* https://developer.mozilla.org/en-US/docs/Web/API/RTCStatsReport
|
|
|
|
* and
|
|
|
|
* https://developer.mozilla.org/en-US/docs/Web/API/RTCStatsType
|
|
|
|
* @param {Object} data - RTCStatsReport object returned from getStats() API
|
|
|
|
* @param {String} type - The string type corresponding to RTCStatsType object
|
|
|
|
* @returns {Array[Object]} An array containing all occurrences of the given
|
|
|
|
* type in the data Object.
|
|
|
|
*/
|
|
|
|
const getDataType = (data, type) => {
|
|
|
|
if (!data || typeof data !== 'object' || !type) return [];
|
|
|
|
|
|
|
|
return Object.values(data).filter((stat) => stat.type === type);
|
|
|
|
};
|
|
|
|
|
2021-08-18 03:51:50 +08:00
|
|
|
/**
|
|
|
|
* Returns a new Object containing extra parameters calculated from inbound
|
|
|
|
* data. The input data is also appended in the returned Object.
|
|
|
|
* @param {Object} currentData - The object returned from getStats / service's
|
|
|
|
* getNetworkData()
|
|
|
|
* @returns {Object} the currentData object with the extra inbound network
|
|
|
|
* added to it.
|
|
|
|
*/
|
|
|
|
const addExtraInboundNetworkParameters = (data) => {
|
|
|
|
if (!data) return data;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
const inboundRtpData = getDataType(data, 'inbound-rtp')[0];
|
2021-08-18 03:51:50 +08:00
|
|
|
|
|
|
|
if (!inboundRtpData) return data;
|
|
|
|
|
|
|
|
const extraParameters = {
|
|
|
|
jitterBufferAverage: calculateJitterBufferAverage(inboundRtpData),
|
|
|
|
packetsLost: inboundRtpData.packetsLost,
|
|
|
|
};
|
|
|
|
|
|
|
|
return Object.assign(inboundRtpData, extraParameters);
|
|
|
|
};
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
/**
|
2021-08-23 23:36:01 +08:00
|
|
|
* Retrieves the inbound and outbound data using WebRTC getStats API, for audio.
|
2021-08-13 03:39:04 +08:00
|
|
|
* @returns An Object with format (property:type) :
|
|
|
|
* {
|
|
|
|
* transportStats: Object,
|
|
|
|
* inbound-rtp: RTCInboundRtpStreamStats,
|
|
|
|
* outbound-rtp: RTCOutboundRtpStreamStats,
|
|
|
|
* }
|
|
|
|
* For more information see:
|
2021-08-16 22:04:28 +08:00
|
|
|
* https://www.w3.org/TR/webrtc-stats/#dom-rtcinboundrtpstreamstats
|
2021-08-13 03:39:04 +08:00
|
|
|
* and
|
2021-08-16 22:04:28 +08:00
|
|
|
* https://www.w3.org/TR/webrtc-stats/#dom-rtcoutboundrtpstreamstats
|
2021-08-13 03:39:04 +08:00
|
|
|
*/
|
|
|
|
const getAudioData = async () => {
|
|
|
|
const data = await AudioService.getStats();
|
|
|
|
|
|
|
|
if (!data) return {};
|
|
|
|
|
2021-08-18 03:51:50 +08:00
|
|
|
addExtraInboundNetworkParameters(data);
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
return data;
|
|
|
|
};
|
|
|
|
|
2021-08-23 23:36:01 +08:00
|
|
|
/**
|
|
|
|
* Retrieves the inbound and outbound data using WebRTC getStats API, for video.
|
|
|
|
* The video stats contains the stats about all video peers (cameras) and
|
|
|
|
* for screenshare peer appended into one single object, containing the id
|
|
|
|
* of the peers with it's stats information.
|
|
|
|
* @returns An Object containing video data for all video peers and screenshare
|
|
|
|
* peer
|
|
|
|
*/
|
2021-08-14 04:24:44 +08:00
|
|
|
const getVideoData = async () => {
|
2021-08-23 23:36:01 +08:00
|
|
|
const camerasData = await VideoService.getStats() || {};
|
2021-08-14 04:24:44 +08:00
|
|
|
|
2021-08-23 23:36:01 +08:00
|
|
|
const screenshareData = await ScreenshareService.getStats() || {};
|
2021-08-14 04:24:44 +08:00
|
|
|
|
2021-08-23 23:36:01 +08:00
|
|
|
return {
|
|
|
|
...camerasData,
|
|
|
|
...screenshareData,
|
|
|
|
};
|
2021-08-14 04:24:44 +08:00
|
|
|
};
|
2021-08-13 03:39:04 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the user, audio and video data from current active streams.
|
|
|
|
* For audio, this will get information about the mic/listen-only stream.
|
|
|
|
* @returns An Object containing all this data.
|
|
|
|
*/
|
|
|
|
const getNetworkData = async () => {
|
2021-08-14 04:24:44 +08:00
|
|
|
const audio = await getAudioData();
|
|
|
|
|
|
|
|
const video = await getVideoData();
|
|
|
|
|
|
|
|
const user = {
|
|
|
|
time: new Date(),
|
|
|
|
username: Auth.username,
|
|
|
|
meeting_name: Auth.confname,
|
|
|
|
meeting_id: Auth.meetingID,
|
|
|
|
connection_id: Auth.connectionID,
|
|
|
|
user_id: Auth.userID,
|
|
|
|
extern_user_id: Auth.externUserID,
|
2021-08-11 22:10:49 +08:00
|
|
|
};
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
const fullData = {
|
2021-08-14 04:24:44 +08:00
|
|
|
user,
|
|
|
|
audio,
|
|
|
|
video,
|
2021-08-13 03:39:04 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return fullData;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2024-03-18 21:58:53 +08:00
|
|
|
* Calculates both upload and download rates using data retrieved from getStats
|
2021-08-13 03:39:04 +08:00
|
|
|
* API. For upload (outbound-rtp) we use both bytesSent and timestamp fields.
|
|
|
|
* byteSent field contains the number of octets sent at the given timestamp,
|
|
|
|
* more information can be found in:
|
|
|
|
* https://www.w3.org/TR/webrtc-stats/#dom-rtcsentrtpstreamstats-bytessent
|
|
|
|
*
|
|
|
|
* timestamp is given in millisseconds, more information can be found in:
|
|
|
|
* https://www.w3.org/TR/webrtc-stats/#webidl-1049090475
|
|
|
|
* @param {Object} currentData - The object returned from getStats / service's
|
|
|
|
* getNetworkData()
|
2021-08-14 04:24:44 +08:00
|
|
|
* @param {Object} previousData - The same object as above, but representing
|
2021-08-13 03:39:04 +08:00
|
|
|
* a data collected in past (previous call of
|
|
|
|
* service's getNetworkData())
|
|
|
|
* @returns An object of numbers, containing both outbound (upload) and inbound
|
|
|
|
* (download) rates (kbps).
|
|
|
|
*/
|
|
|
|
const calculateBitsPerSecond = (currentData, previousData) => {
|
|
|
|
const result = {
|
|
|
|
outbound: 0,
|
|
|
|
inbound: 0,
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!currentData || !previousData) return result;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
const currentOutboundData = getDataType(currentData, 'outbound-rtp')[0];
|
|
|
|
const currentInboundData = getDataType(currentData, 'inbound-rtp')[0];
|
|
|
|
const previousOutboundData = getDataType(previousData, 'outbound-rtp')[0];
|
|
|
|
const previousInboundData = getDataType(previousData, 'inbound-rtp')[0];
|
2021-08-13 03:39:04 +08:00
|
|
|
|
|
|
|
if (currentOutboundData && previousOutboundData) {
|
|
|
|
const {
|
|
|
|
bytesSent: outboundBytesSent,
|
|
|
|
timestamp: outboundTimestamp,
|
|
|
|
} = currentOutboundData;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
let {
|
|
|
|
headerBytesSent: outboundHeaderBytesSent,
|
|
|
|
} = currentOutboundData;
|
|
|
|
|
|
|
|
if (!outboundHeaderBytesSent) outboundHeaderBytesSent = 0;
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
const {
|
|
|
|
bytesSent: previousOutboundBytesSent,
|
|
|
|
timestamp: previousOutboundTimestamp,
|
|
|
|
} = previousOutboundData;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
let {
|
|
|
|
headerBytesSent: previousOutboundHeaderBytesSent,
|
|
|
|
} = previousOutboundData;
|
|
|
|
|
|
|
|
if (!previousOutboundHeaderBytesSent) previousOutboundHeaderBytesSent = 0;
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
const outboundBytesPerSecond = (outboundBytesSent + outboundHeaderBytesSent
|
|
|
|
- previousOutboundBytesSent - previousOutboundHeaderBytesSent)
|
|
|
|
/ (outboundTimestamp - previousOutboundTimestamp);
|
|
|
|
|
|
|
|
result.outbound = Math.round((outboundBytesPerSecond * 8 * 1000) / 1024);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (currentInboundData && previousInboundData) {
|
|
|
|
const {
|
|
|
|
bytesReceived: inboundBytesReceived,
|
|
|
|
timestamp: inboundTimestamp,
|
|
|
|
} = currentInboundData;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
let {
|
|
|
|
headerBytesReceived: inboundHeaderBytesReceived,
|
|
|
|
} = currentInboundData;
|
|
|
|
|
|
|
|
if (!inboundHeaderBytesReceived) inboundHeaderBytesReceived = 0;
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
const {
|
|
|
|
bytesReceived: previousInboundBytesReceived,
|
|
|
|
timestamp: previousInboundTimestamp,
|
|
|
|
} = previousInboundData;
|
|
|
|
|
2021-08-26 03:27:46 +08:00
|
|
|
let {
|
|
|
|
headerBytesReceived: previousInboundHeaderBytesReceived,
|
|
|
|
} = previousInboundData;
|
|
|
|
|
|
|
|
if (!previousInboundHeaderBytesReceived) {
|
|
|
|
previousInboundHeaderBytesReceived = 0;
|
|
|
|
}
|
|
|
|
|
2021-08-13 03:39:04 +08:00
|
|
|
const inboundBytesPerSecond = (inboundBytesReceived
|
|
|
|
+ inboundHeaderBytesReceived - previousInboundBytesReceived
|
|
|
|
- previousInboundHeaderBytesReceived) / (inboundTimestamp
|
|
|
|
- previousInboundTimestamp);
|
|
|
|
|
|
|
|
result.inbound = Math.round((inboundBytesPerSecond * 8 * 1000) / 1024);
|
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
2021-08-11 22:10:49 +08:00
|
|
|
};
|
|
|
|
|
2021-08-14 04:24:44 +08:00
|
|
|
/**
|
|
|
|
* Similar to calculateBitsPerSecond, but it receives stats from multiple
|
|
|
|
* peers. The total inbound/outbound is the sum of all peers.
|
|
|
|
* @param {Object} currentData - The Object returned from
|
|
|
|
* getStats / service's getNetworkData()
|
|
|
|
* @param {Object} previousData - The same object as above, but
|
|
|
|
* representing a data collected in past
|
|
|
|
* (previous call of service's getNetworkData())
|
|
|
|
*/
|
|
|
|
const calculateBitsPerSecondFromMultipleData = (currentData, previousData) => {
|
|
|
|
const result = {
|
|
|
|
outbound: 0,
|
|
|
|
inbound: 0,
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!currentData || !previousData) return result;
|
|
|
|
|
|
|
|
Object.keys(currentData).forEach((peerId) => {
|
|
|
|
if (previousData[peerId]) {
|
|
|
|
const {
|
|
|
|
outbound: peerOutbound,
|
|
|
|
inbound: peerInbound,
|
|
|
|
} = calculateBitsPerSecond(currentData[peerId], previousData[peerId]);
|
|
|
|
|
|
|
|
result.outbound += peerOutbound;
|
|
|
|
result.inbound += peerInbound;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
|
2023-12-05 22:18:45 +08:00
|
|
|
const sortConnectionData = (connectionData) => connectionData.sort(sortLevel).sort(sortOnline);
|
|
|
|
|
2020-04-10 01:01:46 +08:00
|
|
|
export default {
|
2021-03-26 05:22:50 +08:00
|
|
|
getStats,
|
2020-04-28 22:20:19 +08:00
|
|
|
getHelp,
|
2020-04-10 01:01:46 +08:00
|
|
|
isEnabled,
|
2021-03-26 05:22:50 +08:00
|
|
|
notification,
|
2021-08-11 22:10:49 +08:00
|
|
|
getNetworkData,
|
2021-08-13 03:39:04 +08:00
|
|
|
calculateBitsPerSecond,
|
2021-08-14 04:24:44 +08:00
|
|
|
calculateBitsPerSecondFromMultipleData,
|
2022-02-04 22:09:43 +08:00
|
|
|
getDataType,
|
2023-12-05 22:18:45 +08:00
|
|
|
sortConnectionData,
|
2020-04-10 01:01:46 +08:00
|
|
|
};
|