Face Detection using Webcam in PHP
source link: https://www.laravelcode.com/post/face-detection-using-webcam-in-php
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Face Detection using Webcam in PHP
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.jsAfter, 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.
Author : Harsukh Makwana
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]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK