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

fix: focus mode uses go2rtc MJPEG stream for real live video

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 13:01:22 +01:00
parent 0bc81b5087
commit f248b796c6
2 changed files with 5 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
public/app.js
View file

@ -94,26 +94,21 @@ function renderLiveGrid() {
// ── Focus Overlay ──
let focusIdx = -1;
let focusTimer = null;
function openFocus(cam) {
focusIdx = cameras.indexOf(cam);
const overlay = document.getElementById('focus-overlay');
overlay.classList.remove('hidden');
updateFocus();
renderThumbs();
// Refresh snapshot every 500ms for smooth near-live view.
focusTimer = setInterval(updateFocus, 500);
}
function updateFocus() {
if (focusIdx < 0 || focusIdx >= cameras.length) return;
const cam = cameras[focusIdx];
document.getElementById('focus-title').textContent = cam.name;
document.getElementById('focus-time').textContent = new Date().toLocaleTimeString();
// Use the latest.jpg directly — updated every 2s by snapshot engine.
// Fast 500ms refresh gives smooth enough monitoring.
const vid = document.getElementById('focus-video');
vid.style.display = 'block';
vid.poster = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`;
document.getElementById('focus-time').textContent = new Date().toLocaleTimeString() + ' live';
// go2rtc MJPEG stream — real live video via <img> tag, works in all browsers.
const img = document.getElementById('focus-video');
img.src = `http://${location.hostname}:1984/api/stream.mjpeg?src=${cam.id}_sub`;
}
function renderThumbs() {
const strip = document.getElementById('focus-thumbs');
@ -129,7 +124,6 @@ function renderThumbs() {
}
document.getElementById('focus-close').addEventListener('click', () => {
document.getElementById('focus-overlay').classList.add('hidden');
if (focusTimer) { clearInterval(focusTimer); focusTimer = null; }
});
document.getElementById('focus-prev').addEventListener('click', () => {
if (focusIdx > 0) { focusIdx--; updateFocus(); renderThumbs(); }
@ -141,7 +135,6 @@ document.addEventListener('keydown', e => {
if (document.getElementById('focus-overlay').classList.contains('hidden')) return;
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 === 'ArrowRight' && focusIdx < cameras.length - 1) { focusIdx++; updateFocus(); renderThumbs(); }

2
public/index.html
View file

@ -29,7 +29,7 @@
<button id="focus-close">✕</button>
<button id="focus-next">▶</button>
</div>
<video id="focus-video" autoplay muted playsinline></video>
<img id="focus-video" alt="Live stream">
<div id="focus-thumbs" class="thumb-strip"></div>
</div>
</section>