restream-tools/player/static/player.js

(() => {
  'use strict';

  // Utility functions
  const fetchWithTimeout = async (resource, options = {}) => {
    const { timeout = 30000 } = options;

    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    const response = await fetch(resource, {
      ...options,
      signal: controller.signal,
    });
    clearTimeout(id);
    return response;
  };

  // Measure the average time it takes to get a response from the url
  const ping = async (url) => {
    const start = performance.now();
    await fetchWithTimeout(url, {
      timeout: 1000,
      mode: 'cors',
    });
    const end = performance.now();
    return end - start;
  };

  // Async sleep
  const sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const measureLatency = async (url, count, gap = 100) => {
    const results = [];

    for (let i = 0; i < count; i++) {
      const latency = await ping(url).catch(() => null);
      if (latency) results.push(latency);
      await sleep(gap);
    }

    if (results.length === 0) return null;
    return results.reduce((a, b) => a + b, 0) / count;
  };

  const updateMirrorList = () => {
    const mirrorSelect = document.getElementById('mirror-select');

    // Clear the current list
    while (mirrorSelect.firstChild) {
      mirrorSelect.removeChild(mirrorSelect.firstChild);
    }

    // Add each upstream server to the list
    for (const upstream of window.restream_config.upstreams) {
      const option = document.createElement('option');
      option.value = upstream.url;
      option.text =
        `[${upstream.region}] ${upstream.url}` +
        (typeof upstream.latency === 'number'
          ? ` (${Math.floor(upstream.latency)}ms)`
          : upstream.latency === null
          ? ' (unavailable)'
          : '');
      mirrorSelect.add(option);
    }
  };

  const reloadVideo = () => {
    const video = document.getElementById('video');
    const mirrorSelect = document.getElementById('mirror-select');
    const mirrorLink = document.getElementById('mirror-link');
    const playlistURL = mirrorSelect.value + window.restream_config.playlist;

    console.log('Reloading video from', playlistURL);
    if (Hls.isSupported()) {
      window.restream_config.hls.destroy();
      window.restream_config.hls = new Hls();
      window.restream_config.hls.attachMedia(video);
      window.restream_config.hls.loadSource(playlistURL);
    } else {
      video.src = playlistURL;
    }

    mirrorLink.href = playlistURL;
    mirrorLink.innerText = '[m3u8]';
  };

  const viewCountLoop = async () => {
    const viewCount = document.getElementById('viewer-count-value');
    const url = '/viewcount';

    while (true) {
      const response = await fetchWithTimeout(url, {
        timeout: 1000,
        mode: 'cors',
      });
      const count = Number(await response.text());
      viewCount.innerText = count;
      await sleep(5000);
    }
  };

  const init = async () => {
    const video = document.getElementById('video');
    const mirrorSelect = document.getElementById('mirror-select');

    // Init viewer counter
    viewCountLoop();

    // Set up hls.js
    if (Hls.isSupported()) {
      window.restream_config.hls = new Hls();
      window.restream_config.hls.attachMedia(video);
    }

    // Set up event listeners
    mirrorSelect.addEventListener('change', () => reloadVideo());

    const { upstreams } = window.restream_config;

    for (const upstream of upstreams) {
      const playlistURL = upstream.url + window.restream_config.playlist;
      const latency = await measureLatency(playlistURL, 3);
      upstream.latency = latency;
      updateMirrorList();
    }

    // Choose the fastest upstream server
    const upstream = upstreams
      .filter((upstream) => typeof upstream.latency === 'number')
      .sort((a, b) => a.latency - b.latency)[0];
    mirrorSelect.value = upstream.url;
    reloadVideo();
  };

  if (document.readyState === 'loading')
    document.addEventListener('DOMContentLoaded', init);
  else init();
})();