diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/client.html | 34 |
1 files changed, 22 insertions, 12 deletions
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) { |