/* eslint-disable no-plusplus */ const URL_PLAYBACK_METRICS = `/api/metrics/playback`; const METRICS_SEND_INTERVAL = 10000; const MAX_VALID_LATENCY_SECONDS = 40; // Anything > this gets thrown out. function getCurrentlyPlayingSegment(tech) { const targetMedia = tech.vhs.playlists.media(); const snapshotTime = tech.currentTime(); let segment; // Iterate trough available segments and get first within which snapshot_time is // eslint-disable-next-line no-plusplus for (let i = 0, l = targetMedia.segments.length; i < l; i++) { // Note: segment.end may be undefined or is not properly set if (snapshotTime < targetMedia.segments[i].end) { segment = targetMedia.segments[i]; break; } } if (!segment) { [segment] = targetMedia.segments; } return segment; } class PlaybackMetrics { constructor(player, videojs) { this.player = player; this.supportsDetailedMetrics = false; this.hasPerformedInitialVariantChange = false; this.clockSkewMs = 0; this.segmentDownloadTime = []; this.bandwidthTracking = []; this.latencyTracking = []; this.errors = 0; this.qualityVariantChanges = 0; this.isBuffering = false; this.bufferingDurationTimer = 0; this.collectPlaybackMetricsTimer = 0; this.videoJSReady = this.videoJSReady.bind(this); this.handlePlaying = this.handlePlaying.bind(this); this.handleBuffering = this.handleBuffering.bind(this); this.handleEnded = this.handleEnded.bind(this); this.handleError = this.handleError.bind(this); this.send = this.send.bind(this); this.collectPlaybackMetrics = this.collectPlaybackMetrics.bind(this); this.handleNoLongerBuffering = this.handleNoLongerBuffering.bind(this); this.sendMetricsTimer = 0; this.player.on('canplaythrough', this.handleNoLongerBuffering); this.player.on('error', this.handleError); this.player.on('stalled', this.handleBuffering); this.player.on('waiting', this.handleBuffering); this.player.on('playing', this.handlePlaying); this.player.on('ended', this.handleEnded); // Keep a reference of the standard vjs xhr function. const oldVjsXhrCallback = videojs.xhr; // Override the xhr function to track segment download time. // eslint-disable-next-line no-param-reassign videojs.Vhs.xhr = (...args) => { if (args[0].uri.match('.ts')) { const start = new Date(); const cb = args[1]; // eslint-disable-next-line no-param-reassign args[1] = (request, error, response) => { const end = new Date(); const delta = end.getTime() - start.getTime(); this.trackSegmentDownloadTime(delta); cb(request, error, response); }; } return oldVjsXhrCallback(...args); }; this.videoJSReady(); this.sendMetricsTimer = setInterval(() => { this.send(); }, METRICS_SEND_INTERVAL); } stop() { clearInterval(this.sendMetricsTimer); this.player.off(); } // Keep our client clock in sync with the server clock to determine // accurate latency calculations. setClockSkew(skewMs) { this.clockSkewMs = skewMs; } videoJSReady() { const tech = this.player.tech({ IWillNotUseThisInPlugins: true }); this.supportsDetailedMetrics = !!tech; tech.on('usage', e => { if (e.name === 'vhs-unknown-waiting') { this.setIsBuffering(true); } if (e.name === 'vhs-rendition-change-abr') { // Quality variant has changed this.incrementQualityVariantChanges(); } }); // Variant changed const trackElements = this.player.textTracks(); trackElements.addEventListener('cuechange', () => { this.incrementQualityVariantChanges(); }); } handlePlaying() { clearInterval(this.collectPlaybackMetricsTimer); this.collectPlaybackMetricsTimer = setInterval(() => { this.collectPlaybackMetrics(); }, 5000); } handleEnded() { clearInterval(this.collectPlaybackMetricsTimer); } handleBuffering() { this.incrementErrorCount(1); this.setIsBuffering(true); } handleNoLongerBuffering() { this.setIsBuffering(false); } handleError() { this.incrementErrorCount(1); } incrementErrorCount(count) { this.errors += count; } incrementQualityVariantChanges() { // We always start the player at the lowest quality, so let's just not // count the first change. if (!this.hasPerformedInitialVariantChange) { this.hasPerformedInitialVariantChange = true; return; } this.qualityVariantChanges++; } setIsBuffering(isBuffering) { this.isBuffering = isBuffering; if (!isBuffering) { clearTimeout(this.bufferingDurationTimer); return; } this.bufferingDurationTimer = setTimeout(() => { this.incrementErrorCount(1); }, 500); } trackSegmentDownloadTime(seconds) { this.segmentDownloadTime.push(seconds); } trackBandwidth(bps) { this.bandwidthTracking.push(bps); } trackLatency(latency) { this.latencyTracking.push(latency); } collectPlaybackMetrics() { const tech = this.player.tech({ IWillNotUseThisInPlugins: true }); if (!tech || !tech.vhs) { return; } // If we're paused then do nothing. if (this.player.paused()) { return; } // Network state 2 means we're actively using the network. // We only care about reporting metrics with network activity stats // if it's actively being used, so don't report otherwise. const networkState = this.player.networkState(); if (networkState !== 2) { return; } const bandwidth = tech.vhs.systemBandwidth; this.trackBandwidth(bandwidth); try { const segment = getCurrentlyPlayingSegment(tech); if (!segment || !segment.dateTimeObject) { return; } const segmentTime = segment.dateTimeObject.getTime(); const now = new Date().getTime() + this.clockSkewMs; const latency = now - segmentTime; // Throw away values that seem invalid. if (latency < 0 || latency / 1000 >= MAX_VALID_LATENCY_SECONDS) { return; } this.trackLatency(latency); } catch (err) { console.warn(err); } } async send() { if (this.segmentDownloadTime.length === 0) { return; } // If we're paused then do nothing. if (!this.player || this.player.paused()) { return; } const errorCount = this.errors; let data; if (this.supportsDetailedMetrics) { const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length; const averageDownloadDuration = average(this.segmentDownloadTime) / 1000; const roundedAverageDownloadDuration = Math.round(averageDownloadDuration * 1000) / 1000; const averageBandwidth = average(this.bandwidthTracking) / 1000; const roundedAverageBandwidth = Math.round(averageBandwidth * 1000) / 1000; const averageLatency = average(this.latencyTracking) / 1000; const roundedAverageLatency = Math.round(averageLatency * 1000) / 1000; data = { bandwidth: roundedAverageBandwidth, latency: roundedAverageLatency, downloadDuration: roundedAverageDownloadDuration, errors: errorCount + (this.isBuffering ? 1 : 0), qualityVariantChanges: this.qualityVariantChanges, }; } else { data = { errors: errorCount + (this.isBuffering ? 1 : 0), }; } this.errors = 0; this.qualityVariantChanges = 0; this.segmentDownloadTime = []; this.bandwidthTracking = []; this.latencyTracking = []; const options = { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }; try { await fetch(URL_PLAYBACK_METRICS, options); } catch (e) { console.error(e); } } } export default PlaybackMetrics;