In this article, we will share with you how to face detection using webcam by javascript in PHP application. in some web applications, you need to detect face then this article will be very helpful for you. here will share with you how to detect face from webcam or any photos help of some javascript code.
We can be done our face detection functionality in web application help of faceapi js. this javascript library allows to you some functions to detect the face in web application. we will also use some by default model data to detect face expression when we detect the face. you can read the document here FaceAPIJS
Preview :
After done all steps then the preview will look like in the browser.
Project Directories Structure
Please follow the directories structure for this tutorial.
facedetection
├── models
├── face-api.min.js
├── index.php
└── script.js
After, create the above structure than the first things you need to download all models form this link Face detection models and put into the model's folder.
Then the download face-api.min.js from this link face-api.min.js
Step - 1 : Create index.php file
First, we need to create one index.php file and write the following code into it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Face Detection</title>
<script defer src="face-api.min.js"></script>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<video id="video" width="720" height="560" autoplay muted></video>
</body>
</html>
Step - 2 : Create script.js file
Now, we need to create script.js a file for write face detection js code. simply copy the following code and paste it into your script.js file.
const video = document.getElementById('video')
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)
function startVideo() {
navigator.getUserMedia(
{ video: {} },
stream => video.srcObject = stream,
err => console.error(err)
)
}
video.addEventListener('play', () => {
const canvas = faceapi.createCanvasFromMedia(video)
document.body.append(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()
const resizedDetections = faceapi.resizeResults(detections, displaySize)
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
faceapi.draw.drawDetections(canvas, resizedDetections)
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
}, 100)
})
Conclusion
You can download this project from Github link Download
You can see face detection functionality is very easy to built help of face-api.js. You can check I hope you will like this article. Also please follow us on Twitter and Like our Facebook page for updates.
