Webcam: "Kamera offline"-Overlay + Auto-Recovery des Streams

ESP32-CAM haengt sich gelegentlich auf -> Bild blieb leer ohne Hinweis.

- Grabber merkt sich last_frame_ts; /api/webcam_status liefert online-Flag
  (online = letzter Frame < 5s her)
- webcam.html pollt alle 2s und blendet ein Offline-Overlay ein
- Auto-Recovery: kommt die Kamera zurueck, wird der MJPEG-Stream neu
  angestossen (<img> reconnectet sonst nach Abbruch nicht von selbst)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

templates/webcam.html

@@ -46,6 +46,27 @@
         .theme-toggle:hover {
             border-color: var(--muted);
         }
+        .offline-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1020px;
+            height: 600px;
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.78);
+            color: #fff;
+            border-radius: 8px;
+            text-align: center;
+            z-index: 5;
+        }
+        .offline-overlay.show { display: flex; }
+        .offline-overlay .icon { font-size: 54px; }
+        .offline-overlay .msg { font-size: 22px; font-weight: 600; }
+        .offline-overlay .sub { font-size: 14px; opacity: 0.8; }
         .video-container {
             position: relative;
             width: 1020px;
@@ -122,6 +143,11 @@
     <div class="video-container">
         <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>
     </div>
     <div class="controls">
         <button id="setLineBtn">Zähllinie setzen</button>
@@ -258,6 +284,28 @@
                 drawLine();
             }
         }, 100);
+
+        // --- Kamera-Online-Status pollen + Auto-Recovery des Streams ---
+        const videoFeed = document.getElementById('videoFeed');
+        const offlineOverlay = document.getElementById('offlineOverlay');
+        let camWasOffline = false;
+        async function checkCamStatus() {
+            let online = false;
+            try {
+                const res = await fetch('/api/webcam_status', { cache: 'no-store' });
+                online = (await res.json()).online;
+            } catch (e) {
+                online = false;
+            }
+            if (online && camWasOffline) {
+                // MJPEG-<img> reconnectet nach Stream-Abbruch nicht von selbst -> neu anstossen
+                videoFeed.src = "{{ url_for('webcam_feed') }}?t=" + Date.now();
+            }
+            camWasOffline = !online;
+            offlineOverlay.classList.toggle('show', !online);
+        }
+        checkCamStatus();
+        setInterval(checkCamStatus, 2000);
     </script>
     <script>
       function applyThemeBtn(){var d=document.documentElement.getAttribute('data-theme')==='dark';var b=document.getElementById('themeToggle');if(b)b.textContent=d?'☀️':'🌙';}