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.
🚨 IMPORTANT:
Part 2 (Face Recognition) Tutorial: https://youtu.be/AZ4PdALMqx0
📚 Materials/References:
GitHub Code: https://github.com/WebDevSimplified/Face-Detection-JavaScript
Face API Library: https://github.com/justadudewhohacks/face-api.js
Models Used: https://github.com/WebDevSimplified/Face-Detection-JavaScript/tree/master/models
🧠 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:
Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#AI #FaceDetection #JavaScript
Original source
29 responses to “Build Real Time Face Detection With JavaScript”
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.
i am having a problem while loading models error-Fetch API cannot load file:///E:/models/tiny_face_detector_model-weights_manifest.json. URL scheme must be "http" or "https" for CORS request.
Thnks!! Im gonna play fortnite now
i'm having trouble with google chrome, i can't get this to work on it, works great on opera.
I get this error:
DOMException
(anonymous)
for eavery one who has the 404 error, or the webcam dont load or etc… open the script.js file and add to the example: "faceapi.nets.tinyFaceDetector.loadFromUri('/models')," a dot (.) before the dash (/) = ('./models') like this do this for al the face api links and it wil work. hope it helps
hey bro does this relate to neutral network?
Can you help something with image detection and implementing AR object on it in real time?????
Is it also working on mobile phones?
Can you make a code for AI face detection in Python?
is it firefox can do?
hello dear, i need javascript, my blogger website opan only target country, and not opan any proxy or VPN, so plz give me javascript
здарова
hello there, I have opened it in live server . when i am attaching the photo its doing nothing after that
help any one
wow!
Can we detect multiple faces in a room with face impressions and save the result in database?
Why do you have an expensive studio mic that still sounds like a 5$ headset mic?
While i am learning about :
Support vector machine
K Nearest Neighbour
Boosted tree
HSV recognition
Damn my mid term test was so hard 🙁
Nice to see an easy way how to do it 🙂
In addition to all of the other comments, this isn't AI… It's an API which exposes a machine learning model that takes the data and provides output. It's amazing how many people can't differentiate between AI, ML, and Deep Learning… Thumbs down.
Bruh.. You didn't "build", you just showed how to use something that is already "built".. Don't clickbait like that man
how do we use with a phone camera, i need more clarity about this please! Thanks
It doesn't seem to work on firefox. Works well in Chrome.
I liked, please part two ❤
You just doxxed your own IP at 2:20 ….
You didn't build the face detection algorithm, nor you've implemented it.
Cool
I have imported this project and run but the HTML page shows just video. I did console log detections and I got an empty array. It doesn't detect anything. Detection problem I believe.
Face detection works with C languages only
This works, good tutorial, but I had to change a little of code in startVideo() func.
Does it work in sublime text