forked from dwyl/DASH-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html.heex
52 lines (52 loc) · 1.94 KB
/
index.html.heex
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="csrf-token"
content="<%= csrf_token %>"
/>
<title>Document</title>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js" defer></script>
</head>
<body>
<div id="elt">
<div style="display: flex; justify-content: flex-start; align-items: center; gap: 20px; padding: 10px; margin-left: 40px;">
<button type="button" id="file-proc" style="padding: 15px 30px; font-size: 18px;">START</button>
<br />
<button type="button" id="stop" style="padding: 15px 30px; font-size: 18px;">STOP</button>
</div>
<br />
<figure>
<video
id="source"
width="640"
height="480"
muted
autoplay
playsinline
></video>
<figcaption>Source</figcaption>
</figure>
<br />
<div style="margin-left: 40px; display: flex; justify-content: center;">
<p id="spinner"><svg width="48" height="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg></p>
</div>
<figure>
<video
id="output"
width="640"
height="480"
muted
autoplay
playsinline
controls
></video>
<figcaption>Modified image</figcaption>
</figure>
</div>
<script type="text/javascript" src="js/main.js">
</script>
</body>
</html>