joachim/vehicle-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Webcam: Button zum Freigeben/Uebernehmen der Kamera (ESP32-Slot)

Browse Source 
Trotz GRABBER_ALWAYS_ON=1 kann der ESP32-Slot per Button manuell
freigegeben werden (z.B. um die Cam woanders direkt zu oeffnen).
Freigegeben = Slot frei + Zaehlung pausiert; uebernehmen = wieder zaehlen.

- Grabber: paused-Flag, hat Vorrang vor ALWAYS_ON/Karenzzeit
- /api/grabber_toggle + paused-Feld in /api/webcam_status
- Button + eigener Overlay-Text ("Kamera freigegeben") im Frontend

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Joachim Hummel
2026-06-02 10:59:25 +02:00
parent 264b2b3e3b
commit 85747d7a42
2 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
templates/webcam.html
View File

@@ -144,14 +144,15 @@
<img id="videoFeed" src="{{ url_for('webcam_feed') }}" />
<canvas id="lineCanvas"></canvas>
<div id="offlineOverlay" class="offline-overlay">
<div class="icon">📷</div>
<div class="msg">Kamera offline</div>
<div class="sub">Versuche neu zu verbinden…</div>
<div class="icon" id="ovIcon">📷</div>
<div class="msg" id="ovMsg">Kamera offline</div>
<div class="sub" id="ovSub">Versuche neu zu verbinden…</div>
</div>
</div>
<div class="controls">
<button id="setLineBtn">Zähllinie setzen</button>
<button id="resetCountBtn" class="danger">Zähler zurücksetzen</button>
<button id="grabberBtn">Kamera freigeben</button>
</div>
<div class="info" id="infoText">Klicke auf "Zähllinie setzen" und dann zweimal auf das Video, um die Zähllinie zu definieren.</div>
<a href="/">Back to Home</a>
@@ -288,20 +289,36 @@
// --- Kamera-Online-Status pollen + Auto-Recovery des Streams ---
const videoFeed = document.getElementById('videoFeed');
const offlineOverlay = document.getElementById('offlineOverlay');
const ovIcon = document.getElementById('ovIcon');
const ovMsg = document.getElementById('ovMsg');
const ovSub = document.getElementById('ovSub');
const grabberBtn = document.getElementById('grabberBtn');
let offlineStreak = 0; // aufeinanderfolgende Offline-Abfragen
let reloadPending = false; // erst nach echtem Ausfall den Stream neu laden
const OFFLINE_POLLS = 3; // ~6s -> erst dann "wirklich offline"
function showOverlay(icon, msg, sub) {
ovIcon.textContent = icon; ovMsg.textContent = msg; ovSub.textContent = sub;
offlineOverlay.classList.add('show');
}
async function checkCamStatus() {
let online = false;
let online = false, paused = false;
try {
const res = await fetch('/api/webcam_status', { cache: 'no-store' });
online = (await res.json()).online;
} catch (e) {
online = false;
const d = await (await fetch('/api/webcam_status', { cache: 'no-store' })).json();
online = d.online; paused = d.paused;
} catch (e) { online = false; }
grabberBtn.textContent = paused ? 'Kamera übernehmen' : 'Kamera freigeben';
grabberBtn.classList.toggle('active', paused);
if (paused) {
showOverlay('⏸️', 'Kamera freigegeben', 'Slot frei für anderen Zugriff – Zählung pausiert');
offlineStreak = 0;
reloadPending = true; // beim Wiederaufnehmen Stream neu laden
return;
}
if (online) {
// Nur nach einem laengeren Ausfall den MJPEG-Stream neu anstossen
// (sonst Verbindungs-/Reconnect-Churn bei kurzen Aussetzern).
if (reloadPending) {
videoFeed.src = "{{ url_for('webcam_feed') }}?t=" + Date.now();
reloadPending = false;
@@ -311,11 +328,21 @@
} else {
offlineStreak++;
if (offlineStreak >= OFFLINE_POLLS) {
offlineOverlay.classList.add('show');
showOverlay('📷', 'Kamera offline', 'Versuche neu zu verbinden…');
reloadPending = true;
}
}
}
grabberBtn.addEventListener('click', async () => {
grabberBtn.disabled = true;
try {
await fetch('/api/grabber_toggle', { method: 'POST' });
} catch (e) { /* ignorieren */ }
grabberBtn.disabled = false;
checkCamStatus();
});
checkCamStatus();
setInterval(checkCamStatus, 2000);
</script>