When we hear about facial recognition, we often think of complex algorithms, powerful machines, and high-level processing. But did you know that you can easily build your own web application that generates fast and accurate results?


About Facial Recognition

Facial recognition has been discussed and studied for years within the AI (Artificial Intelligence) community. The first book on the subject was published in 1977 by Japanese scientist Takeo Kanade. Since then, this technology has been improved and new recognition methods have emerged.

Large companies across industries utilize facial recognition technologies in their environments. Examples include airlines validating travelers and government institutions identifying felons, among others. The term "facial recognition" suggests complex algorithms, powerful machines, high-level processing, etc., so I decided to carry out some research on the topic in order to discover new, “easier” ways to implement this technology in a manner that anyone can access. This led me to discover a JavaScript library that would be perfect for my project: face-api.js.

Facial Recognition in a Browser

face-api.js is a JavaScript library developed by German developer Vincent Muhler; it implements the famous TensorFlow.js and is able to run facial recognition in the browser. Muhler explains that face-api.js is a JavaScript module "built on top of tensorflow.js core, which implements several CNNs (Convolutional Neural Networks) to solve face detection, face recognition and face landmark detection, optimized for the web and for mobile devices.” 

After I discovered this library, I implemented a Rest API in Node.js using Express and the face api, as well as an SPA (single page application) using React. It's a simple application that only aims to test the lib. In the web interface, the user can register several people. To register someone, a minimum of four photos of that person must be uploaded in order to train the algorithm on the backend. After registering people, the user can select two options:

  1. Upload any photo to try to find out if any of the registered people are present in that photo. For this, I started by uploading a photo to the backend. Then, using the photos of registered individuals, the algorithm tracks the people in the image and returns a new image to the front with all of the frames and people found. Afterward, the user receives a result with all of the recognition information.
  2. Upload any video and then find the people registered in this video. To do this, I used the same method as above; however, I needed to capture the video frame by frame before running the analysis on top of each frame and then assembling the video again with the new generated images.

From the tests I ran, results populated very quickly with an accuracy of 95%.


Facial recognition is a very effective technology that brings solutions for many different industries. The possibility of running a facial recognition platform in a browser opens incredible possibilities for easy access and implementation.

However, there are still many factors to be studied. For example, what would the performance be like if we had a base with millions of users? If each user had at least 5 photos registered, we would have to have a gigantic CDN (Content Delivery Network), among other computing resources. Additionally, how would program performance be impacted with the use of videos as well as photos? For example, what would it be like to upload a one-hour long video recorded in 4k? What would this process of capturing frames be in order to do frame-by-frame recognition? All of these questions still need to be studied.

That said, Vincent Muhler's library still introduces many other benefits and opens a wide range of potential solutions, some of which we haven't even touched on. These include age recognition, emotion recognition, etc. Imagine the immense possibilities of utilizing this library on a local machine or at an industry level! There's a lot to be explored and tested, and we're just in the beginning stages of understanding the potential of this technology.


Tiago Queiroz

Tiago Queiroz is a Front-End Software Engineer at Avenue Code. He has a degree in Information Systems and has worked as a web software developer since 2017. He has always been passionate about technology and is always looking for innovation and a healthy life.

What are CSS Custom Properties


4 Ways to Make Your Angular App Sustainable and Scalable


How to Build a Custom Component in VueJS