paint-brush
Launching Your Own JavaScript Based Face Recognition Algorithm [A How-To Guide] by@Billy Fong
693 reads
693 reads

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

by [email protected]May 1st, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

JavaScript based face recognition with Face API and Docker. You can access the Face Recognition algorithm in your browser by going to: The webpage will access your laptop’s webcam and start analysing your expressions in real time! The algorithm consumes Face API which is build on top of tensorflow.js core API. The required machine learning models can be downloaded from my GitHub Repo: You can also train this algorithm to recognise different faces. 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.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Launching Your Own JavaScript Based Face Recognition Algorithm [A How-To Guide]
 HackerNoon profile picture

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 which is build on top of . 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 .

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 :

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

바카라사이트 바카라사이트 온라인바카라