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

fix filmstrip: use hls.js for HLS stream frame capture, not only direct streams

Browse source
This commit is contained in:
Zac Gaetano 2026-05-25 09:30:40 -04:00
parent b345f5f6a4
commit 37c406bf4d
1 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,9 +78,9 @@ function AssetDetail({ asset, onClose }) {
return function() { hls.destroy(); };
}, [streamUrl, streamType]);
// Build filmstrip from real video when browser-playable media exists.
// Build filmstrip from real video frames. HLS streams use hls.js probe.
React.useEffect(() => {
if (!streamUrl || totalMs <= 0 || streamType === 'hls') {
if (!streamUrl || totalMs <= 0) {
setFilmFrames([]);
setFilmstripLoading(false);
return;
@ -94,11 +94,25 @@ function AssetDetail({ asset, onClose }) {
probe.muted = true;
probe.playsInline = true;
probe.preload = 'auto';
if (streamType === 'hls') {
if (!window.Hls) throw new Error('hls.js not loaded');
await new Promise(function(resolve, reject) {
const hls = new window.Hls();
hls.on(window.Hls.Events.MANIFEST_PARSED, function() {
probe.oncanplay = function() { probe.oncanplay = null; resolve(); };
probe.onerror = reject;
});
hls.on(window.Hls.Events.ERROR, function(ev, data) { reject(data); });
hls.loadSource(streamUrl);
hls.attachMedia(probe);
});
} else {
probe.src = streamUrl;
await new Promise(function(resolve, reject) {
probe.onloadedmetadata = resolve;
probe.onerror = reject;
});
}
const frameCount = 28;
const width = 160;
const height = 90;