owncast/webroot/js/metrics/playback.js

import { URL_PLAYBACK_METRICS } from '../utils/constants.js';
const METRICS_SEND_INTERVAL = 10000;

class PlaybackMetrics {
  constructor(player, videojs) {
    this.player = player;
    this.supportsDetailedMetrics = false;
    this.hasPerformedInitialVariantChange = false;

    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.collectPlaybackMetrics = this.collectPlaybackMetrics.bind(this);
    this.handleNoLongerBuffering = this.handleNoLongerBuffering.bind(this);

    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.
    videojs.Vhs.xhr = (...args) => {
      if (args[0].uri.match('.ts')) {
        const start = new Date();

        const cb = args[1];
        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();

    setInterval(() => {
      this.send();
    }, METRICS_SEND_INTERVAL);
  }

  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', (c) => {
      this.incrementQualityVariantChanges();
    });
  }

  handlePlaying() {
    clearInterval(this.collectPlaybackMetricsTimer);
    this.collectPlaybackMetricsTimer = setInterval(() => {
      this.collectPlaybackMetrics();
    }, 5000);
  }

  handleEnded() {
    clearInterval(this.collectPlaybackMetricsTimer);
  }

  handleBuffering(e) {
    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();
      const latency = now - segmentTime;
      this.trackLatency(latency);
    } catch (err) {
      console.warn(err);
    }
  }

  async send() {
    const errorCount = this.errors;

    var 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 {
      fetch(URL_PLAYBACK_METRICS, options);
    } catch (e) {
      console.error(e);
    }
  }
}

export default PlaybackMetrics;

function getCurrentlyPlayingSegment(tech, old_segment = null) {
  var target_media = tech.vhs.playlists.media();
  var snapshot_time = tech.currentTime();

  var segment;
  var segment_time;

  // Itinerate trough available segments and get first within which snapshot_time is
  for (var i = 0, l = target_media.segments.length; i < l; i++) {
    // Note: segment.end may be undefined or is not properly set
    if (snapshot_time < target_media.segments[i].end) {
      segment = target_media.segments[i];
      break;
    }
  }

  // Null segment_time in case it's lower then 0.
  if (segment) {
    segment_time = Math.max(
      0,
      snapshot_time - (segment.end - segment.duration)
    );
    // Because early segments don't have end property
  } else {
    segment = target_media.segments[0];
    segment_time = 0;
  }

  return segment;
}