nginx-stream-server/web/static/js/stream.js

(function () {
  const name = document.documentElement.dataset.stream;
  const v = document.getElementById('v');
  const liveEl = document.getElementById('live');
  const viewersEl = document.getElementById('viewers');
  const srcEl = document.getElementById('hlssrc');

  function setLive(on){
    liveEl.className = 'pill ' + (on ? 'live' : 'off');
    liveEl.textContent = on ? 'LIVE' : 'Offline';
  }

  async function chooseManifest() {
    const enc = encodeURIComponent(name);
    const candidates = [
      `/hls/${enc}/index.m3u8`,
      `/hls/${enc}/main_stream.m3u8`,   // Fallback, wenn es keinen Master gibt
    ];
    for (const url of candidates) {
      try {
        const r = await fetch(url, { cache: 'no-store' });
        if (r.ok) return url; // WICHTIG: GET statt HEAD
      } catch (_) {}
    }
    return null;
  }

  async function initPlayer() {
    const url = await chooseManifest();
    if (!url) { setLive(false); return false; }

    srcEl.textContent = url;
    setLive(true);

    try { v.muted = true; v.playsInline = true; } catch(_) {}

    if (window.Hls && Hls.isSupported()) {
      if (!window._hls) {
        window._hls = new Hls({ liveDurationInfinity: true });
        window._hls.on(Hls.Events.MANIFEST_PARSED, (_e, data) => {
          console.log('HLS manifest parsed. levels=', data.levels?.length);
        });
        window._hls.on(Hls.Events.ERROR, (_e, data) => {
          console.warn('hls.js error', data);
        });
        window._hls.attachMedia(v);
      }
      window._hls.loadSource(url);
    } else if (v.canPlayType('application/vnd.apple.mpegurl')) {
      v.src = url; // Safari / iOS
    } else {
      console.warn('HLS nicht unterstützt');
      return false;
    }

    try { await v.play(); } catch(e){ console.log('autoplay blockiert (ok):', e?.name||e); }
    return true;
  }

  async function refreshMeta(){
    try {
      const r = await fetch('/api/streams', { cache: 'no-store' });
      if (!r.ok) return;
      const d = await r.json();
      const it = d.items.find(x => x.name === name);
      if (it) {
        setLive(!!it.live);
        viewersEl.textContent = 'Zuschauer: ' + it.viewers;
      }
    } catch (_) {}
  }

  v.addEventListener('error', e => console.warn('video error', e));
  v.addEventListener('loadedmetadata', () => console.log('loadedmetadata'));
  v.addEventListener('playing', () => console.log('playing'));

  (async function boot(){
    for (let i=0; i<10; i++){
      const ok = await initPlayer();
      if (ok) break;
      await new Promise(r => setTimeout(r, 1500));
    }
    refreshMeta();
    setInterval(refreshMeta, 2500);
  })();
})();