Face detection, recognition and tracking are revolutionary technologies that have been deployed on mobile phones, webcams, and digital cameras. With the help of this advancement in technology, we are now able to detect human faces and recognize any specific person in a crowd.
This is a really superb and game-changer innovation that has taken the technology world by storm. Now it’s only a matter of time for face detection technology to be deployed across different web applications in different sectors.
In digital cameras, face detection technology is used for the purpose of autofocus; in webcams, it is used to take an instant passport-sized photograph of you; and in mobile phones, it is one measure used for the authentication of its user.
The future of face detection and recognition technology is very promising. This is because it is successfully used by the police and other law enforcement agencies to detect and fight crime in many countries of the world.
Actually, the below-mentioned libraries are using Artificial Intelligence and Machine Learning algorithms/models to detect a face. This is not a simple or straightforward task but some highly professional programmers have created different JavaScript libraries and frameworks to help us use this new technology in our web applications.
Now, if you are like me who is curious to learn about the actual working of these libraries. Maybe you want to create a similar JavaScript library yourself. Then, I would highly recommend you to take this “Machine Learning with Javascript Course“ from Udemy.
Over 19,000 students are already enrolled in this course. Also, it has received a 4.6 stars rating from 2700+ students. So, this course can be a life-changer for you.
Anyways, let’s have a look at these amazing JavaScript face detection and recognition libraries.
tracking.js
This JavaScript library is packed with a deluge of algorithms and capabilities for tackling different aspects of face detection and recognition within a web browser. It works very instinctively. Face detection, recognition and color tracking are done instantly. This is one of the best JavaScript face detection and recognition libraries.
face-api.js
This is another JavaScript library for the detection and recognition of human faces. It makes use of the tensorflow.js core API for its proper working inside the web browser. You can use this library to track and detect a face in real-time.
clmtrackr
clmtrackr is also an open source face detection library like the ones I’ve mentioned above. You can download it from GitHub for free.
It makes use of Constrained Local Models to precisely identify and track the facial features. It then returns an array, which contains all the coordinates of a face model.
The interesting thing about clmtrackr is that it is capable of face swapping and masking. It really forms an all-in-one package.
pico.js
One of the JavaScript face detection and recognition libraries is pico.js. It is made up of roughly 200 lines of clean JavaScript code.
In its GitHub repository, you will find 3 major folders e.g. “img”, “cam” and “wasm”. All of these folders contain basic demo of how this library works. Its “img” folder has an example which clearly demonstrates how you can detect a human face in images. The “cam” folder contains a demo which shows the tracking of face in real-time. Basically “wasm” folder is there to provide an example about how you can compile pico.js to WebAssembly.
jeelizWeboji
jeelizWeboji.js is a JavaScript/WebGL library that is used to detect and replicate different expressions on faces. It runs perfectly on typical webcams. The face detection is very effective because it can easily work in all kinds of lighting conditions.
jeelizFaceFilter
This is another unique JavaScript/WebGL library that solely does real-time face tracking and detection in videos recorded using a webcam. Its features include face detection and tracking, mouth opening detection, face rotation detection, detect multiple faces, support for 3D engines like BABYLON.JS, THREE.JS, A-FRAME and many more. It is highly mobile-friendly too.
js-objectdetect
This is an object detection JavaScript library that runs smoothly on any web browsers. It gives its output in real-time. It is well supported by all the latest web browsing applications. Basically the main purpose of using this library is to bring computer vision right inside your favorite web browser without any issues.
face-recognition.js
This is another face recognition program. It is both a JavaScript and a TypeScript API. It is available in the form of node.js package. Apart from face recognition and detection, it also identifies face landmarks.
jQuery Face Detection Plugin
jQuery Face Detection Plugin helps to detect different human faces inside an image, canvas or video. It makes use of an advanced algorithm to get an array of all the objects found in a face. These objects include coordinates, height and width, offset, position, scale and confidence of a face.
JS-face-tracking-demo
This is a face tracking JavaScript library demo. This program consists of JavaScript, HTML and CSS.
headtrackr
This JavaScript package is specifically developed for tracking the face and head of a person. It works perfectly through a webcam. It basically tracks someone’s head position in proportion to the screen of the computer. This JavaScript library gives an accurate output when deployed on the modern web browsers.
Kittydar
This is very interesting, to say the least. Face detection functionality has gone beyond detecting the faces of humans; it is now used on animals. Kittydar is a face detection JavaScript library used for detecting the face of cats in an image/canvas. Once the cat is standing upright and facing forward, Kittydar will surely recognize it with a high level of accuracy.
ccv-purejs
ccv-purejs is a great example of JavaScript face detection libraries that can be downloaded from GitHub. Actually this library makes use of node-canvas to work effectively with node and npm. Right now the package requires you to load an image inside a canvas object. But according to the developer, he has planned to add the support for directly using an image path in future.
videojs-faceDetection
This JavaScript library works in different environments. It makes use of the video.js player achieve face detection. Having a distinct support for videojs player makes it very unique. It is built on the back of a combination of JavaScript and HTML5 using an intuitive algorithm as usual. Its features include a custom data structure, simple image processing, grayscale, box blur and many more.
facedetector
This is yet another face detection and tracking JavaScript library that is supported by a node.js program. Its face detection functionality is similar to others and also it works in real-time. It has implemented a really simple yet effective algorithm for tracking faces. It is capable of detecting so many faces in one photograph. You can use and distribute it for free because it is open source and available under MIT license.
Conclusion
Face detection and tracking have come to stay. It can only get better as more advancement is made in the future. JavaScript face detection and recognition libraries have helped in no small way in making facial detection and recognition a reality.
The fact that it helps in fighting crime and is used for authentication of the real owner of a mobile phone makes it a lot more compelling.
In the nearest future, it will be used on web applications and its usefulness will become irresistible. It may be deployed in schools during examinations to detect and recognize the faces of students who are allowed to appear in exams. It can also be used during the recruitment process. The future is already here. Our lives can only get better and smarter with the passage of time.
Awesome post, thanks for sharing.
Does it have a function for getting pupillary distance?
Are there any libraries that will allow you to change the color of landmarks such as lips or eyes?
Hi, I use face-api.js.
Is there any library to detect roll, pitch, yaw of a head from 68 landmark points ?
Thanks in advance.
How to change face detection canvas from circle to suare.
thanks for share a good post
You’re welcome dear.
Really nice post!!
I have a question… Is there any JS library that generates a Face Id so we can make a faster comparison with a given Face?
Kindly read the details of face-api.js library on Github. You may find useful information regarding your question there.
For example check this link: https://github.com/justadudewhohacks/face-api.js#face-recognition-by-matching-descriptors
really awesome stuff you got here
Thanks dear.
What’s up to every one, the contents present at this web site are genuinely amazing for people experience, well, keep up the nice work fellows.
Thanks a lot for your kind words.
I want to get and keep in touch with you
Hi,
You can contact me through facebook. Here’s a link to my profile.
link: https://www.facebook.com/trulyfurqan
i tried reaching on facebook but to no avail sir am am trying hands on face recognition but my pictures are not showing what is the way forward
Which face detection library are you using?
I was just looking for some javascript based face detection and recognition libraries…
Thanks for this helpful post.
You are welcome bro.
I’m glad to know that this article is helpful for you. 🙂
Hi,
Is there any javascript library to get face height & width ?
Amrutha
Hi Amrutha,
Kindly check the demos of above given libraries. In most examples you will see that a rectangle is generated around the human face. Maybe you can use the width and height of these rectangles…
Nice post
Thanks a lot dear. 🙂