From 28150dd2c4d03ed844e8d1a5cfc463f5d1f9b45f Mon Sep 17 00:00:00 2001
From: Franoosh <uinarf@autistici.org>
Date: Tue, 26 May 2026 16:32:13 +0200
Subject: client.cfg : move log dir to /var/log client.py : use
 ComputingContoursException and DetectMovementException helpers.py : define
 ComputingContoursException and DetectMovementException clients.html : small
 changes webserver.py : minor changes worker.py : log disconnectd from web
 client on debug, not info

---
 templates/client.html | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

(limited to 'templates')
diff --git a/templates/client.html b/templates/client.html
index 785fbcf..09365df 100644
--- a/templates/client.html
+++ b/templates/client.html
@@ -3,6 +3,7 @@
 <head>
     <title>Client {{ client_id }} - Camera Streams</title>
     <link rel="stylesheet" href="{{ url_for('static', path='css/main.css') }}">
+    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
     <style>
         .camera-stream { display: inline-block; margin: 10px; }
         video { border: 1px solid #333; }
@@ -53,16 +54,16 @@
                 <button onclick="sendConfig('{{ camera_id }}', 'modify_camera_grace_pd')">Send</button>
             </div>
             <div>
-                <h3>Recorded Videos for {{ camera_id }}</h3>
-                <ul id="video-list-{{ camera_id }}" class="scroll-box">
-                    {% for filename, video_url, timestamp in client_videos[camera_id] %}
-                    <li><a href="{{ video_url }}">{{ filename }}</a> ({{ timestamp }})</li>
-                    <!-- <h3>video file: {{ filename }}</h3>
-                    <video src="{{ video_url }}" type="video/ogg" width="320" height="240" controls></video>
-                    <hr4>creation: {{ timestamp }}</h3>
-                    -->
-                    {% endfor %}
-                </ul>
+                <h3>
+                <details>
+                    <summary>Recorded videos for camera: {{ camera_id }}</summary>
+                    <ul id="video-list-{{ camera_id }}" class="scroll-box">
+                        {% for filename, video_url, timestamp in client_videos[camera_id] %}
+                        <li><a href="{{ video_url }}">{{ filename }}</a> ({{ timestamp }})</li>
+                        {% endfor %}
+                    </ul>
+                </details>
+                </h3>
             </div>
         </div>
         {% endfor %}
@@ -91,14 +92,23 @@
     // For each camera, open a WebSocket and update the corresponding <img>
     (function() {
         const cameraId = '{{ camera_id }}';
-        const ws = new WebSocket('ws://' + window.location.host + '/ws/{{ client_id }}/' + cameraId);
+        const wsUrl = window.location.origin.replace(/^http/, 'ws') + '/ws/{{ client_id }}/' + cameraId;
+        const ws = new WebSocket(wsUrl);
+        ws.binaryType = 'arraybuffer';
         let currentUrl = null;
         ws.onmessage = function(event) {
             let image = document.getElementById('video-' + cameraId);
+            if (!image) {
+                return;
+            }
+
             if (currentUrl) {
                 URL.revokeObjectURL(currentUrl);
             }
-            currentUrl = URL.createObjectURL(event.data);
+
+            // Ensure we always have a Blob for createObjectURL
+            const blob = event.data instanceof Blob ? event.data : new Blob([event.data], { type: 'image/jpeg' });
+            currentUrl = URL.createObjectURL(blob);
             image.src = currentUrl;
         };
         ws.onclose = function(event) {
-- 
cgit v1.3

