src/performance/performance-monitor.ts

/*
 * Push the performance monitor as the last core component in hls.ts
 * so that it is the last class to handle events.
 *
 * coreComponents.push(new PerformanceMonitor(this));
 *
 * TODO: Add this to the demo page or a performance test page
 */

import { Events } from '../events';
import { logger } from '../utils/logger';
import Hls from '../hls';
import type { FragBufferedData } from '../types/events';

export default class PerformanceMonitor {
  private hls: Hls;

  constructor(hls: Hls) {
    this.hls = hls;
    this.hls.on(Events.FRAG_BUFFERED, this.onFragBuffered);
  }

  destroy() {
    this.hls.off(Events.FRAG_BUFFERED);
  }

  onFragBuffered(event: Events.FRAG_BUFFERED, data: FragBufferedData) {
    logFragStats(data);
  }
}

function logFragStats(data: FragBufferedData) {
  const { frag, part } = data;
  const stats = part ? part.stats : frag.stats;
  const tLoad = stats.loading.end - stats.loading.start;
  const tBuffer = stats.buffering.end - stats.buffering.start;
  const tParse = stats.parsing.end - stats.parsing.start;
  const tTotal = stats.buffering.end - stats.loading.start;

  logger.log(`[performance-monitor]: Stats for fragment ${frag.sn} ${
    part ? ' part ' + part.index : ''
  } of level ${frag.level}:
        Size:                       ${(stats.total / 1024).toFixed(3)} kB
        Chunk Count:                ${stats.chunkCount}

        Request:                    ${stats.loading.start.toFixed(3)} ms
        First Byte:                 ${stats.loading.first.toFixed(3)} ms
        Parse Start                 ${stats.parsing.start.toFixed(3)} ms
        Buffering Start:            ${stats.buffering.start.toFixed(3)} ms
        First Buffer:               ${stats.buffering.first.toFixed(3)} ms
        Parse End:                  ${stats.parsing.end.toFixed(3)} ms
        Buffering End:              ${stats.buffering.end.toFixed(3)} ms

        Load Duration:              ${tLoad.toFixed(3)} ms
        Parse Duration:             ${tParse.toFixed(3)} ms
        Buffer Duration:            ${tBuffer.toFixed(3)} ms
        End-To-End Duration:        ${tTotal.toFixed(3)} ms`);
}