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>