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 pi
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-train
4 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
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
5 min read
Person and Face Detection using Intel OpenVINO toolkit
The OpenVINO Toolkit by Intel is a robust platform aimed at assisting developers in speeding up the implementation of deep learning models for computer vision activities. It enhances models for Intel hardware, such as CPUs, GPUs, VPUs, and FPGAs, enabling effective inference on edge devices. The too
8 min read
Eye blink detection with OpenCV, Python, and dlib
In this article, we are going to see how to detect eye blink using OpenCV, Python, and dlib. This is a fairly simple task and it requires you to have a basic understanding of OpenCV and how to implement face landmark detection programs using OpenCV and dlib, since we'll be using that as the base for
6 min read
How to Perform Sound Classification with ml5.js?
ml5.js is a JavaScript library that makes machine learning easy and accessible to use in web applications. This is a beginner-friendly library that provides an API that you can include in your project to use pre-trained machine-learning models in web projects. So, even if you are a beginner to machi
3 min read