face-detection/path.html at master · higoshi/face-detection · GitHub

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
<!doctype html>
<html>
<head>
	<style type="text/css">
		.wrapper {
			position: relative;
		}

		.canvas {
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
	<video id="video" hidden></video>
	<div class="wrapper">
		<canvas id="canvas" class="canvas"></canvas>
		<canvas id="overlay" class="canvas"></canvas>
	</div>
	<script>
		(async () => {
			const canvas = document.getElementById('canvas');
			const overlay = document.getElementById('overlay');
			const video = document.getElementById('video');
			if (!'FaceDetector' in window) return alert('FaceDetector not supported');
			const faceDetector = new FaceDetector({fastMode: false, maxDetectedFace: 5});

			let faces = [];
			const detect = async () => {
				const detectedFaces = await faceDetector.detect(canvas);
				faces = detectedFaces;
				detect();
			};
			detect();

			const context = canvas.getContext('2d');
			const overlayContext = overlay.getContext('2d');
			const update = () => {
				const {innerWidth: width, innerHeight: height} = window;
				context.drawImage(video, 0, 0, width, height);
				overlayContext.clearRect(0, 0, width, height);

				for (let i = faces.length - 1; i >= 0; i--) {
					const face = faces[i];
					const {boundingBox} = face;
					const {x, y, width, height} = boundingBox;
					overlayContext.strokeStyle = 'rgba(255, 255, 255, 0.5)';
					overlayContext.strokeRect(x, y, width, height);

					const {landmarks} = face;
					for (let l = landmarks.length - 1; l >= 0; l--) {
						const landmark =  landmarks[l];
						const {locations, type} = landmark;

						switch (type) {
							case 'eye':
							case 'mouth':
							case 'nose':
								overlayContext.strokeStyle = 'rgba(255, 255, 255, 0.5)';
								break;
							default:
								overlayContext.strokeStyle = 'red';
						}

						let location = locations[0];
						let {x, y} = location;
						overlayContext.beginPath();
						overlayContext.moveTo(x, y);
						for (let k = locations.length - 1; k >= 0; k--) {
							location = locations[k];
							({x, y} = location);

							overlayContext.lineTo(x, y);
						}
						overlayContext.stroke();
					}
				};

				requestAnimationFrame(update);
			};
			update();

			navigator.getUserMedia({video: true, audio: false}, stream => {
				video.srcObject = stream;
				video.play();
			}, error => {
				console.log(error);
			});

			const resize = () => {
				const {innerWidth, innerHeight} = window;
				canvas.width = overlay.width = innerWidth;
				canvas.height = overlay.height = innerHeight;
			};
			resize();
		})();
	</script>
</body>
</html>