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

fix: focus mode embeds go2rtc WebRTC player iframe — real live video

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 13:54:40 +01:00
parent 5d327e61af
commit 10666f52d0
1 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
public/app.js
View file

@ -94,24 +94,27 @@ 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');
refreshFocus(); // Remove any previous iframe.
renderThumbs(); const oldFrame = overlay.querySelector('iframe.go2rtc');
// Fast JPEG refresh — 200ms = ~5fps, smooth enough for monitoring. if (oldFrame) oldFrame.remove();
focusTimer = setInterval(refreshFocus, 200); // Create go2rtc WebRTC player iframe — real live video.
} const container = document.getElementById('focus-video').parentElement;
function refreshFocus() { const iframe = document.createElement('iframe');
if (focusIdx < 0 || focusIdx >= cameras.length) return; iframe.className = 'go2rtc';
const cam = cameras[focusIdx]; iframe.allow = 'autoplay';
iframe.style.cssText = 'width:100%;height:100%;border:none;flex:1';
iframe.src = `http://${location.hostname}:1984/stream.html?src=${cam.id}_sub&mode=webrtc,mse,mp4`;
container.insertBefore(iframe, document.getElementById('focus-video'));
document.getElementById('focus-video').style.display = 'none';
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() + ' live';
const img = document.getElementById('focus-video'); renderThumbs();
img.src = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`;
} }
function updateFocus() {}
function renderThumbs() { function renderThumbs() {
const strip = document.getElementById('focus-thumbs'); const strip = document.getElementById('focus-thumbs');
strip.innerHTML = ''; strip.innerHTML = '';
@ -125,23 +128,25 @@ function renderThumbs() {
}); });
} }
document.getElementById('focus-close').addEventListener('click', () => { document.getElementById('focus-close').addEventListener('click', () => {
document.getElementById('focus-overlay').classList.add('hidden'); const overlay = document.getElementById('focus-overlay');
if (focusTimer) { clearInterval(focusTimer); focusTimer = null; } overlay.classList.add('hidden');
const iframe = overlay.querySelector('iframe.go2rtc');
if (iframe) iframe.remove();
document.getElementById('focus-video').style.display = '';
}); });
document.getElementById('focus-prev').addEventListener('click', () => { document.getElementById('focus-prev').addEventListener('click', () => {
if (focusIdx > 0) { focusIdx--; refreshFocus(); renderThumbs(); } if (focusIdx > 0) { focusIdx--; openFocus(cameras[focusIdx]); }
}); });
document.getElementById('focus-next').addEventListener('click', () => { document.getElementById('focus-next').addEventListener('click', () => {
if (focusIdx < cameras.length - 1) { focusIdx++; refreshFocus(); renderThumbs(); } if (focusIdx < cameras.length - 1) { focusIdx++; openFocus(cameras[focusIdx]); }
}); });
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') { if (e.key === 'Escape') {
document.getElementById('focus-overlay').classList.add('hidden'); document.getElementById('focus-close').click();
if (focusTimer) { clearInterval(focusTimer); focusTimer = null; }
} }
if (e.key === 'ArrowLeft' && focusIdx > 0) { focusIdx--; refreshFocus(); renderThumbs(); } if (e.key === 'ArrowLeft' && focusIdx > 0) { focusIdx--; openFocus(cameras[focusIdx]); }
if (e.key === 'ArrowRight' && focusIdx < cameras.length - 1) { focusIdx++; refreshFocus(); renderThumbs(); } if (e.key === 'ArrowRight' && focusIdx < cameras.length - 1) { focusIdx++; openFocus(cameras[focusIdx]); }
}); });
// ── Playback ── // ── Playback ──