forked from riju/WebCamera
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (78 loc) · 3.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Funny hats 🤠</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<link href="../css/menu.css" rel="stylesheet" type="text/css">
<link href="../css/settings.css" rel="stylesheet" type="text/css">
<link href="css/tabs.css" rel="stylesheet" type="text/css">
<link href="../css/camera-bar.css" rel="stylesheet" type="text/css">
<link href="../css/google-icons.css" rel="stylesheet">
</head>
<body>
<p id="errorMessage" class="err centered"></p>
<div id="mainContent" class="hidden centered">
<div class="canvas-wrapper">
<canvas id="canvasOutput" class="canvas-big"></canvas>
<div class="tabset">
<label id="menuSelector">🎩</label>
<input type="radio" name="tabset" id="hatsTab" aria-controls="hatsSection" class="hidden" checked>
<label for="hatsTab" id="hatsTabLabel" class="hidden">Hats</label>
<input type="radio" name="tabset" id="glassesTab" aria-controls="glassesSection" class="hidden" disabled>
<label for="glassesTab" id="glassesTabLabel" class="hidden">Glasses</label>
</div>
<div class="carousel-wrapper" id="hatsCarousel">
</div>
<div class="carousel-wrapper hidden" id="glassesCarousel">
</div>
</div>
<div class="camera-bar-wrapper">
<ul id="cameraBar">
<li class="camera-bar-item bar-with-three-items">
<div class="gallery-wrapper">
<canvas id="gallery" class="camera-bar-icon"></canvas>
</div>
</li>
<li class="camera-bar-item bar-with-three-items">
<div class="take-photo-wrapper">
<button id="takePhotoButton" class="camera-bar-icon material-icons" disabled>photo_camera</button>
</div>
</li>
<li class="camera-bar-item bar-with-three-items">
<div class="face-mode-wrapper">
<button id="facingModeButton" class="camera-bar-icon material-icons" disabled>camera_rear</button>
</div>
</li>
</ul>
</div>
<div class="stats-settings centered">
<label id="hideStatsLabel" class="hidden" for="hideStats">Hide statistics</label>
<input id="hideStats" class="hidden" type="checkbox" checked>
</div>
<div class="jitter-limit centered">
<label for="jitterLimit">Jitter limit:
<output id="jitterLimitOutput">3</output> pixels </label>
<input type="range" id="jitterLimit" value="3" min="0" max="100" step="1">
</div>
<div class="threads-control centered hidden">
<label for="threadsNum" id="threadsNumLabel"></label>
<input type="number" id="threadsNum" min="1" max="16">
</div>
<div class="downscale-level centered">
<label for="downscaleLevel">Downscale level:
<output id="downscaleLevelOutput">1</output>x </label>
<input type="range" id="downscaleLevel" value="1" min="0" max="4" step="1">
</div>
</div>
<video id="videoInput" class="hidden"></video>
<script src="../../libs/adapter-latest.js" type="text/javascript"></script>
<script src="../../libs/stats.min.js" type="text/javascript"></script>
<script src="../../utils/utils.js" type="text/javascript"></script>
<script src="../../utils/statsInit.js" type="text/javascript"></script>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/hatsAndGlassesProcessing.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>