In this video we will be setting up face recognition for any image using AI. This AI is able to recognize the name of every character in an image very quickly without much performance overhead. We will be using the Face API JS library built on Tensor Flow to setup the face recognition.
By the end of this video you will have fully functional face recognition on your site which can be used with any image. It is even easily extensible to recognize any other person by simply adding a picture of their face and adding their name to the code.
📚 Materials/References:
GitHub Code: https://github.com/WebDevSimplified/Face-Recognition-JavaScript
Face API Library: https://github.com/justadudewhohacks/face-api.js
Models Used: https://github.com/WebDevSimplified/Face-Recognition-JavaScript/tree/master/models
🧠 Concepts Covered:
– Using Face API to detect faces
– Drawing facial detections on a canvas
– Determining face identity using facial recognition
🌎 Find Me Here:
Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#AI #FaceRecognition #JavaScript
Original source
27 responses to “Easy Face Recognition Tutorial 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.
how to create the models?
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
Bro is this related to Neutral Network?
can you do it as a mobile app
Thanks for the job you've done, However I don't know how to fix this problem.
I upload an image but it doesn't detect the numbers of faces as it is shown in the
video, when I inspect the console I find this horrible error msg.
Really I need your help 🙁 I'll be great full
Uncaught (in promise) Error: Failed to link vertex and fragment shaders.
at Wr (face-api.min.js:1)
at t.createProgram (face-api.min.js:1)
at face-api.min.js:1
at face-api.min.js:1
at t.getAndSaveBinary (face-api.min.js:1)
at t.compileAndRun (face-api.min.js:1)
at t.conv2dWithIm2Row (face-api.min.js:1)
at t.conv2d (face-api.min.js:1)
at Zt.engine.runKernel.x (face-api.min.js:1)
Hey, really good video but I have a doubt, with live server you can run your project in your own device, how can i do that for a phone?
From Viet Nam with love 🇻🇳
navigator.getUserMedia is not a function — please tell me how to solve this problem
Sir, Can u say how to login to some page using facedetection
Thats cool, But what about whole body gesture estimation detection.
hi,
I tried to clone your files, that went well.
then i tried to use this AI, but all i can see is "Choose file" and then when i upload, the image is not being loaded.
i also do use live server, cleared my cache, and use XAMPP
anyone who can help me?
Hey, pretty cool video, I have a question, do you think I can use this api with a canvas(webcam) instead images?
To run in webstorm builtin server please replace this like from "faceapi.nets.tinyFaceDetector.loadFromUri('models')" to faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
please what's the framework
thank you so much sir can you make it in C# or C++
App.js:23 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 any idea why this happens :(?
Why it detects iron man?))
how to upgrade the test image using a real time video?
Thanks for video, just a question: how to store emotions results in db mysql?
My question is "Why not NPM?"
And it would be great if you talk about how to teach the app to validate faces! like make a login system using the library
How to put local images? I've tried with this http://127.0.0.1:5500/labeled_images/…, /labeled_images/… but it still doesn't work. Waiting for your answer, please.
i have just download the project from github ,and when i try to test it i got this errors in console …it doesn't work for me .
/models/ssd_mobilenetv1_model-weights_manifest.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/models/face_landmark_68_model-shard1:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Thanks a lot. It's a good job, guy
Mine's not loading, this is probably a dumb question, but does anyone know why this could be?
Hello, for some reason it failed to fetch the API.
I get these messages to the console.
face-api.min.js:1 Fetch API cannot load file:///C:/models/face_recognition_model-weights_manifest.json. URL scheme must be "http" or "https" for CORS request.
Fetch API cannot load file:///C:/models/face_landmark_68_model-weights_manifest.json. URL scheme must be "http" or "https" for CORS request.
face-api.min.js:1 Fetch API cannot load file:///C:/models/ssd_mobilenetv1_model-weights_manifest.json. URL scheme must be "http" or "https" for CORS request.
Can you help me?
Awesome. This will be such a fun AI project. Thanks!!!