Add a DVR window to your live HLS stream without 404ing the scrubber

ffmpeg -version | head -1
npm ls hls.js

# 10-minute sliding window: 6s segments × 100 entries
ffmpeg -i rtmp://localhost/live/stream \
  -c:v libx264 -preset veryfast -tune zerolatency \
  -g 120 -keyint_min 120 -sc_threshold 0 \
  -c:a aac -b:a 128k -ar 48000 \
  -f hls \
  -hls_time 6 \
  -hls_list_size 100 \
  -hls_flags delete_segments+independent_segments \
  -hls_delete_threshold 5 \
  -hls_segment_filename 'segments/seg_%05d.ts' \
  stream.m3u8

$ head -8 stream.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:7
#EXT-X-MEDIA-SEQUENCE:412
#EXT-X-INDEPENDENT-SEGMENTS
#EXTINF:6.000000,
segments/seg_00412.ts

# full-event DVR: append-only, nothing is deleted
ffmpeg -i rtmp://localhost/live/stream \
  ... -f hls -hls_time 6 -hls_playlist_type event stream.m3u8

// scripts/check-dvr-consistency.mjs
const HLS_TIME = 6;
const HLS_LIST_SIZE = 100;
const HLS_DELETE_THRESHOLD = 5;
const STORAGE_TTL_SECONDS = 3600; // read this from your IaC, don't hardcode

const advertised = HLS_TIME * HLS_LIST_SIZE;
const onDisk = HLS_TIME * (HLS_LIST_SIZE + HLS_DELETE_THRESHOLD);

const problems = [];
if (advertised > onDisk) {
  problems.push(`playlist advertises ${advertised}s but origin keeps ${onDisk}s`);
}
if (advertised > STORAGE_TTL_SECONDS) {
  problems.push(`playlist advertises ${advertised}s but storage TTL is ${STORAGE_TTL_SECONDS}s`);
}

if (problems.length) {
  console.error("DVR window inconsistent:\n  " + problems.join("\n  "));
  process.exit(1);
}
console.log(`DVR window OK: ${advertised}s advertised, ${onDisk}s on disk`);

$ node scripts/check-dvr-consistency.mjs
DVR window OK: 600s advertised, 630s on disk

// src/dvr.js
import Hls from 'hls.js';

export function attachDvr(video, src) {
  const hls = new Hls({
    // how far behind the live edge we sit, as a multiple of EXT-X-TARGETDURATION
    liveSyncDurationCount: 3,        // default is 3
    // liveSyncDuration: 18,         // seconds-based alternative; takes precedence
    backBufferLength: 90,
  });

  hls.loadSource(src);
  hls.attachMedia(video);

  const state = { hasDvr: false, windowSeconds: 0 };

  hls.on(Hls.Events.LEVEL_LOADED, (_evt, data) => {
    const details = data.details;
    state.hasDvr = details.live && details.totalduration > 30;
    state.windowSeconds = details.totalduration;
  });

  return { hls, state };
}

// src/dvr-ui.js
export function wireScrubber(video, hls, els) {
  const { scrubber, liveBadge, goLiveBtn, behindLabel } = els;

  function seekableRange() {
    if (!video.seekable.length) return null;
    return {
      start: video.seekable.start(0),
      end: video.seekable.end(video.seekable.length - 1),
    };
  }

  function render() {
    const range = seekableRange();
    if (!range) return;

    const span = range.end - range.start;
    if (span <= 0) return;

    // position within the window, 0..1
    const pos = (video.currentTime - range.start) / span;
    if (!scrubber.matches(':active')) {
      scrubber.value = String(Math.max(0, Math.min(1, pos)));
    }

    // how far behind the live edge are we?
    const behind = Math.max(0, hls.liveSyncPosition - video.currentTime);
    const atLive = behind < 10; // one-and-a-bit segments of slack

    liveBadge.classList.toggle('is-live', atLive);
    goLiveBtn.hidden = atLive;
    behindLabel.textContent = atLive ? 'LIVE' : `-${formatClock(behind)}`;
  }

  scrubber.addEventListener('input', () => {
    const range = seekableRange();
    if (!range) return;
    video.currentTime = range.start + Number(scrubber.value) * (range.end - range.start);
  });

  video.addEventListener('timeupdate', render);
  video.addEventListener('progress', render);
  return render;
}

function formatClock(seconds) {
  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
  const m = Math.floor(seconds / 60);
  return `${m}:${s}`;
}

// ❌ lands you at the newest byte with no buffer ahead, then stalls
video.currentTime = video.seekable.end(video.seekable.length - 1);

// ✅ src/go-live.js
export function goLive(video, hls) {
  const target = hls.liveSyncPosition;
  if (typeof target === 'number' && Number.isFinite(target)) {
    video.currentTime = target;
  } else if (video.seekable.length) {
    // fallback: back off from the edge ourselves
    const end = video.seekable.end(video.seekable.length - 1);
    video.currentTime = Math.max(0, end - 3 * (hls.levels[hls.currentLevel]?.details?.targetduration ?? 6));
  }
  if (video.paused) video.play();
}

// src/window-recovery.js
export function wireWindowRecovery(video, hls, onRecover) {
  function checkPlayhead() {
    if (!video.seekable.length) return;
    const start = video.seekable.start(0);
    if (video.currentTime < start) {
      // we fell out of the window while paused
      video.currentTime = start + 2; // small cushion past the edge
      onRecover?.();
    }
  }

  video.addEventListener('play', checkPlayhead);
  video.addEventListener('seeked', checkPlayhead);

  hls.on(Hls.Events.ERROR, (_e, data) => {
    if (data.details === Hls.ErrorDetails.FRAG_LOAD_ERROR && data.response?.code === 404) {
      // a segment we asked for is already gone; jump to the current window start
      checkPlayhead();
    }
  });
}

$ # simulate it: pause, wait past the window, press play
[dvr] playhead 412.8s fell behind window start 640.2s, recovering