cclohmar/NextNVR
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: focus mode uses fast-refresh JPEG — no codec dependency

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 12:51:02 +01:00
parent 31cc243830
commit 0bc81b5087
1 changed files with 13 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/app.js
View file

@ -94,35 +94,26 @@ function renderLiveGrid() {
// ── Focus Overlay ── // ── Focus Overlay ──
let focusIdx = -1; let focusIdx = -1;
let focusTimer = null;
function openFocus(cam) { function openFocus(cam) {
focusIdx = cameras.indexOf(cam); focusIdx = cameras.indexOf(cam);
const overlay = document.getElementById('focus-overlay'); const overlay = document.getElementById('focus-overlay');
overlay.classList.remove('hidden'); overlay.classList.remove('hidden');
updateFocus(); updateFocus();
renderThumbs(); renderThumbs();
// Refresh snapshot every 500ms for smooth near-live view.
focusTimer = setInterval(updateFocus, 500);
} }
function updateFocus() { function updateFocus() {
if (focusIdx < 0 || focusIdx >= cameras.length) return; if (focusIdx < 0 || focusIdx >= cameras.length) return;
const cam = cameras[focusIdx]; const cam = cameras[focusIdx];
document.getElementById('focus-title').textContent = cam.name; document.getElementById('focus-title').textContent = cam.name;
document.getElementById('focus-time').textContent = new Date().toLocaleTimeString() + ' live'; document.getElementById('focus-time').textContent = new Date().toLocaleTimeString();
// Use the latest.jpg directly — updated every 2s by snapshot engine.
// go2rtc WebRTC player — works in all browsers. // Fast 500ms refresh gives smooth enough monitoring.
const vid = document.getElementById('focus-video'); const vid = document.getElementById('focus-video');
const streamURL = `http://${location.hostname}:1984/stream.html?src=${cam.id}_main&mode=webrtc`; vid.style.display = 'block';
// Use iframe for proper WebRTC support. vid.poster = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`;
const container = vid.parentElement;
// Replace video element with iframe for go2rtc's player.
let iframe = container.querySelector('iframe.go2rtc-player');
if (!iframe) {
iframe = document.createElement('iframe');
iframe.className = 'go2rtc-player';
iframe.allow = 'autoplay; camera; microphone';
iframe.style.cssText = 'width:100%;height:100%;border:none;position:absolute;inset:0';
vid.style.display = 'none';
container.appendChild(iframe);
}
iframe.src = streamURL;
} }
function renderThumbs() { function renderThumbs() {
const strip = document.getElementById('focus-thumbs'); const strip = document.getElementById('focus-thumbs');
@ -138,6 +129,7 @@ function renderThumbs() {
} }
document.getElementById('focus-close').addEventListener('click', () => { document.getElementById('focus-close').addEventListener('click', () => {
document.getElementById('focus-overlay').classList.add('hidden'); document.getElementById('focus-overlay').classList.add('hidden');
if (focusTimer) { clearInterval(focusTimer); focusTimer = null; }
}); });
document.getElementById('focus-prev').addEventListener('click', () => { document.getElementById('focus-prev').addEventListener('click', () => {
if (focusIdx > 0) { focusIdx--; updateFocus(); renderThumbs(); } if (focusIdx > 0) { focusIdx--; updateFocus(); renderThumbs(); }
@ -147,7 +139,10 @@ document.getElementById('focus-next').addEventListener('click', () => {
}); });
document.addEventListener('keydown', e => { document.addEventListener('keydown', e => {
if (document.getElementById('focus-overlay').classList.contains('hidden')) return; if (document.getElementById('focus-overlay').classList.contains('hidden')) return;
if (e.key === 'Escape') document.getElementById('focus-overlay').classList.add('hidden'); if (e.key === 'Escape') {
document.getElementById('focus-overlay').classList.add('hidden');
if (focusTimer) { clearInterval(focusTimer); focusTimer = null; }
}
if (e.key === 'ArrowLeft' && focusIdx > 0) { focusIdx--; updateFocus(); renderThumbs(); } if (e.key === 'ArrowLeft' && focusIdx > 0) { focusIdx--; updateFocus(); renderThumbs(); }
if (e.key === 'ArrowRight' && focusIdx < cameras.length - 1) { focusIdx++; updateFocus(); renderThumbs(); } if (e.key === 'ArrowRight' && focusIdx < cameras.length - 1) { focusIdx++; updateFocus(); renderThumbs(); }
}); });