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');

  const manifest = '/hls/' + encodeURIComponent(name) + '/index.m3u8';

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

  async function head(u){
    try { const r = await fetch(u, {method:'HEAD', cache:'no-store'}); return r.ok; }
    catch { return false; }
  }

  async function initPlayer() {
    srcEl.textContent = manifest;
    const ok = await head(manifest);
    setLive(ok);
    if (!ok) return false;

    // Autoplay-Chance verbessern
    try { v.muted = true; } catch(_) {}
    try { 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(manifest);
    } else if (v.canPlayType('application/vnd.apple.mpegurl')) {
      v.src = manifest; // Safari / iOS
    } else {
      console.warn('HLS nicht unterstützt');
      return false;
    }

    // Autoplay versuchen (wird bei Desktop-Browsern oft blockiert; Controls bleiben)
    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);
  })();
})();