Facial detection technology is changing how we use digital images. Filestack offers a powerful tool for developers who want to add facial detection to their apps. This blog post will show you how to use Filestack for facial detection. We’ll start by explaining the basics of facial detection. Then, we’ll show you how to add Filestack’s facial detection to your app.
But that’s not all. We will also tell you the use cases of the Filestack facial detection feature. We’ll give you clear instructions and examples to help you get started with the Filestack facial detection. Therefore, we have shown the whole coding process to make things easier for you. So, what are you waiting for? Let’s continue reading this blog post till the end.
What is facial detection?
Facial detection can find human faces in pictures or videos. It’s different from recognizing faces, which is about knowing who the faces belong to.
Facial detection looks at the basic parts of a face, like the eyes, nose, and mouth. It uses special math rules to find these parts in images or videos. Once it finds a face, it can figure out where the face is.
Facial detection is useful for many things. For example, sorting pictures or making cameras focus automatically. It’s also used in security cameras to watch for people.
Also read: Facial Recognition Made Easy with Filestack
Why do we need facial detection?
Facial detection is useful for many reasons. Let’s explore the most important use cases of a facial detection feature:
✔️Facial detection helps security cameras identify people in airports or stores. Hence making these areas safer.
✔️Some phones use facial detection to unlock when they see your face instead of needing a passcode.
✔️In cameras, facial detection helps focus on people’s faces for better pictures.
✔️On sites like Facebook, facial detection can recognize faces in photos and suggest who they might be. Therefore making it easier to tag friends.
✔️Facial detection can help doctors identify skin conditions or track changes in a patient’s face over time.
✔️Retailers use facial detection to understand who’s shopping and how they behave. This helps them improve their stores and products.
Is there an easier method to integrate facial detection into my applications?
Filestack gives you the easiest way to integrate the facial detection feature into your application. Let’s explore it.
Filestack
The `detect_faces` function is used to detect faces in images. It has parameters like `minsize` and `maxsize` to filter out objects that are not likely to be faces.
👉`minsize` sets the minimum size of objects to be considered as faces. If set to a value like 200, the function will only detect faces at least 200×200 pixels in size.
👉`maxsize` sets the maximum size of objects to be considered as faces. Like `minsize`, it helps filter out objects too large to face.
👉Setting `export:true` will export all detected face objects to a JSON format, including the position (`x` and `y`), size (`width` and `height`), and an `id` for each detected face.
Here is an example:
[
{
"x": 642,
"y": 298,
"width": 137,
"height": 137,
"id": 1
},
{
"x": 446,
"y": 731,
"width": 138,
"height": 138,
"id": 2
}
]These parameters help improve the accuracy of facial detection by focusing on objects that are likely to be faces based on their size.
Building a facial detection application
- First, you should sign up at Filestack to get the API key.
- Navigate to the Filestack website and click on the Sign Up button.
- After signing up, you need to verify your email.
- Once the email is verified, you can log in to your account.
- Navigate to the dashboard to get the API key under
Let’s build our facial detection application now.
Create an index.html file in the Visual Studio Code under
Next, start writing the code. We will use HTML, CSS, and JavaScript to create our application.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Face Detection App</title>
<style>
/* CSS styles */
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<h1>Face Detection App by Filestack</h1>
<button id="uploadButton">Upload Image</button>
</div>
<div id="output"></div>
</div>
<script>
// JavaScript code
</script>
</body>
</html>The HTML structure defines a basic webpage layout with a container div (`#container`) that holds the content and the output of the app.
Inside the container, there’s a heading (`h1`) with the title of the app and a button (`#uploadButton`) to trigger image upload.
The `output` div is where the canvas element will be appended to display the image with detected faces.
CSS
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('https://media.licdn.com/dms/image/D4D12AQH244sF7zNOQg/article-cover_image-shrink_720_1280/0/1677540440296?e=2147483647&v=beta&t=Yxvs72KKoTR6aKpEHnGkqp5_KtoIvDxquV6g8u3VBHU');
background-size: cover;
}
#container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
#uploadButton {
padding: 10px 20px;
background-color: #EF4A25;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
#uploadButton:hover {
background-color: #ff704d;
}
#output canvas {
display: block;
margin: 20px auto;
border: 2px solid #EF4A25;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
The CSS file sets the font, background color, and layout of the webpage.
It styles the container (`#container`), heading (`h1`), button (`#uploadButton`), and the output canvas.
JavaScript
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<h1>Face Detection App by Filestack</h1>
<button id="uploadButton">Upload Image</button>
</div>
<div id="output"></div>
</div>
<script>
const apiKey = 'ADD YOUR API KEY';
const client = filestack.init(apiKey);
$('#uploadButton').click(function() {
const options = {
onUploadDone: function(res) {
const fileUrl = res.filesUploaded[0].url;
detectFaces(fileUrl);
},
};
const picker = client.picker(options);
picker.open();
});
function detectFaces(imageURL) {
const detectURL = `https://process.filestackapi.com/${apiKey}/detect_faces=export:true/${imageURL}`;
$.getJSON(detectURL, function(data) {
const outputCanvas = document.createElement("canvas");
const ctx = outputCanvas.getContext("2d");
const img = new Image();
img.onload = function() {
outputCanvas.width = img.width;
outputCanvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
data.forEach(function(face, index) {
ctx.strokeStyle = "#4CAF50"; // Border color
ctx.lineWidth = 2;
ctx.strokeRect(face.x, face.y, face.width, face.height);
});
document.getElementById("output").innerHTML = "";
document.getElementById("output").appendChild(outputCanvas);
};
img.src = imageURL;
});
}
</script>The JavaScript code initializes Filestack with an API key and sets up a click event listener for the upload button (`#uploadButton`).
When the button is clicked, it opens a Filestack picker for uploading an image. Once the image is uploaded, it calls the `detectFaces` function with the image URL.
The `detectFaces` function uses Filestack’s face detection API to detect faces in the image and draw rectangles around them on a canvas element.
The canvas element is then appended to the output div (`#output`) to display the image with the detected faces.
Don’t forget to add the API key when running the code. Here is the final code:
Final code
<!DOCTYPE html>
<html>
<head>
<title>Face Detection App</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('https://media.licdn.com/dms/image/D4D12AQH244sF7zNOQg/article-cover_image-shrink_720_1280/0/1677540440296?e=2147483647&v=beta&t=Yxvs72KKoTR6aKpEHnGkqp5_KtoIvDxquV6g8u3VBHU');
background-size: cover;
}
#container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
#uploadButton {
padding: 10px 20px;
background-color: #EF4A25;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
#uploadButton:hover {
background-color: #ff704d;
}
#output canvas {
display: block;
margin: 20px auto;
border: 2px solid #EF4A25;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<h1>Face Detection App by Filestack</h1>
<button id="uploadButton">Upload Image</button>
</div>
<div id="output"></div>
</div>
<script>
const apiKey = 'YOUR API KEY HERE';
const client = filestack.init(apiKey);
$('#uploadButton').click(function() {
const options = {
onUploadDone: function(res) {
const fileUrl = res.filesUploaded[0].url;
detectFaces(fileUrl);
},
};
const picker = client.picker(options);
picker.open();
});
function detectFaces(imageURL) {
const detectURL = `https://process.filestackapi.com/${apiKey}/detect_faces=export:true/${imageURL}`;
$.getJSON(detectURL, function(data) {
const outputCanvas = document.createElement("canvas");
const ctx = outputCanvas.getContext("2d");
const img = new Image();
img.onload = function() {
outputCanvas.width = img.width;
outputCanvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
data.forEach(function(face, index) {
ctx.strokeStyle = "#4CAF50"; // Border color
ctx.lineWidth = 2;
ctx.strokeRect(face.x, face.y, face.width, face.height);
});
document.getElementById("output").innerHTML = "";
document.getElementById("output").appendChild(outputCanvas);
};
img.src = imageURL;
});
}
</script>
</body>
</html>Here is the GitHub link to our facial detection application: https://github.com/devayesha23/Facial_Detection_Application
Output
Run the code in Visual Studio Code, and you will get the following web page:
Next, click on the upload image button, and it will open the file uploader as under:
Upload an image, and it will also show the face detection results. You can check it under:
Conclusion
Facial detection is a game-changing technology that is reshaping our digital world. Filestack comes with powerful tools and easy integration for facial detection. Therefore, developers can now effortlessly incorporate facial detection into their applications.
From enhancing security in public places to improving user experience in smartphones and cameras, the applications of facial detection are vast and impactful. It’s not just about recognizing faces but understanding human behavior. It also helps us in improving our interaction with technology.
Filestack’s facial detection feature simplifies the process. Hence, allowing developers to focus on innovation and creativity. Whether you’re building a security system, a photography app, or a social media platform, you can always rely on Filestack.
FAQs
What are the benefits of using the Filestack facial detection feature?
The Filestack facial detection feature makes apps more secure by helping them recognize faces in images and videos. This improves surveillance and identification. It also improves user experience by making cameras focus automatically and allowing smartphones to unlock with faces. It helps organize photos better. Hence, making them easier to manage.
Why should I prefer Filestack facial detection over other companies?
You should choose Filestack for facial detection because it’s easy to use and works well. Filestack provides a simple way to add facial detection to your app using its API. It’s accurate and gives you reliable results. Filestack also offers good documentation and support, so you can get help if you need it.
Can I rely on Filestack in terms of security?
Filestack is reliable for security. It uses encryption to protect your files when you upload or store them. Filestack also follows strict security standards and regulations, like GDPR, to keep your data safe. You can trust Filestack to keep your files secure and prevent unauthorized access.
Can I use the Filestack facial detection feature for free?
You can use Filestack’s facial detection feature for free up to a certain limit. This means you can try it out without paying. If you need more, you might have to upgrade to a paid plan. The free plan is a good way to see if the feature works for you before deciding to pay for it.
Sign Up for free at Filestack today – Master the art of facial detection.
Ayesha Zahra is a Geo Informatics Engineer with hands-on experience in web development (both frontend & backend). Also, she is a technical writer, a passionate programmer, and a video editor. She is always looking for opportunities to excel in her skills & build a strong career.