blob: 9a4ff083c9ede0965f2fc119fc2977307c41acf4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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>
|
