62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
'use strict';
|
||
|
||
// go2rtc-Player-Modi in Fallback-Reihenfolge.
|
||
// webrtc zuerst (niedrigste Latenz), dann MSE, dann MJPEG – das verhindert
|
||
// schwarze Seiten: schlägt WebRTC fehl, springt der Player automatisch weiter.
|
||
const MODE = 'webrtc,mse,mjpeg';
|
||
|
||
function buildCamera(camId, container) {
|
||
const box = document.createElement('div');
|
||
box.className = 'cam-box';
|
||
|
||
// go2rtc Web-Component – verbindet sich relativ auf /api/ws (→ Node-Proxy)
|
||
const stream = document.createElement('video-stream');
|
||
stream.mode = MODE;
|
||
stream.src = `/api/ws?src=${encodeURIComponent(camId)}`;
|
||
box.appendChild(stream);
|
||
|
||
const label = document.createElement('div');
|
||
label.className = 'cam-label';
|
||
label.textContent = camId;
|
||
box.appendChild(label);
|
||
|
||
const actions = document.createElement('div');
|
||
actions.className = 'cam-actions';
|
||
const snapBtn = document.createElement('button');
|
||
snapBtn.textContent = 'Snapshot';
|
||
snapBtn.onclick = () => {
|
||
const a = document.createElement('a');
|
||
a.href = `/api/snapshot/${camId}`;
|
||
a.download = `${camId}_${Date.now()}.jpg`;
|
||
a.click();
|
||
};
|
||
actions.appendChild(snapBtn);
|
||
box.appendChild(actions);
|
||
|
||
container.appendChild(box);
|
||
}
|
||
|
||
async function init() {
|
||
// Warten bis die go2rtc-Web-Component definiert ist (sonst greift der .src-Setter nicht)
|
||
await customElements.whenDefined('video-stream');
|
||
|
||
const container = document.getElementById('cameras');
|
||
const statusText = document.getElementById('statusText');
|
||
|
||
let cams = ['cam0', 'cam1']; // Fallback
|
||
try {
|
||
const r = await fetch('/api/snapshot');
|
||
const d = await r.json();
|
||
if (Array.isArray(d.cameras) && d.cameras.length) {
|
||
cams = d.cameras.map(c => c.id);
|
||
}
|
||
} catch (err) {
|
||
console.warn('Kamera-Liste nicht abrufbar, nutze Fallback:', err.message);
|
||
}
|
||
|
||
cams.forEach(id => buildCamera(id, container));
|
||
statusText.textContent = `${cams.length} Kamera${cams.length !== 1 ? 's' : ''} · WebRTC`;
|
||
}
|
||
|
||
init();
|