Build Real Time Face Detection With JavaScript

Share it with your friends Like

Thanks! Share it with your friends!



Part 2 (Face Recognition) Tutorial:

In this video we will be setting up real time face detection through a webcam using AI. This AI is so quick that we are able to draw in real time the various faces and expressions of every person in the video without much performance overhead. We will be using the Face API JS library built on Tensor Flow to setup the face detection.

By the end of this video you will have fully functional real time face detection on your site which can be used with any webcam or phone camera. If you want to see a part two of this video make sure to let me know in the comments below.

⭐ Kite is a free AI-powered coding assistant that drastically increases your productivity by providing relevant autocompletion based on your coding habits. It integrates with all popular editors (including VSCode).

📚 Materials/References:

GitHub Code:
Face API Library:
Models Used:

🧠 Concepts Covered:

– Streaming a webcam through HTML
– Using Face API to detect faces in real time
– Drawing facial landmarks in real time
– Determining emotion through facial expressions in real time

🌎 Find Me Here:


#AI #FaceDetection #JavaScript


Web Dev Simplified says:

A common issue many people are running into is a 404 error when loading the models folder. This is caused when you are not running your code inside a server that loads the models folder. For example just right clicking the file and opening in Chrome will not work. I use Live Server with VSCode to run the code and that works for me.

Vinoth Kumar says:

I'm getting uncaught ( In promise) TypeError: failed to fetch
at face-api.min.js:1
at face-api.min.js:1
at (face-api.min.js:1)
at face-api.min.js:1
at new Promise (<anonymous>)
at p (face-api.min.js:1)
at lp (face-api.min.js:1)
at face-api.min.js:1
at face-api.min.js:1
at (face-api.min.js:1)

Can you please help me in that?

Johnathan Nichols says:

Does anyone else get the fatal errors "Fetch API cannot load file:///C:/models/tiny_face_detector_model-weights_manifest.json. URL scheme "file" is not supported."

CO IW College says:

What's the difference between connections and landmarks?

Fatima Batool says:

If he cover his face with mask you can tell me about his detail


can you get the expression to a variable

Pyrrho73 says:

This is how to implement a javascript library. No face detection is build here using javascript. Dislike and report for misleading title.

Syco Gamer says:

Please make a project on Attendance system on the basis of face detection in node,express and mongo

Mm Kil says:

Hi I want ask you something?
i was learn node js — get data from mongodb , and put data from mongodb , and delete data from mongodb , and post also i learn how to creat model and send data to mongodb i use mvc I learned how to log in, register and encrypt the password Connect with the database and learned the way to pay stripe

Is there anything else to add or is that all?

Trần Huy says:

How can I detect turn left or right?

wong zi feng says:

Fetch API cannot load file:///D:/models/tiny_face_detector_model-weights_manifest.json. URL scheme "file" is not supported.

I faced this error when running the code. Could anyone help me?

Rickvian Aldi says:

"how to use face detection API"

Nimesh Kumar says:

Hi, can you help me with text detection in an image using tensorflow js or opencv js

Jorge D. Lopez says:

waaaaaaaaay too cool

A Dog says:

Does this exist for Java?

Sahil Soni says:

sorry i just switched from c++ to js to make projects, I have a lot of doubts , I will google them but would love if some1 answers:-

at 3:00 how does stream appear from nowhere ? //and what does stream => src=stream ?
and what happens when you use multiple defer , which script is executed first ? how is html executed/parsed line by line ?
what's Promise why can't we use async ? what is Uri ?
no need to call promise ? .then executes when all are done ?
is 'play' event specific to video ?
does detect all faces returns everything ?what does it return and on that obj we apply funs :-
.withFAcelandmarks().withFaceExpress() so they work on obj returned by detallfaces which has done all the work ! how can we now call a function to include the details of expression to an obj that is processed already ?
what is the type of a when you do a = {5,10} ?

Ravinan Kumar says:

Chrome Console Output

Length: 0

Dinil Creations says:

Can anyone explain how to output the number of faces detected realtime

Ryan Supit says:

Is it possible to measure distance between 2 facial landmark? I need it for my project 🙂

Luigi68mx says:

You can use this in many ways, just for fun, or to use it like Registration form, ask to smile and take a picture, something like that. You could do many interesting things with this! Could you provide more info about the API'S. Thanks a lot!

Luigi68mx says:

That was a really interesting video! Excellent work. Thanks for sharing!

Xcfg Fog says:

Thank u wds !

Minh Lữ Xuân says:

Can I run on phpmyadmin with .php file?

Ori Oron says:

I'm Surprised, Angry and Natural 🙂 thanks for the video, best regards

Daniel Hersing says:

Interesting, but I would prefer that you make the video a few minuts longer and actually style your code a bit more (clean code style). Making smaller functions like "drawFaces()", have more newlines on functions like ".withFaceLandmarks().withFaceExpressions()" and so on.

Cube Sune says:

it is not giveing me the option to see my facecame

yayin says:

This was amazing tutorial

Ha Nguyen says:

Brilliant tutorial

Write a comment


Area 51