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
After done all steps then the preview will look like in the browser.
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
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>
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)
})
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.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Sending Telegram Notifications in Laravel
Telegram is a highly customizable,...How to Count Number of Rows in a Table Using jQuery
Use the length Property You can simpl...How to Change Column Name and Type in Laravel Migration
In the working with MySQL database, some...Node.js os Module
Node.js built-in os module returns basic...How to Capture Browser Window Resize Event in JavaScript
Use the addEventListener() Met...