face-api.js : A way to build a Face Recognition system in the browser.
A facial recognition system is a technology capable of matching a human face from a digital image or a video frame against a database of faces, typically employed to authenticate users through ID verification services, works by pinpointing and measuring facial features from a given image.
This article will focus on How to implement a Face Recognition System in Browser using JavaScript. To implement this we are gonna use face-api JavaScript Library.
What is face-api.js ?
face-api is a JavaScript library created by Vincent Mühler., to detect faces via browser. It is built over tensorflow.js core API. It supports Face Detection, Face Recognition, Face Expression, Age, and Gender Detection.
Installing face-api.js
You can clone the following face-api repository
git clone https://github.com/justadudewhohacks/face-api.js.git
if you have npm installed in your system
npm i face-api.js
or you can use
Let’s get started
Folder Structure
Before diving into code, let’s organize the folder and files nice and clean so that it is more maintainable.
- images — contains images
- js — contains js file
i) face-api.js / face-api.min.js — face detection and recognition javascipt library
ii) faceSystem.js — application js file
iii) jquery-2.1.1.min.js — jquery Library
- models — contains models from face-api.js
- styles — contains css file
- index.html
If you have cloned face-api repo then, models are present in weights folder and you can find face-api.js/face-api.min.js file under dist folder.
Here we begin,
Creating HTML Page
Create an HTML page with image and canvas. Canvas is used to draw in the browser using HTML and JavaScript, this is required to draw the bounding box and the facial landmarks.
Include the necessary script
Final index.html,
Load the models
The next would be loading the model. loadSsdMobilenetv1Model is used to load the ssd object detection model, loadFaceLandmarkModel to detect the facial landmark, loadFaceRecognitionModel to detect the facial recognition and loadFaceExpressionModel to detect the facial expression
One of the advantages of using face-api library is that it has already trained model(pre-trained Model).
Adding Bounding Box
After loading the models, get the image and canvas. To get the Description of the face, pass it via model.
Draw bounding box and landmarks for the recognized face with drawDetectionsand drawFaceLandmarks . drawFaceExpressions to recognize facial expressions. Before drawing make sure to resize the Face Description.
Putting all this together,
You may get a result like this. To align the face landmark with your image, use CSS
Face Recognition
Now let’s try to recognize the face for the above image.
Create an array label which holds the names of the characters in the image. Name the reference image the same as the label. fetchImage could be used to load images from the directories.
Detect single face and compute face description for every image in and store it along with respective label with LabeledFaceDescriptors .
Match the input face with reference face description with Euclidean Distance. The threshold value for the Euclidean Distance could be set. On setting threshold value, we define the reference image to be matched should have at most the specific threshold value.
faceapi.FaceMatcher() takes in the reference feature descriptor and the threshold to initialize the object to calculate the Euclidean distance and apply the threshold. This is done via the faceMatcher.findBestMatch() function by looping through all the features detected for each face in the input image.
Summing up all the snippets,
Resulting image,
You can also try this project for face detection via Webcam.
Like to dig deeper into this?
Have any suggestions to improve this project? Share them with us in the comment section below.
Thanks for Reading!!
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
