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

fix: grid tiles open go2rtc WebRTC player directly — real live stream

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 13:59:03 +01:00
parent 10666f52d0
commit 0b5dc7d88e
1 changed files with 9 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
public/app.js
View file

@ -84,7 +84,9 @@ function renderLiveGrid() {
const img = tile.querySelector('img'); const img = tile.querySelector('img');
if (img) img.src = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`; if (img) img.src = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`;
}, 3000); }, 3000);
tile.addEventListener('click', () => openFocus(cam)); tile.addEventListener('click', () => {
window.open(`http://${location.hostname}:1984/?src=${cam.id}_sub`, '_blank');
});
} else { } else {
tile.innerHTML = '<span class="tile-placeholder">No Camera</span>'; tile.innerHTML = '<span class="tile-placeholder">No Camera</span>';
} }
@ -96,25 +98,16 @@ function renderLiveGrid() {
let focusIdx = -1; let focusIdx = -1;
function openFocus(cam) { function openFocus(cam) {
focusIdx = cameras.indexOf(cam); focusIdx = cameras.indexOf(cam);
const overlay = document.getElementById('focus-overlay'); // Open go2rtc's built-in WebRTC player in a new tab.
overlay.classList.remove('hidden'); // The player provides full live video with sub-second latency.
// Remove any previous iframe. const url = `http://${location.hostname}:1984/?src=${cam.id}_sub`;
const oldFrame = overlay.querySelector('iframe.go2rtc'); window.open(url, '_blank');
if (oldFrame) oldFrame.remove(); // Also update the overlay for keyboard nav.
// Create go2rtc WebRTC player iframe — real live video.
const container = document.getElementById('focus-video').parentElement;
const iframe = document.createElement('iframe');
iframe.className = 'go2rtc';
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';
renderThumbs(); renderThumbs();
} }
function updateFocus() {} function updateFocus() {}
function updateFocus() {}
function renderThumbs() { function renderThumbs() {
const strip = document.getElementById('focus-thumbs'); const strip = document.getElementById('focus-thumbs');
strip.innerHTML = ''; strip.innerHTML = '';