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

fix: stagger snapshot loading to prevent browser request flooding

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 12:24:28 +01:00
parent e93074e459
commit 58fd3307dd
1 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
public/app.js
View file

@ -64,6 +64,7 @@ async function loadCameras() {
function renderLiveGrid() {
const grid = document.getElementById('grid');
grid.innerHTML = '';
const tiles = [];
for (let i = 0; i < 8; i++) {
const cam = cameras[i];
const tile = document.createElement('div');
@ -71,25 +72,38 @@ function renderLiveGrid() {
tile.dataset.camId = cam ? cam.id : '';
if (cam && cam.enabled) {
// go2rtc snapshot endpoint — refresh every 2 seconds for live preview.
const snapshotURL = `http://${location.hostname}:1984/api/frame.jpeg?src=${cam.id}_sub`;
tile.innerHTML = `
<img src="${snapshotURL}" class="grid-snap" onerror="this.style.display='none'"
style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0" alt="${cam.name}">
<span class="tile-status ${cam.online ? 'online' : 'offline'}"></span>
<img src="" class="grid-snap" onerror="this.parentElement.classList.add('offline')"
style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0" alt="${cam.name}" loading="lazy">
<span class="tile-status online"></span>
<span class="tile-label">${cam.name}</span>
`;
// Auto-refresh snapshot.
setInterval(() => {
const img = tile.querySelector('img');
if (img) img.src = snapshotURL + '&t=' + Date.now();
}, 2000);
tile.addEventListener('click', () => openFocus(cam));
tiles.push({ tile, url: snapshotURL, cam });
} else {
tile.innerHTML = '<span class="tile-placeholder">No Camera</span>';
}
grid.appendChild(tile);
}
// Stagger snapshot loading — one every 300ms to avoid flooding go2rtc.
let idx = 0;
function loadNext() {
if (idx >= tiles.length) return;
const { tile, url } = tiles[idx];
const img = tile.querySelector('img');
if (img) {
img.src = url + '&t=' + Date.now();
// Refresh this tile every 3 seconds (staggered per camera).
setInterval(() => {
img.src = url + '&t=' + Date.now();
}, 3000 + idx * 200);
}
idx++;
setTimeout(loadNext, 300);
}
loadNext();
}
// ── Focus Overlay ──