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.
First of all, Thank you for this awesome video. I've tried to implement this concept to an attendance application using automated snapshots from webcam(s) to record attendance through PHP .... It worked fine on small business but when I tried to apply it to an establishment of 34 thousand employees it took a lot of time to load and forever to reload after every detection.
Once again, very nice Tutorial! Thanks for uploading this video. Just want to clarify one thing: The second parameter passed to FaceMatcher is not the certainty, it is the distance threshold of two descriptors. The higher the distance the more unsimilar two faces are. If two descriptors have a lower distance than the threshold value we have a "match" and if none of the descriptors match, the face will be unknown.
@@nuwanmadushanka8501 Bro i really need help regarding a few things , i would be grateful if you provide me with your contact detail, anything , fb,insta, linkedin, gmail.
Thanks a lot for the awesome tutorial! I wanted to learn ML and didn’t know where to start, but after watching your videos I am going to learn Tensorflow JS!
I developed a site to detect faces, drawa face landmarks, detect facial expressions, and age Goto face-api-js-demo.netlify.app from your computer Share this if you can
Thanks for your video & code. Its really helpful. Can you post real time face Recognition tutorial? I mean to say recognition using webcam for attendance. Thanks
I love your tut man. Hope that you will have real time face recognition tutorial. So that i can use in creating attendance system with face recognition. Thanks a lot. New subscriber here
@@WebDevSimplified this is what i am trying to do but to no avail. I am a newbee 😅. How did you do this? Do you have a video/article/github you can recommend?
Hey, Great Work.. Can you Show me how to Recognize any person from Webcam? For my online examination project on face login Hope, You upload in your next part...
That is a good idea. I generally have a hard time recommending specific projects since I think it is important to work on what you enjoy, but I think a basic video on what are some good topics is a good idea.
@@WebDevSimplified Yes please, it will be great if you will make a sort video on importance & type of projects required for non experience guy or basically student before applying for a job(specially in web and app development) By the way thanks for replying. You are doing great and unique work. I always get highly motivated by you.
@@qwertykeypad789 I also think making your own projects is the best way to go. I would try to make the project as close as possible as the real life apps. It should have a top level plan, from UI to UX, clean code, good performance etc. So you also need to think whether you should cram everything you've learnt into that(such as multiple animation on one page), or how people would enjoy use your stuff as user. After all company hires programmers to make final products for users, the more understanding you have about the final product, the more chance company will like you. That's my two cents.
@@CassioLeodegario Hint: you should move the lines `const labeledFaceDescriptors = await loadLabeledImages() const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)` outside of the setInterval function. In your code you load every image in every callback of setInterval and train the net again and again. You only have to do this one time at the beginning :)
@@WebDevSimplified hello, excuse me, could you send me an example of the files you have in the models folder please, I would like to see the json format that it has, thank you very much
@@WebDevSimplified Thanks for your reply ! And I have heard that before, Doing projects to help people, it helps , youre doing it great. Thanks again !!!
Your amazing! I would love to use that technology for our students where they could use their phones or camera to verification to proceed to a course! I wonder if that's a option!!
Hey man, nice work and really good explanation. I just have one question, is it possible instead of pictures in the folder in our computer, to connect the face recognition program with our for example pictures in the MySQL database?
I know the question is not directed to me, but that guy must have so many question to answer. Yes, it's possible. I did that following the step below: 1) First I downloaded the picture from the database (I don't like to keep it on mysql, but the client keeps) to a folder in the server or local machine. I'm doing that with php script. 2) Then I labeled the folder with username login. 3) I've sent the picture that I want to compare and find the faces. 4) In last step I used faceapi.faceMatcher to find people I want from the Picture, right after parse every folder with faceapi.detectSingleFace. The same ideia was provided in the video and the source code script.js, avaliable in github. Remember to change the local directory to absolute path. const URI = 'YOUR FULL PATH'; Promise.all([ faceapi.nets.faceRecognitionNet.loadFromUri(URI+'/models'), faceapi.nets.faceLandmark68Net.loadFromUri(URI+'/models'), faceapi.nets.ssdMobilenetv1.loadFromUri(URI+'/models') ]).then(start)
@@sbdigi can I ask why the models are not loading twice? The first time I use it, it would work but on the second time, the word 'Loaded' won't appear.
To run in webstorm builtin server please replace this like from "faceapi.nets.tinyFaceDetector.loadFromUri('models')" to faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
When I run it, "Loaded" won't appear, and when I chose a picture it only displays the name but the image itself won't appear. What could be the problem and what should I do to fix it?
thank you for the tutorial. I downloaded the sample, it works in chrome, but not in edge, fails to create the D3D shaders. I'll be messing around with it never the less, my favorite face recognition sample so far.
hi! thanks for the video, it's fantastic. sorry for bothering but i've got one question and i'll be very glad if you could answer on it 🙄 you did the detection of all faces quantity in the upload pic by this: document.body.append(detections.length) (line 22 on the time 10:14 of the video) the question is about how could we detect the number of known faces in the picture or that's impossible? 😕 thanks again for the video!
Hi man great vid, I am working on an app using express and i got some problems to implement the face detector, this only works on live server? and other question, can I compare a face descriptor from an image with the face descriptor obtained from my webcam? like save my face and when I put my face in my webcam do something? thanks for reading my comment and have a nice day :)
Great tutorial. thanks. Are there limitations on the number of labeled images *if we define up to 10 will this impact the performance ? is there a way to make the browser using gpu to deal with these functions ?
@@WebDevSimplified thank you for the much value in this video but you didn't covered the environnement setup if you can please clarify this for us thank you
@@saidsinf1180 You need to read the docs for faceapi. It describes how to run the code with Node.js. My best guess is the images need to be local to your server.
Hi, thank you for the tutorial. I have a doubt, what is the difference between 'label' that you declared first with the result and 'labels' where you stored the name of your characters? Thank you.
I know this reply is very late, but in case you're still wondering: "labels" is the list of all the *possible* labels, indicating the folder names of the training data. "label" (without the "s") is the actual label used on each specific detection to draw onto the box.
@@WebDevSimplified hello pls am getting this error face-api.min.js:1 Uncaught (in promise) Error: Failed to link vertex and fragment shaders. at Wr (face-api.min.js:1), the error makes the rectangular canvas not to show when tested in video one
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
I decided not to use NPM because I didn't want to add extra complexity to the codebase. You are more than welcome to use NPM though. I also like your login idea.
Do you have to loop through a labled image folder in order for this to work? What if you just had 1 folder with lots of different images? And the images were labeled the names of the people.
Thanks again for this video. I've taked your example code and added to a wordpress page and it works, well almost. However, I cannot debug the problem because I get this error when opening the Sources tabe in the Chrome Dev Tools "Request content was evicted from inspector cache". I've spent hours trying to find out what is stopping me degugging this. Do you have any ideas? Many thanks BTW, I cannot find the first video you mention which I thin is just about face detection not recognition
I do not plan to make a video on this since I have a video doing facial detection with a webcam and that can be combined with this video to do exactly what you are trying to do.
How to run the file? If I am simply clicking on the index.html it's asking for the image input and after that showing a blank screen. How should I run the code?
Hi, thank you so much for this! I have a question. How can I get the images from a database for eg mysql instead of getting it from the internet? Thank you again!
Hello Thank you for the great tutorial. can I use image from webcam to recognize image from the labelled image saved of users of a system? I tried doing this but it keeps getting zero detections.
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.
compare celebs pic with there duplicates Let's See What Is Approx Percent Of Accuracy
Absolutly wright
which IDE do you use? Is that from microsoft?
@@ThePixelitomedia There Is Only One Editor From Microsoft Named As Visual Studio Code
@@ThePixelitomedia It is Visual Studio Code from Microsoft
Thank you for helping another poor soul! God bless you brother.
Sir I'm 19 years Pakistani student and fond of learning ML and started following you .
I'm glad you are enjoying the videos!
First of all, Thank you for this awesome video.
I've tried to implement this concept to an attendance application using automated snapshots from webcam(s) to record attendance through PHP .... It worked fine on small business but when I tried to apply it to an establishment of 34 thousand employees it took a lot of time to load and forever to reload after every detection.
Project from video (from github) have problem.
Error: SsdMobilenetv1 - load model before inference.
You havn`t same problem?
Hey, I am doing the same project now. Can you tell me how you got each face's details and stored it to the database?
hola podrías ayudarme con algo similar?
@@coynicoy13.
Created a blob column where I stored the images.
@@fabianalvarez2031
How can I help?
Once again, very nice Tutorial! Thanks for uploading this video.
Just want to clarify one thing: The second parameter passed to FaceMatcher is not the certainty, it is the distance threshold of two descriptors. The higher the distance the more unsimilar two faces are. If two descriptors have a lower distance than the threshold value we have a "match" and if none of the descriptors match, the face will be unknown.
That is a good clarification. It is pretty much the opposite of certainty then. Thank you for letting m know.
can you please tell me is their any possibility of finding faces from cctv camera? or from the external video
can you tell me how to get the faces from the ip camera
you have a yt channel?
Always quality content! Always easy to watch. Thanks for your work
Hey Man, you're doing great.
I'm gonna include this in my college project
I hope it goes well for you.
@@nuwanmadushanka8501 Bro i really need help regarding a few things , i would be grateful if you provide me with your contact detail, anything , fb,insta, linkedin, gmail.
@@a_h_m_e_d____ contact my insta account nuwan_abeynayake anytime contact me
I am using Face-api.js but was not able to find a way to pass multiple images training face recognition.Your code helped a lot, Thanks.
I'm glad I could help
Thanks a lot for the awesome tutorial! I wanted to learn ML and didn’t know where to start, but after watching your videos I am going to learn Tensorflow JS!
did you learn?
Thank you man I'm definitely gonna include this in my college project.
that's called copying
@@hardik2081 Ya that's why I dropped the idea
great tutorial. work prefectly. gonna build real time face recognition
i'm glad found your channel and subscribed it, Kyle.. extremely helpful..
As someone who used to mix X-men and Avengers (don't laugh) I might need this very well. :) I look forward to playing with this soon ~~~ ^^
Thank you so much. I've waited for this.♥️
You're welcome!
I developed a site to detect faces, drawa face landmarks, detect facial expressions, and age
Goto face-api-js-demo.netlify.app
from your computer
Share this if you can
Great video. I mean, I could barely wrap my head around what you were saying but the video was still good.
Very cool! Nice work :). 14.3k subs, you are really racing ahead
Thanks. The channel has really taken off these past few weeks. It is exciting.
Thanks a bunch for this great tutorial dude ... two thumbs up !!
Awesome. This will be such a fun AI project. Thanks!!!
You're welcome.
Great content and nice T-Shirt!
can you make a tutorial face recognition with realtime video from your webcam?
did you found something ?
Capture the first frame and detect from that image.
Already made by him
@@30secondsEmotions where is the vidro tutorial bro ?? Anf thank you
I had done it
Just a suggestion I think you should make the tutorial stage by stage so that people can understand what everything does (e.g Part 1, Part 2)
Is there any way to achieve this but detecting it via browser camera? It's kinda match the uploaded images to the camera? Thanks great tuts!
Thank you I hope to become a programming professional someday 🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂
I'm sure you will. It just takes time and dedication, and before you know it you will be a full time software developer.
This is so helpful! Thanks man.. Cheers from Argentina 🇦🇷 😊
I'm glad you enjoyed it.
hi dear what you did to make it run on your laptop please if you have some tips help me am stack
Can We use it to Recognize faces in a video rather than an image ? Any help would be appreciated. By the way, thanks for the awesome tutorial.
Man, you are rocking!
Thanks!
Thanks for your video & code. Its really helpful.
Can you post real time face Recognition tutorial?
I mean to say recognition using webcam for attendance.
Thanks
I had done this .. if you need help ,I can help
@@nehalprasad7458 hi, how can I contact you?
was fantastic, easy to learning with you, tks
Hello. Thanks for the tutorials, it was a great content. Please also teach about liveness and identity of the image in real time
From Viet Nam with love 🇻🇳
Great tutorial this is cool. Thanks man
You're welcome!
Thank you for tutorial, great job!
Just amazing..finally found it
hi dear what you did to make it run on your laptop please if you have some tips help me am stack
Thanks for the tutorial. It worked perfectly.
Bro could you able to share the working code...?? Please
Can you make a video of walking us through finding good apis and where to get them and the process of how to add them and invoke them in our projects?
Amazing clarity..
I love your tut man. Hope that you will have real time face recognition tutorial. So that i can use in creating attendance system with face recognition. Thanks a lot. New subscriber here
Thank you. If you combine my webcam face detection video with this one you can create real time face recognition yourself.
@@WebDevSimplified this is what i am trying to do but to no avail. I am a newbee 😅. How did you do this? Do you have a video/article/github you can recommend?
Excellent tutorial! :)
How can I combine this with the webcam for face recognition?
Haven't watched yet but awesome brother 😊😀😁
Thanks. I hope you enjoy it when you watch
Web Dev Simplified yes I really enjoy it. Please can you give your email
@@darrylwest3106 If you want my email it is available on the about page of my channel.
Good Job man !! How did you find the models pls ?
Thank you very much, it works perfectly.
Thats cool, But what about whole body gesture estimation detection.
Hi sir, I was wondering if you could do a live recognition system using both the videos you made with faceapi.js? Thank you sir. Much appreciated
Great video! Could this method be used for identifying plants and bugs for example?
Hey, Great Work..
Can you Show me how to Recognize any person from Webcam?
For my online examination project on face login
Hope, You upload in your next part...
Even I'm searching for it. I tried and I'm kinda stuck. Lemme know if you got it??
Great...video again😀...
Please create a guide video on project ideas and project necessity for jobs(fresher)
That is a good idea. I generally have a hard time recommending specific projects since I think it is important to work on what you enjoy, but I think a basic video on what are some good topics is a good idea.
@@WebDevSimplified Yes please, it will be great if you will make a sort video on importance & type of projects required for non experience guy or basically student before applying for a job(specially in web and app development)
By the way thanks for replying.
You are doing great and unique work.
I always get highly motivated by you.
@@qwertykeypad789 I also think making your own projects is the best way to go. I would try to make the project as close as possible as the real life apps. It should have a top level plan, from UI to UX, clean code, good performance etc. So you also need to think whether you should cram everything you've learnt into that(such as multiple animation on one page), or how people would enjoy use your stuff as user. After all company hires programmers to make final products for users, the more understanding you have about the final product, the more chance company will like you. That's my two cents.
@@AnnieTaylorChen thanks Annie
Another video on the same but in real time? :o
@@CassioLeodegario Great work. You save my days!! Thank you very much, :-)
@@CassioLeodegario Hint: you should move the lines `const labeledFaceDescriptors = await loadLabeledImages()
const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)` outside of the setInterval function. In your code you load every image in every callback of setInterval and train the net again and again. You only have to do this one time at the beginning :)
@@Kasalop I just saw a pull request it was yours? Well, thank you anyway
@@CassioLeodegario No, it's not mine. Shell I review it or create one? Will you maintain this repo? So does it make sense?
@@Kasalop I don't know if it is going to be useful for someone but I would be grateful if you take a look :)
my first video play, and only code, is very good video !!!
Thank you
hi dear what you did to make it run on your laptop please if you have some tips help me am stack
@@saidsinf1180 I use live server with VSCode to make it run.
@@WebDevSimplified hello, excuse me, could you send me an example of the files you have in the models folder please, I would like to see the json format that it has, thank you very much
@@carlosamarilla7791 These files are available in the face-api repository on GitHub as well as on my GitHub linked in the description.
Thanks for sharing this.
Thanks a lot. It's a good job, guy
You're welcome
Thank you so so much 🌻
You're welcome!
Hello brother, I would like to know if we can do it with other people for example, a simple face of my friend. Thanks so much for the video, amazing!
Hi! Where did you get that models folder from? btw awesome video :D
edit: okay, I've found it, it's weights folder on the repo of face api right?
Youre an amazing developer !!! I wonder how have you learned how to code , I mean reding books or watching tutorials?. Greetings from Nicaragua
I learned the basics of coding at college and then taught myself web development by watching tutorials and creating lots of my own projects.
@@WebDevSimplified you are really amazing..
@@WebDevSimplified Thanks for your reply ! And I have heard that before, Doing projects to help people, it helps , youre doing it great. Thanks again !!!
Your amazing! I would love to use that technology for our students where they could use their phones or camera to verification to proceed to a course! I wonder if that's a option!!
Fantastic bro
Very awesome
Awesome.......................................
Hey man, nice work and really good explanation.
I just have one question, is it possible instead of pictures in the folder in our computer, to connect the face recognition program with our for example pictures in the MySQL database?
I know the question is not directed to me, but that guy must have so many question to answer. Yes, it's possible. I did that following the step below:
1) First I downloaded the picture from the database (I don't like to keep it on mysql, but the client keeps) to a folder in the server or local machine. I'm doing that with php script.
2) Then I labeled the folder with username login.
3) I've sent the picture that I want to compare and find the faces.
4) In last step I used faceapi.faceMatcher to find people I want from the Picture, right after parse every folder with faceapi.detectSingleFace. The same ideia was provided in the video and the source code script.js, avaliable in github. Remember to change the local directory to absolute path.
const URI = 'YOUR FULL PATH';
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri(URI+'/models'),
faceapi.nets.faceLandmark68Net.loadFromUri(URI+'/models'),
faceapi.nets.ssdMobilenetv1.loadFromUri(URI+'/models')
]).then(start)
@@salaeventos1101 Wow dude, your answer is awesome! I just got everything from it! Thank you so much!!!
@@sbdigi can I ask why the models are not loading twice? The first time I use it, it would work but on the second time, the word 'Loaded' won't appear.
Estaria buenisimo un video sobre liveness detection javascript
Thank u, this is cool :)
You're welcome!
To run in webstorm builtin server please replace this like from "faceapi.nets.tinyFaceDetector.loadFromUri('models')" to faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
What is a name of Model(AI MODEL for recognize faces) you have used?
When I run it, "Loaded" won't appear, and when I chose a picture it only displays the name but the image itself won't appear. What could be the problem and what should I do to fix it?
Grateful for the work, brother! How do I use the google image base instead of a folder with images?
thank you for the tutorial. I downloaded the sample, it works in chrome, but not in edge, fails to create the D3D shaders. I'll be messing around with it never the less, my favorite face recognition sample so far.
I'm really glad you are enjoying it. I am not sure if this will work in edge because of the libraries used.
Best bro
the best🔥
Thanks!
Can you record tutorial, how to make real time face recognition? please)
did you found something ?
Thank you .
hi! thanks for the video, it's fantastic.
sorry for bothering but i've got one question and i'll be very glad if you could answer on it 🙄 you did the detection of all faces quantity in the upload pic by this:
document.body.append(detections.length) (line 22 on the time 10:14 of the video)
the question is about how could we detect the number of known faces in the picture or that's impossible? 😕 thanks again for the video!
All you need to do is create a counter that you increment whenever the faceMatcher finds a match.
thanks a lot 😌
Smart + handsome guy =))
Hi man great vid, I am working on an app using express and i got some problems to implement the face detector, this only works on live server? and other question, can I compare a face descriptor from an image with the face descriptor obtained from my webcam? like save my face and when I put my face in my webcam do something? thanks for reading my comment and have a nice day :)
Great tutorial. thanks. Are there limitations on the number of labeled images *if we define up to 10 will this impact the performance ? is there a way to make the browser using gpu to deal with these functions ?
Can I combine this with the real-time face detection you made? Btw greetings from Germany 🇩🇪
Definitley. I think that is a great idea of a project to work on and is very doable.
@@WebDevSimplified thank you for the much value in this video but you didn't covered the environnement setup if you can please clarify this for us thank you
@@saidsinf1180 What do you mean? All you need is VSCode and live server to run the code. You can use any server of your choice if you really want.
@@WebDevSimplified i tried to run the code with nodejs it's doens't work what do i need to make it work ????? thank you
@@saidsinf1180 You need to read the docs for faceapi. It describes how to run the code with Node.js. My best guess is the images need to be local to your server.
Hey, pretty cool video, I have a question, do you think I can use this api with a canvas(webcam) instead images?
I have a video already doing this exact same thing with a webcam for face detection, which can be used for face recognition just as easily.
@@WebDevSimplified oh, great to know, I think I watched this video that you are talking about, thanks!!
@@WebDevSimplified So it means we can just implement that with this tut . TIA
Hi, thank you for the tutorial.
I have a doubt, what is the difference between 'label' that you declared first with the result and 'labels' where you stored the name of your characters? Thank you.
I know this reply is very late, but in case you're still wondering: "labels" is the list of all the *possible* labels, indicating the folder names of the training data. "label" (without the "s") is the actual label used on each specific detection to draw onto the box.
Thank you very much.
You're welcome!
Thanks for your video & code? Can you post real time face Recognition tutorial? Thanks
@Eklavya Jain Where is it? This video shows recognition using image. I mean to say recognition using webcam.
Hello, is this possible with Face Recognition with webcam just like your other tutorial. Like real time that recognize who's in the webcam.
Up
This would require you to combine the code from the previous face detection video I created with this videos code on face recognition.
@@WebDevSimplified hello pls am getting this error face-api.min.js:1 Uncaught (in promise) Error: Failed to link vertex and fragment shaders.
at Wr (face-api.min.js:1),
the error makes the rectangular canvas not to show when tested in video one
Thanks dude. You're making our lives better.
First comment🤣
I'm glad you enjoyed the video!
hey its amazing man, great explanation so is it possible to use the same concept on web cams
like on live recognizing who the person is
ruclips.net/video/CVClHLwv-4I/видео.html here
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
I decided not to use NPM because I didn't want to add extra complexity to the codebase. You are more than welcome to use NPM though. I also like your login idea.
@@WebDevSimplified And I forgot to say "Great video". it was so helpful, Thanks
Hello, great video!! I agree, would love to see this implemented in npm!!! Could you make the exact same one in react or next?
Do you have to loop through a labled image folder in order for this to work? What if you just had 1 folder with lots of different images? And the images were labeled the names of the people.
TYSM
Thanks again for this video. I've taked your example code and added to a wordpress page and it works, well almost. However, I cannot debug the problem because I get this error when opening the Sources tabe in the Chrome Dev Tools "Request content was evicted from inspector cache". I've spent hours trying to find out what is stopping me degugging this. Do you have any ideas? Many thanks BTW, I cannot find the first video you mention which I thin is just about face detection not recognition
detections is undefined when i load live url image location into fetchImage method
Can you please make a video on this topic where the image are received from a real time webcam just as the other video and compare to existing photos
I do not plan to make a video on this since I have a video doing facial detection with a webcam and that can be combined with this video to do exactly what you are trying to do.
Yes, I want this too.
I challenge you to create a photoshop-style app (online in javascript), where we can do small manipulations on images and save them.
This is actually going to be one of my next videos. I already have it recorded.
I followed you and every thing worked but failed at fetching images, how can overcome this please need your help.
Thanks for video, just a question: how to store emotions results in db mysql?
You would need to setup a server with a DB and then in the frontend you would need to hit an API on that server to store the emotion.
thanks sir...
Is it possible to make this using webcam instead of images?
How to run the file?
If I am simply clicking on the index.html it's asking for the image input and after that showing a blank screen. How should I run the code?
Hi, thank you so much for this! I have a question. How can I get the images from a database for eg mysql instead of getting it from the internet? Thank you again!
same question here, do get the solution
Great! could I get the flow chart of this system?
Can we do the same but with a webcam ?
Hi @Web Dev ..the resizeddetecctions object does not have a descriptor inside it. not sure if it changed or what?
Hello Thank you for the great tutorial. can I use image from webcam to recognize image from the labelled image saved of users of a system? I tried doing this but it keeps getting zero detections.