Verbessere Streaming-Sicherheit

templates/webcam.html

@@ -99,8 +99,9 @@
     <a href="/">Back to Home</a>
 
     <script>
-        const canvas = document.getElementById('lineCanvas');
-        const ctx = canvas.getContext('2d');
+        const streamId = "{{ stream_id | default('') }}";
+        const canvas = document.getElementById('lineCanvas');
+        const ctx = canvas.getContext('2d');
         const setLineBtn = document.getElementById('setLineBtn');
         const resetCountBtn = document.getElementById('resetCountBtn');
         const infoText = document.getElementById('infoText');
@@ -173,20 +174,28 @@
             }
         });
 
-        resetCountBtn.addEventListener('click', () => {
-            if (confirm('Zähler zurücksetzen? Die Seite wird neu geladen.')) {
-                fetch('/api/reset_count', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' }
-                })
-                .then(res => res.json())
-                .then(data => {
-                    console.log('Count reset:', data);
-                    // Reload page to reset the video stream and counter
-                    location.reload();
-                });
-            }
-        });
+        resetCountBtn.addEventListener('click', () => {
+            if (confirm('Zähler zurücksetzen?')) {
+                fetch('/api/reset_count', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ stream_id: streamId })
+                })
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Zurücksetzen fehlgeschlagen');
+                    }
+                    return res.json();
+                })
+                .then(() => {
+                    infoText.textContent = 'Zähler wird zurückgesetzt...';
+                    setTimeout(() => {
+                        infoText.textContent = 'Klicke auf "Zähllinie setzen" und dann zweimal auf das Video, um die Zähllinie zu definieren.';
+                    }, 2000);
+                })
+                .catch(err => alert(err.message));
+            }
+        });
 
         function drawLine() {
             ctx.clearRect(0, 0, canvas.width, canvas.height);