Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1698166

Browse files
LintangWisesaLintangWisesa
committed
face detection
0 parents  commit 1698166

File tree

2 files changed

+161
-0
lines changed

2 files changed

+161
-0
lines changed

‎face.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
6+
<link rel="shortcut icon" href="favicon.ico" />
7+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.css" crossorigin="anonymous">
8+
<link rel="stylesheet" type="text/css" href="demo.css" crossorigin="anonymous">
9+
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/camera_utils.js" crossorigin="anonymous"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js" crossorigin="anonymous"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js" crossorigin="anonymous"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/face_detection.js" crossorigin="anonymous"></script>
13+
</head>
14+
15+
<body>
16+
17+
<!-- BULMA NAVBAR -->
18+
<nav class="navbar" role="navigation" aria-label="main navigation">
19+
<div class="navbar-brand">
20+
<a class="navbar-item" href="index.html">
21+
<img src="https://camo.githubusercontent.com/82f2bfa2005e2755362d419da02d788b366506b0d55212c160abd5100f3a8822/68747470733a2f2f312e62702e626c6f6773706f742e636f6d2f2d7753746b30565a44664d6b2f59434330474952507244492f41414141414141414147632f31796a37494f556564766f654f3143754378713745544c57304671586e69366d77434c63424741735948512f733332302f6c6f676f746578742e706e67" >
22+
</a>
23+
24+
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
25+
<span aria-hidden="true"></span>
26+
<span aria-hidden="true"></span>
27+
<span aria-hidden="true"></span>
28+
</a>
29+
</div>
30+
31+
<div id="navbarBasicExample" class="navbar-menu">
32+
<div class="navbar-start">
33+
<a class="navbar-item" href="face.html">
34+
Face
35+
</a>
36+
37+
<a class="navbar-item" href="faceMesh.html">
38+
Face Mesh
39+
</a>
40+
41+
<a class="navbar-item" href="hands.html">
42+
Hands
43+
</a>
44+
45+
<a class="navbar-item" href="pose.html">
46+
Pose
47+
</a>
48+
49+
<a class="navbar-item" href="holistic.html">
50+
Holistic
51+
</a>
52+
</div>
53+
</div>
54+
55+
</div>
56+
</nav>
57+
58+
<!-- CONTENTS -->
59+
<div class="container" style="margin-top: 20px;">
60+
61+
<div class="columns">
62+
63+
<!-- WEBCAM INPUT -->
64+
<div class="column">
65+
<article class="panel is-info">
66+
<p class="panel-heading">
67+
Webcam Input
68+
</p>
69+
<div class="panel-block">
70+
<video class="input_video1"></video>
71+
</div>
72+
</article>
73+
</div>
74+
75+
<!-- MEDIAPIPE OUTPUT -->
76+
<div class="column">
77+
<article class="panel is-info">
78+
<p class="panel-heading">
79+
Mediapipe Face Detection
80+
</p>
81+
<div class="panel-block">
82+
<canvas class="output1" width="480px" height="480px"></canvas>
83+
</div>
84+
</article>
85+
</div>
86+
</div>
87+
88+
<div class="loading">
89+
<div class="spinner"></div>
90+
</div>
91+
</div>
92+
93+
<div style="visibility: hidden;" class="control1">
94+
</div>
95+
96+
<script type="text/javascript" src="./js/face.js"></script>
97+
</body>
98+
</html>

‎js/face.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const video1 = document.getElementsByClassName('input_video1')[0];
2+
const out1 = document.getElementsByClassName('output1')[0];
3+
const controlsElement1 = document.getElementsByClassName('control1')[0];
4+
const canvasCtx1 = out1.getContext('2d');
5+
const fpsControl = new FPS();
6+
7+
const spinner = document.querySelector('.loading');
8+
spinner.ontransitionend = () => {
9+
spinner.style.display = 'none';
10+
};
11+
12+
function onResultsFace(results) {
13+
document.body.classList.add('loaded');
14+
fpsControl.tick();
15+
canvasCtx1.save();
16+
canvasCtx1.clearRect(0, 0, out1.width, out1.height);
17+
canvasCtx1.drawImage(
18+
results.image, 0, 0, out1.width, out1.height);
19+
if (results.detections.length > 0) {
20+
drawRectangle(
21+
canvasCtx1, results.detections[0].boundingBox,
22+
{color: 'blue', lineWidth: 4, fillColor: '#00000000'});
23+
drawLandmarks(canvasCtx1, results.detections[0].landmarks, {
24+
color: 'red',
25+
radius: 5,
26+
});
27+
}
28+
canvasCtx1.restore();
29+
}
30+
31+
const faceDetection = new FaceDetection({locateFile: (file) => {
32+
return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
33+
}});
34+
faceDetection.onResults(onResultsFace);
35+
36+
const camera = new Camera(video1, {
37+
onFrame: async () => {
38+
await faceDetection.send({image: video1});
39+
},
40+
width: 480,
41+
height: 480
42+
});
43+
camera.start();
44+
45+
new ControlPanel(controlsElement1, {
46+
selfieMode: true,
47+
minDetectionConfidence: 0.5,
48+
})
49+
.add([
50+
new StaticText({title: 'MediaPipe Face Detection'}),
51+
fpsControl,
52+
new Toggle({title: 'Selfie Mode', field: 'selfieMode'}),
53+
new Slider({
54+
title: 'Min Detection Confidence',
55+
field: 'minDetectionConfidence',
56+
range: [0, 1],
57+
step: 0.01
58+
}),
59+
])
60+
.on(options => {
61+
video1.classList.toggle('selfie', options.selfieMode);
62+
faceDetection.setOptions(options);
63+
});

0 commit comments

Comments
 (0)