-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
50 lines (44 loc) · 1.71 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
47
48
49
50
const video = document.getElementById("video");
function startVideo() {
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetGetUserMedia
|| navigator.msGetGetUserMedia;
navigator.getUserMedia(
{ video: {} },
stream => video.srcObject = stream,
err => console.log(err)
)
}
startVideo();
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
faceapi.nets.faceExpressionNet.loadFromUri("/models"),
faceapi.nets.ageGenderNet.loadFromUri("/models"),
]).then(startVideo())
video.addEventListener("play", () => {
const canvas = faceapi.createCanvasFromMedia(video);
document.body.appendChild(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize)
setInterval(async () => {
const detections = await faceapi.detectAllFaces(
video,
new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceExpressions()
.withAgeAndGender()
const resizeDetections = faceapi.resizeResults(detections, displaySize);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
faceapi.draw.drawDetections(canvas, resizeDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizeDetections);
faceapi.draw.drawFaceExpressions(canvas, resizeDetections);
resizeDetections.forEach( detection => {
const box = detection.detection.box
const drawBox = new faceapi.draw.DrawBox(box, { label: Math.round(detection.age) + " year old " + detection.gender })
drawBox.draw(canvas)
})
}, 100);
})