Building a Face recognition Attendance System in JavaScript

it's been a while since have written any article and this was probably because my workload increased in the past few months. So about today's article, we would be building a face recognition attendance System in JavaScript. a little backstory about the project, this project was not technically one of my testing the limits of JavaScript project, it was actually for a client. This was what actually happened i was given an attendance system to build the original intention was for the system to be Arduino based with a fingerprint sensor in mind, but due to the COVID-19 outbreak you would agree with me that a touch-contact form of attendance system wasn't really idea and second i got the wrong fingerprint model Oops. I proposed the new idea (face recognition attendance system) to the client and they liked it hurrah

In this article we shall be looking at two phrases of the system firstly, the face registration and the face recognition phrases, which to me were the hardest to develop. JavaScript was probably not the best language to create a project like this due to it's history of limitation by the browser and other issues we shall encounter as we read along.

The first issue we had to face (pun intended) was getting the the browser to capture a face, this was easily handle by building a JavaScript Camera, I would have loved to build the camera from scratch but i had limited time and i already fully understood how most browser Media API work to create things like audio/video recording and other cool stuff. So i went online and found a plugin called webcam.js, and as always all links and reference could be found below, Webcam.js works by getting the camera input from the inbuilt PC webcam and passing it as a source to a video element and when a user clicks a snap button a function is triggered that sets the PC camera input as an image element source and shows it somewhere on the screen.

The Second part was actually Capturing a face, while the first part was creating an in-browser camera the second part was actually capturing a person's face. After part one, i removed the capture button making it impossible to capture an image by yourself. So this was what i was thinking, if we gave people the ability to capture images by themselves then there was a 50% chance that most of them would capture images unrecognized by computer vision either due to bad lighting or other factors.

The solution to the programmatic capturing of Face laid in a little Library called Face-API.js. Face-API.js is a JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API, it extremely helpful if you need things like Face recognition, Face Match and other Face AI features. If it wasn't Face-API.js my other option would have been Microsoft cognitive libraries, they have speech recognition, text-recognition and other cool stuffs (might build something with this later on) but i had prior knowledge of tensorflow.js and since Face-API.js was built around it well, it was easier.

At this point we have built out the face capturing phrase, it works like this

  • a user opens the site
  • navigates to the registration page
  • The camera turns on and ask for permission
  • after permission has been granted, the user stares at the webcam
  • the Face-API initializes and starts scanning for a face on the webcam
  • once a face is found, a capture image function is triggered
  • the image is then capture and saved to a database.

Quick detour, the back end of this system was built with Firebase, you can use whatever but Firebase is still the quickest for me to build with. The image gotten from the Camera is usually in base64 which is literally just string and Firebase storage accepts only blob and files, so there is a quick conversion done after the Image is capture (from base64 to blob)

Stage Three Face Match, After a person's Image has been saved to the database the next step is to ensure that when the individual comes next time the system actually matches the face with the one saved in the database and records an attendance check for the individual. I used the same face capturing technics used in other the above stages, but instead of saving after capturing i had it pass the captured image into a Face Match function that then compares the image with that of other images in the database and then return a result that contains the most likely individual to match the current Face, all this happens within Seconds but still the time could still be reduced.

Note: if you are using Firebase storage to save your image, you might come face a CORS error problem, lucky the issue had already been address on Stack overflow, link below.

We have come to the end of this article, if you you noted no code blocks, this was because the article was already too long and adding code blocks would make it even longer but before i go i feel the need to let you know why JavaScript isn't exactly the best for a project like this

JavaScript can't interact directly with a user's computer due to certain language restriction and so instead of saving the image locally we had to be fetch the image from a database, this would considerably slow down the system especially where we have shitty internet speed. But if you have a solution to this issue feel free to make a pull request

Links and Repo -Webcam.js