-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
46 lines (42 loc) · 1.11 KB
/
index.js
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
const ctx = window.outlines.getContext('2d');
const faceDetector = new FaceDetector({
fastMode: false,
maxDetectedFaces: 10
});
// Outlines faces, eyes and mouth of an image
function handleFaces(faces) {
ctx.clearRect(0, 0, window.outlines.width, window.outlines.height);
for (face of faces) {
console.log(face);
// Face
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(
face.boundingBox.x,
face.boundingBox.y,
face.boundingBox.width,
face.boundingBox.height
);
// Eyes/mouth
for (landmark of face.landmarks) {
console.log(landmark);
ctx.fillStyle = 'rgba(0,255,0,0.5)';
ctx.fillText(landmark.type, landmark.location.x, landmark.location.y);
}
}
}
// Start up live feed
navigator.mediaDevices.getUserMedia({ video: true }).then(mediaStream => {
window.livefeed.srcObject = mediaStream;
});
// Start capturing faces
function faceDetectorLoop() {
faceDetector
.detect(window.livefeed)
.then(handleFaces)
.then(() => {
window.requestAnimationFrame(faceDetectorLoop);
});
}
window.outlines.addEventListener('click', event => {
window.requestAnimationFrame(faceDetectorLoop);
});