WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 32 Pull requests 7 Projects Releases Packages Wiki Activity Actions

fix: filmstrip — fetch video chunk as Blob URL, append probe to DOM, add timeout

Browse source
This commit is contained in:
Zac Gaetano 2026-05-25 11:21:38 -04:00
parent 0481fb3ecf
commit 7ea3a235da
1 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
services/web-ui/public/screens-asset.jsx
View file

@ -79,6 +79,10 @@ function AssetDetail({ asset, onClose }) {
}, [streamUrl, streamType]); }, [streamUrl, streamType]);
// Build filmstrip from real video frames. HLS streams use hls.js probe. // Build filmstrip from real video frames. HLS streams use hls.js probe.
// For MP4, we fetch the first 10 MB as a Blob to feed the probe video —
// this works reliably even in headless browsers where <video> network loading
// often stalls, and ensures the moov atom (placed at the start by faststart)
// is already buffered when the probe element reads it.
React.useEffect(() => { React.useEffect(() => {
if (!streamUrl || totalMs <= 0) { if (!streamUrl || totalMs <= 0) {
setFilmFrames([]); setFilmFrames([]);
@ -88,19 +92,23 @@ function AssetDetail({ asset, onClose }) {
let cancelled = false; let cancelled = false;
const build = async function() { const build = async function() {
setFilmstripLoading(true); setFilmstripLoading(true);
const probe = document.createElement('video'); let probe = null;
probe.crossOrigin = 'anonymous'; let blobUrl = null;
probe.muted = true;
probe.playsInline = true;
probe.preload = 'auto';
probe.style.cssText = 'position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;pointer-events:none';
document.body.appendChild(probe);
const timeout = setTimeout(function() { const timeout = setTimeout(function() {
probe.remove(); if (blobUrl) URL.revokeObjectURL(blobUrl);
if (probe) probe.remove();
if (!cancelled) { setFilmFrames([]); setFilmstripLoading(false); } if (!cancelled) { setFilmFrames([]); setFilmstripLoading(false); }
cancelled = true; cancelled = true;
}, 15000); }, 15000);
try { try {
probe = document.createElement('video');
probe.crossOrigin = 'anonymous';
probe.muted = true;
probe.playsInline = true;
probe.preload = 'auto';
probe.style.cssText = 'position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;pointer-events:none';
document.body.appendChild(probe);
if (streamType === 'hls') { if (streamType === 'hls') {
if (!window.Hls) throw new Error('hls.js not loaded'); if (!window.Hls) throw new Error('hls.js not loaded');
await new Promise(function(resolve, reject) { await new Promise(function(resolve, reject) {
@ -114,10 +122,16 @@ function AssetDetail({ asset, onClose }) {
hls.attachMedia(probe); hls.attachMedia(probe);
}); });
} else { } else {
// Pre-buffer the first 10 MB as a Blob — proxies use faststart so
// the moov atom lives at the start, making this sufficient to parse
// the full duration and seek any frame.
const resp = await fetch(streamUrl, { headers: { Range: 'bytes=0-10485760' } });
const blob = await resp.blob();
blobUrl = URL.createObjectURL(blob);
await new Promise(function(resolve, reject) { await new Promise(function(resolve, reject) {
probe.onloadedmetadata = resolve; probe.onloadedmetadata = resolve;
probe.onerror = reject; probe.onerror = reject;
probe.src = streamUrl; probe.src = blobUrl;
}); });
} }
const frameCount = 28; const frameCount = 28;
@ -154,7 +168,8 @@ function AssetDetail({ asset, onClose }) {
if (!cancelled) setFilmFrames([]); if (!cancelled) setFilmFrames([]);
} finally { } finally {
clearTimeout(timeout); clearTimeout(timeout);
probe.remove(); if (blobUrl) URL.revokeObjectURL(blobUrl);
if (probe) probe.remove();
if (!cancelled) setFilmstripLoading(false); if (!cancelled) setFilmstripLoading(false);
} }
}; };