-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (101 loc) · 3.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<title>Schibsted Hackday - Face Detection API</title>
<link rel="stylesheet" href="css/water-dark.css" />
<link rel="stylesheet" href="css/layout.css" />
</head>
<body>
<h1>Face Detection</h1>
<p>
Remember to enable Chrome Flags
<code>chrome://flags#enable-experimental-web-platform-features</code>
</p>
<div class="two-columns">
<div class="column column-left">
<canvas width="auto" height="auto" id="canvas-preview"></canvas>
</div>
<div class="column column-right">
<video id="video-preview" autoplay></video>
<form action="" id="form-controls">
<fieldset>
<legend>Display options</legend>
<label for="controls-landmarks">
<input type="checkbox" id="controls-landmarks" />
face detection landmarks
</label>
</fieldset>
<fieldset>
<legend>Stickers</legend>
<label>
<input
type="radio"
name="sticker"
value="none"
id="controls-sticker-none"
checked
/>
none
</label>
<label>
<input
type="radio"
name="sticker"
value="helmet"
id="controls-sticker-helmet"
/>
helmet
</label>
<label>
<input
type="radio"
name="sticker"
value="skull"
id="controls-sticker-skull"
/>
skull
</label>
</fieldset>
</form>
</div>
</div>
<script type="module">
import detectFace from "./js/detect.mjs";
import drawFace from "./js/canvas.mjs";
import drawSticker from "./js/stickers.mjs";
import initControls, {
getCurrentSticker,
displayLandmarks
} from "./js/controls.mjs";
if (!window.hasOwnProperty("FaceDetector")) {
alert(
"Remember to enable Chrome Flags:\nchrome://flags#enable-experimental-web-platform-features"
);
}
const videoPreview = document.querySelector("#video-preview");
const canvasPreview = document.querySelector("#canvas-preview");
const canvasContext = canvasPreview.getContext("2d");
initControls("form-controls");
navigator.getUserMedia(
{ audio: false, video: { width: 800, height: 600 } },
stream => {
videoPreview.srcObject = stream;
setInterval(async () => {
const { bitmap, detection } = await detectFace(videoPreview);
canvasPreview.width = bitmap.width;
canvasPreview.height = bitmap.height;
canvasContext.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
if (displayLandmarks()) {
drawFace(canvasContext, detection);
}
drawSticker(canvasContext, detection, getCurrentSticker());
}, 100);
},
error => console.warn(error)
);
</script>
</body>
</html>