Launching Your Own JavaScript Based Face Recognition Algorithm [A How-To Guide]

JavaScript based face recognition with Face API and Docker.he

If you just want to play with a real time face recognition algorithm without any coding, you can run the following Dockerized web app below:

docker run -p 8080:8080 billyfong2007/node-face-recognition:latest

This Docker command will run a Docker image from Docker Hub, and bind network port 8080 of the container to your computer. You can access the Face Recognition algorithm in your browser by going to:

localhost:8080

The webpage will access your laptop’s webcam and start analysing your expressions in real time!

Don’t worry, this works complete offline, you’ll be the only who can view the video stream… given your computer is not compromised.

Anyway, you may start having fun making all sorts of funny faces (or sad/angry etc) at your computer like a silly person!

This algorithm consumes Face API which is build on top of tensorflow.js core API. You can also train this algorithm to recognise different faces.

For those of you who are still reading, perhaps you’d like to know how to build your own Node application to consume Face API? Okay here we go:

You can find all source files in my GitHub Repo.

First you need to install NPM’s live-server to serve your HTML:

npm install -g live-server

Build a bare bone HTML page named index.html:

This HTML contains a video element that we’ll use to stream your laptop’s webcam.

Then create script.js with the following content:

The script does a few things:

Load all models from directory asynchronouslyRequest permission to gain access to your webcameOnce the video started stream, create a canvas and call Face API to draw on the canvas every 100ms.

The required machine learning models can be downloaded from my GitHub Repo:

Once you have index.html, script.js and the models ready, you are almost good to go. You still need include face-api.min.js in order for your app to start working:

Now you’re ready! Start serving your HTML page with live-server:

cd /directory-to-your-project<br>live-server

This simple JavaScript projects gave me a taste of the ML, I wish I could do more with it but I’m not sure what practical uses this algorithm will have in real life. What do you think