How to Implement Face Detection with ml5JS?
Last Updated :
17 Sep, 2024
Face detection is a fundamental technology in computer vision, used to detect and locate human faces in digital images or videos. It serves as a stepping stone for many other applications, including facial recognition, emotion detection, and augmented reality. we will explore how to implement face detection in JavaScript using the ml5.js library.ml5.js simplifies the integration of machine learning models in web applications, offering an easy-to-use API for developers.
Prerequisites
These are the following approaches to implement Face Detection with ml5JS:
Using Pre-trained Models (FaceAPI)
The easiest approach to implement face detection with ml5.js is by using the pre-trained FaceAPI. This API simplifies the process of detecting faces in real-time video streams, including adding bounding boxes around the detected faces.
Syntax:
ml5.faceApi(video, options, modelReady);
Example: In this approach, we have used the pre-trained FaceAPI model from ml5.js to detect faces in real time through the webcam feed. The FaceAPI model is robust and efficient, which allows for quick detection of faces in both static images and video streams.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>face-api</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
}
#canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
border-radius: 10px;
}
#loader {
height: 50px;
aspect-ratio: 2;
border: 10px solid #000;
box-sizing: border-box;
background:
radial-gradient(farthest-side, #fff 98%, #0000) left/20px 20px,
radial-gradient(farthest-side, #fff 98%, #0000) left/20px 20px,
radial-gradient(farthest-side, #fff 98%, #0000) center/20px 20px,
radial-gradient(farthest-side, #fff 98%, #0000) right/20px 20px,
#000;
background-repeat: no-repeat;
filter: blur(4px) contrast(10);
animation: l14 1s infinite;
}
@keyframes l14 {
100% {
background-position: right, left, center, right
}
}
</style>
<h1>Face Detection with ml5.js</h1>
<div id="loader"></div>
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js"></script>
<script src=
"https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<script src="app.js"></script>
</body>
</html>
let faceapi;
let detections = [];
let video;
function setup() {
// Create the video capture
video = createCapture(VIDEO);
video.size(640, 480);
video.hide();
// Create a canvas to draw on
createCanvas(640, 480);
// Initialize the FaceAPI model
// making face details
const faceOptions = {
withLandmarks: true,
withExpressions: true,
withDescriptors: true,
minConfidence: 0.5,
};
faceapi = ml5.faceApi(video, faceOptions, faceReady);
}
// on face detection
function faceReady() {
faceapi.detect(gotFaces);
}
// Got faces:
function gotFaces(error, result) {
if (error) {
console.log(error);
return;
}
detections = result; //Now all the data in this detections:
clear(); //Draw transparent background;:
drawDetections(detections); //Draw detection box:
faceapi.detect(gotFaces); // Call the function again at here:
}
function drawDetections() {
image(video, 0, 0, width, height);
if (detections.length > 0) {
console.log("drawDetections")
for (let i = 0; i < detections.length; i++) {
let { alignedRect } = detections[i];
let { _x, _y, _width, _height } = alignedRect._box;
noFill();
stroke(0, 255, 0);
strokeWeight(2);
rect(_x, _y, _width, _height);
}
}
}
Output:
Customizing Detection with Landmarks and Descriptors
This method not only detects faces but also identifies key landmarks like eyes, nose, and mouth, enabling advanced features such as emotion recognition and gesture tracking. It also includes unique descriptors for face identification, making it perfect for detailed applications in augmented reality and security.
Syntax:
ml5.faceApi(video, { withLandmarks: true, withDescriptors: true }, modelReady); Example: This example enhances the previous approach by adding facial landmarks with red circles, offering more detailed face analysis.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>face-api</title>
<style>
#canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
border: 3px #fff solid;
border-radius: 10px;
}
</style>
<h1>Face Detection with ml5.js</h1>
<video id="video" width="640" height="480" autoplay>
</video>
<canvas id="canvas" width="640" height="480">
</canvas>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js">
</script>
<script src=
"https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js">
</script>
<meta charset="utf-8" />
</head>
<body>
<script src="app.js"></script>
</body>
</html>
let faceapi;
let detections = [];
let video;
function setup() {
// Create the video capture
video = createCapture(VIDEO);
video.size(640, 480);
video.hide();
// Create a canvas to draw on
createCanvas(640, 480);
// Initialize the FaceAPI model
// making face details
const faceOptions = {
withLandmarks: true,
withExpressions: true,
withDescriptors: true,
minConfidence: 0.5,
};
faceapi = ml5.faceApi(video, faceOptions, faceReady);
}
// on face detection
function faceReady() {
faceapi.detect(gotFaces);
}
// Got faces:
function gotFaces(error, result) {
if (error) {
console.log(error);
return;
}
clear(); //Draw transparent background;:
drawLandmarks(detections); //// Draw all the face points:
faceapi.detect(gotFaces); // Call the function again at here:
}
function drawLandmarks(detections) {
if (detections.length > 0) {
console.log("drawLandmarks")
//If at least 1 face is detected:
for (f = 0; f < detections.length; f++) {
let points = detections[f].landmarks.positions;
for (let i = 0; i < points.length; i++) {
stroke(47, 255, 0); // points color
strokeWeight(5); // points weight
point(points[i]._x, points[i]._y);
}
}
}
}
Output:
Similar Reads
How to Implement Pose Estimation with ml5.js?
Pose estimation is a technology that can detect human poses in images or videos by identifying key body points like the head, shoulders, elbows, and knees. It has many applications, such as in fitness apps, gaming, and human-computer interaction. In this article, we'll learn how to implement pose es
4 min read
What is Face Detection?
Face detection, a fundamental task in computer vision, revolutionizes how machines perceive and interact with human faces in digital imagery and video. From photography to security systems and from social media filters to augmented reality experiences, face detection technologies have become ubiquit
8 min read
How To Detect Face in Image Processing Using MATLAB?
MATLAB is a programming platform that is mainly used by engineers and scientists to analyze and design systems. Image processing is a process to perform some operations on an image to get an enhanced image or to extract some useful information from it. Each picture is stored as an array and each pix
5 min read
How to Generate Text with ml5JS?
Text generation using machine learning models has become an exciting field, enabling developers to create applications that can produce human-like text based on input prompts. we'll explore how to generate text using ml5.js, a friendly machine-learning library for the web. Approach: Using a Pre-trai
4 min read
How to Hash String with md5 Function in Node.js ?
Hashing means taking any string as a key and generating some other string for it as a value. It's like key-value pair in maps or dictionaries. md5 hash is an encryption algorithm that takes the various bits of a file and outputs a unique text string. md5 is a one-way encryption algorithm, i.e. there
2 min read
How to Perform Image Classification with ml5.js?
ML5.js is a user-friendly library developed based on Tensorflow.js, and heavily influenced by P5.js. As the mix of the two, ML5.js aims to make Machine Learning more accessible for designers, artists, and other members of the creative community. It provides access to many pre-trained machine-learnin
5 min read
How to Get Started with ml5.js?
ml5.js is designed to make machine learning accessible to everyone, including artists, educators, and students. Built on top of TensorFlow.js, ml5.js abstracts the complexities of machine learning and offers a simple, high-level API. This enables developers to easily incorporate machine learning mod
4 min read
How to use conditional statements with EJS Template Engine ?
Conditional statements in EJS templates allow you to dynamically control the content that is rendered based on specified conditions. Similar to JavaScript, EJS provides a syntax for using conditional logic within your HTML templates. In this article, we will see a practical example of using conditio
3 min read
FaceMask Detection using TensorFlow in Python
In this article, we’ll discuss our two-phase COVID-19 face mask detector, detailing how our computer vision/deep learning pipeline will be implemented. We’ll use this Python script to train a face mask detector and review the results. Given the trained COVID-19 face mask detector, we’ll proceed to i
9 min read
Multi Factor authentication using MERN
This article will guide you through creating a Multi-Factor Authentication (MFA) project using the MERN. This project aims to enhance security by implementing a multi-step authentication process. Users will be required to provide multiple forms of identification for access, adding an extra layer of
4 min read