-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (162 loc) · 5.16 KB
/
index.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Valkka Streamer Demo App</title>
<link href="./lib/bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./css/starter-template.css" rel="stylesheet">
</head>
<body>
<div class="col-lg-8 mx-auto p-3 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<img src="assets/logo.png" width="60px">
<span class="fs-4">  Valkka Streamer </span>
</a>
</header>
<main>
<h1>IP Camera Stream</h1>
<p class="g-5 col-md-8">
Please try the control buttons to pan and zoom and « / » to go back / fw in time
</p>
<p class="g-5 col-md-8">
Create some movement to trigger detection
</p>
<video
hidden="true"
id="streamer"
height="640"
control_buttons="true"
autoplay="true"
muted="muted"
preload="auto">
<!-- chrome needs the "muted" attribute
https://stackoverflow.com/questions/49930680/how-to-handle-uncaught-in-promise-domexception-play-failed-because-the-use
chrome is annoying: changing these specs all the time. Just let it f-autoplay!
-->
Your browser does not support the video tag.
</video>
<canvas
id="video-canvas"
width="840px"
height="468px"
>
</canvas>
<div id="control-buttons"></div>
</main>
<footer class="pt-5 my-5 text-muted border-top">
© 2023 Sampsa Riikonen
</footer>
</div>
<div id="popup-form"></div>
</body>
<script src="./lib/bootstrap-5.2.3-dist/js/bootstrap.bundle.min.js"></script>
<script type="module">
import { getPageParameters } from './lib/base/widget.js';
import { ControlButtons } from './app/controlbuttons.js';
import { Streamer } from './app/streamer.js';
import { VideoCanvas } from './app/videocanvas.js';
// import { CuteAlert } from './app/cutealert.js'; // TODO
/* // hardcode for debugging:
let ws_adr="ws://localhost:8088/ws/stream/mummocamera1"
let ws_msg_adr="ws://localhost:8088/ws/message/mummocamera1"
*/
let pars=getPageParameters()
console.log("page url-encoded parameters:", pars)
if (!pars["name"]) {
alert("Define ?name= in the end of the url")
}
let name = pars["name"]
let url = new URL(window.location.href)
var ws_adr=`ws://${url.host}/ws/stream/${name}`
var ws_msg_adr=`ws://${url.host}/ws/message/${name}`
console.log(ws_adr, ws_msg_adr)
var streamer = new Streamer("streamer", ws_adr);
var video_canvas = new VideoCanvas("video-canvas");
var control_buttons = new ControlButtons("control-buttons")
streamer.setLogLevel(-1); // debugging
/* Connect signals from control buttons */
control_buttons.signals.plus.connect(
video_canvas.plus_slot.bind(video_canvas)
)
control_buttons.signals.minus.connect(
video_canvas.minus_slot.bind(video_canvas)
)
control_buttons.signals.left.connect(
video_canvas.left_slot.bind(video_canvas)
)
control_buttons.signals.right.connect(
video_canvas.right_slot.bind(video_canvas)
)
control_buttons.signals.down.connect(
video_canvas.down_slot.bind(video_canvas)
)
control_buttons.signals.up.connect(
video_canvas.up_slot.bind(video_canvas)
)
control_buttons.signals.home.connect(
video_canvas.home_slot.bind(video_canvas)
)
//
control_buttons.signals.fw.connect(
() => {
streamer.seek.bind(streamer)(1)
}
)
control_buttons.signals.bw.connect(
() => {
streamer.seek.bind(streamer)(-1)
}
)
/* Connect signals from streamer */
// if you don't want streaming video to the canvas but instead, a background
// image (say, for debugging), just comment this connection:
streamer.signals.video_element.connect(
video_canvas.set_video_element_slot.bind(video_canvas)
)
streamer.signals.offset.connect(
control_buttons.set_delay_slot.bind(control_buttons)
)
/* Connect websocket messages to VideoCanvas */
var ws = new WebSocket(ws_msg_adr);
ws.onmessage = function (event) {
// console.log("ws message", event.data)
let dic = JSON.parse(event.data)
/*
this depends how
../../analyzers/master_test_1/main.py
actually encodes the data into json
{"detections" : list of elements: [class_name, left, right, top, bottom]}
*/
// console.log("ws json", dic) //
var detections = dic["detections"]
var dets = {}
for (var i = 0; i < detections.length; i++) { // javascript
var item = detections[i]
dets[i.toString()] = {
tag: item[0],
left: item[1],
right: item[2],
top: item[3],
bottom: item[4]
}
}
// console.log("final detections", dets, JSON.stringify(dets))
// dets =
video_canvas.set_detections_slot(dets)
};
</script>