diff options
| author | Franoosh <uinarf@autistici.org> | 2025-07-25 17:13:38 +0200 |
|---|---|---|
| committer | Franoosh <uinarf@autistici.org> | 2025-10-15 14:33:59 +0200 |
| commit | 68bd1bd052a7cd6438b92cb1059ef5e58b8d022c (patch) | |
| tree | 5a7eab3022a7593bd3d9dbdcc99a1590ab0fc3bc /templates | |
| download | ZeroMQ_Video_Streaming-68bd1bd052a7cd6438b92cb1059ef5e58b8d022c.tar.gz ZeroMQ_Video_Streaming-68bd1bd052a7cd6438b92cb1059ef5e58b8d022c.tar.bz2 ZeroMQ_Video_Streaming-68bd1bd052a7cd6438b92cb1059ef5e58b8d022c.zip | |
Initial commit. Proof of concept message passing between client <-> router <-> worker with rudimentary caching
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/client.html | 47 | ||||
| -rw-r--r-- | templates/client.html.bak | 41 | ||||
| -rw-r--r-- | templates/main.html | 16 | ||||
| -rw-r--r-- | templates/main.html.bak | 35 |
4 files changed, 139 insertions, 0 deletions
diff --git a/templates/client.html b/templates/client.html new file mode 100644 index 0000000..e03394a --- /dev/null +++ b/templates/client.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> + <title>Client {{ client_id }} - Camera Streams</title> + <style> + .camera-stream { display: inline-block; margin: 10px; } + video { border: 1px solid #333; } + </style> +</head> +<body> + <h1>Camera Streams for client: {{ client_id }}</h1> + <div class="streams-container"> + {% for camera_id in camera_ids %} + <div class="camera-stream"> + <h2>Camera {{ camera_id }}</h2> + <img id="video-{{ camera_id }}" width="640" height="480" /> + </div> + {% endfor %} + </div> + <script> + // For each camera, open a WebSocket and update the corresponding <img> + {% for camera_id in camera_ids %} + (function() { + let ws = new WebSocket('ws://' + window.location.host + '/ws/{{ client_id }}/{{ camera_id }}'); + let image = document.getElementById('video-{{ camera_id }}'); + let currentUrl = null; + ws.onmessage = function(event) { + if (currentUrl) { + URL.revokeObjectURL(currentUrl); + } + currentUrl = URL.createObjectURL(event.data); + image.src = currentUrl; + }; + ws.onclose = function(event) { + console.log('WebSocket closed for camera {{ camera_id }}:', event); + }; + ws.onerror = function(event) { + console.log('WebSocket error for camera {{ camera_id }}:', event); + }; + window.addEventListener('beforeunload', function() { + ws.close(); + }); + })(); + {% endfor %} + </script> +</body> +</html> diff --git a/templates/client.html.bak b/templates/client.html.bak new file mode 100644 index 0000000..9a4ff08 --- /dev/null +++ b/templates/client.html.bak @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>Client {{ client_id }} - Camera Streams</title> + <style> + .camera-stream { display: inline-block; margin: 10px; } + video { border: 1px solid #333; } + </style> +</head> +<body> + <h1>Camera Streams for Client {{ client_id }}</h1> + {% for camera_id in camera_ids %} + <div class="camera-stream"> + <h2>Camera {{ camera_id }}</h2> + <img id="video-{{ camera_id }}" width="640" height="480" /> + </div> + {% endfor %} + <script> + {% for camera_id in camera_ids %} + (function() { + // const ws = new WebSocket("ws://127.0.0.1:8008/ws/client_task/front_camera"); + const ws = new WebSocket("ws://${location.host}/ws/{{ client_id }}/{{ camera_id }}"); + const img = document.getElementById("video-{{ camera_id }}"); + ws.binaryType = "arraybuffer"; + ws.onopen = function(event) { + console.log("Connection on websocket open"); + } + ws.onmessage = function(event) { + console.log("Received frame data size: ", event.data.byteLength); + const blob = new Blob([event.data], {type: "image/jpeg"}); + // document.getElementById("video").src = URL.createObjectURL(blob); + img.src = URL.createObjectURL(blob); + }; + ws.onerror = function(event) { + console.error("Websocket error: ", event); + }; + })(); + {% endfor %} + </script> +</body> +</html> diff --git a/templates/main.html b/templates/main.html new file mode 100644 index 0000000..e0eaa52 --- /dev/null +++ b/templates/main.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>Live Streaming</title> +</head> +<body> + <h1>Streaming live.</h1> + {% for client_id in clients.keys() %} + <h2>Client {{ client_id }}</h2> + <li> + <a href="/clients/{{ client_id }}"> Client {{ client_id }} streams + </a> + <li> + {% endfor %} +</body> +</html> diff --git a/templates/main.html.bak b/templates/main.html.bak new file mode 100644 index 0000000..7bb2ee5 --- /dev/null +++ b/templates/main.html.bak @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Live Streaming</title> + </head> + <body> + <img id="frame" src=""> + <h1>Streaming. Live.</h1> + <script> + let ws = new WebSocket("ws://127.0.0.1:8880/{{client_id}}/{{camera_id}}"); + let image = document.getElementById("frame"); + let currentUrl = null; + + ws.onmessage = function(event) { + if (currentUrl) { + URL.revokeObjectURL(currentUrl); + } + currentUrl = URL.createObjectURL(event.data); + image.src = currentUrl; + }; + + ws.onclose = function(event) { + console.log("WebSocket closed:", event); + }; + + ws.onerror = function(event) { + console.log("WebSocket error:", event); + }; + + window.addEventListener('beforeunload', function() { + ws.close(); + }); + </script> + </body> +</html> |