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.
Sir i copied your whole code still it is not working first i used wamp server to run the code and after that i also tried with my online server then also it is not working please tell what should i do
@@hrishikeshrane2429 I am not sure. Your problem could be that the root of your server is not the root of the project so you will need to change the model URLs to be from the root of the server.
@Asim Hussain was having the same issue, opened settings/live server config, checked and unchecked some stuff there( don't ask what, lol) and it's now working. I hope it helps))
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
Just wanted to let you, @Web Dev Simplified, know, that this video, as well as the sequel were helpful in an international project at my university. Thank you you for providing a fast and simple tutorial as a guide for our minimum viable solution for a part of the project
Wow so many haters... thanks I think this video is really nice for anyone who wants to start playing with facedetection without deep knowledge of programming. Even if you don't build the facedetection I believe it's really impressive how you make things easy to understand. Thanks again
I know that this was a while ago. But, it is definitely still one of the better API recognition discovery / coding demonstrations that I have seen in quite some time. Well done, sir!!!!
It doesn't matter because in the real world at these tech companies you will be using their APIs to implement stuff, this is a great project to complete and to have in a portofolio
Despite all negative comments, this was really a eye opener for what JS is capable of. And now I can test how to fool face recognition algoritms. Thanks!
"how to implement a face detection api" not "how to creat" Anyway, making a face detection api takes at least a 5 hour run and will definitely makes less views in yt, after all people just like to see the cool part when everything works with press of a button not the time spent debugging. Nice video dude
"5 hour run and will definitely makes less views in yt" I'm gonna stop you right there. If done right, long tutorials get views. Other experienced youtubers can fastforward footages from their actual coding time, condensing it down to 10 minutes of contents with summaries. Others can make it a really interesting series to watch. Watch time is how you get money
Nice flow, easy to listen to (didn't ramble, or divert), clear, simple and effective. Your a great presenter with a nice story type flow ability. Well done, excellent presentation.
@@WebDevSimplified thanks for the work... is there any way i could make the lips fill in blue, etc... or even get the pixels and shade it blue, like makeup?
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. ua-cam.com/video/-VKhBdcuBqY/v-deo.html ua-cam.com/video/_32EAm9Z08g/v-deo.html ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
Man you're gem ! People are actually really mean, believe me if they would have been paying for such informative tutorial they'd be like a kicked ass. They are getting such informative content for free that's why they are barking too much. Thank you so much for this tutorial. I had been searching for such content for long time and at last I got what I was looking for. You earned a subscriber. Stay blessed
I am getting CORS error URL scheme must be "http" or "https" for CORS request. when i am including face-api.min.js in script tag in index.html . Can anyone help me
Awesome! Love it that it is well explained. All done in less than 13 mins. Yes, please .... more AI goodness sounds real good. Now to have fun with this.
Yes, thank you for this. Keep making awesome stuff like this! Maybe you could look into incorporating React Native with .TSX files into future projects.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. ua-cam.com/video/-VKhBdcuBqY/v-deo.html ua-cam.com/video/_32EAm9Z08g/v-deo.html ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
Hi, I know it's a 2 years old video, but I have a question, during the timemark at 9:56, there's no box showing or any mark showing, it's only showing the video. I did all the exact same code as yours but couldn't get the square canvas at all.
I have a question How I can only fetch the expression and store it into a variable and print it in console. Nothing else I tried console.log (detections[0].expressions); but it shows all expressions value. I want only which is on the screen
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. ua-cam.com/video/-VKhBdcuBqY/v-deo.html ua-cam.com/video/_32EAm9Z08g/v-deo.html ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect Hope that you will like
7:52 "and it saying tinyFaceDetectorOptions is not a constructor" --*cut* (10m-1h later) "Oh man you kidding me?!?!?! " *cut*-- "and this is super easy to fix, this just needs to be a captial T"
That would also be quite stupid if he would have done that, because it seems that someone already did that. Now I make something to see if the people at my frontdoor come with good intentions or not.
@@Illu07 I know he did, but still i enjoyed his video and enthusiasm. Let's just be glad he not your lawyer in a capital case and his claim would put you away forever. Now I watched this video very relaxed on my couch and learned about the API he used.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. ua-cam.com/video/-VKhBdcuBqY/v-deo.html ua-cam.com/video/_32EAm9Z08g/v-deo.html ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect Hope that you will like
There’s 2 things... He is copying the code from another device. And he is not creating any detection algorithms rather he is just interacting with the Face detection algorithms API 🐝 But the explanation was good. Very cleaver guy.
Umm.. something went wrong on the purple box thingy around 11:08. The box doesn't appear, it appeared for like 1 second then disappeared and then never came back
Wow! This is super cool. Definitely gonna give it a try. Please do face recognition too. And extend it to a face unlock system perhaps. Please do more videos on ML, AI and AR.
There are limitless uses. For example you can use this algorithm detect when a camera detects a face and take a picture as a security measure for a building.
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 used VSCode for this too. But I'm still getting the same error even though my folder arrangements are the same as yours.
@@tasnimzia4499 Do you have VSCode open to the root folder of your project. Also is your code the same as the code linked in the description.
Sir i copied your whole code still it is not working
first i used wamp server to run the code
and after that i also tried with my online server then also it is not working
please tell what should i do
@@hrishikeshrane2429 I am not sure. Your problem could be that the root of your server is not the root of the project so you will need to change the model URLs to be from the root of the server.
@Asim Hussain was having the same issue, opened settings/live server config, checked and unchecked some stuff there( don't ask what, lol) and it's now working. I hope it helps))
This isn't how to BUILD face detection with JavaScript but rather how to IMPLEMENT face detection with JavaScript.
как развернуть чужой гит и запустить с умным ебальником
Exactly
@@d33pFaiL Все в довольно интересной форме рассказал и показал, указал источник на гит, haters gonna hate:D
@@d33pFaiL жестко, у тебя очень конструктивная критика, в том числе моего коммента, тебе бы к психотерапевту сходить
@@d33pFaiL Yes
next video how to build real time covid19 detection with js
Lol
You can't do that using software alone .
@@abh1yan lol😂
@Neutral Me 🤣
Hahhah
Don't get disheartened by odd comments, it's part of the trade mate!
But you sir, are doing a fantastic job!
Highly appreciated!
We do love your Ai videos. Make more of these
Will do!
@Web Dev Simplified YAY!!! Lmao.
I second that request. This was a great tutorial.
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
12:25 This video has nothing to do with how the face detection works.
lol you are actually right :)
u right
The best tutorial on AI face detection I have ever seen
Thank you!
ua-cam.com/video/F5shV0pInJM/v-deo.htmlsub_confirmation=1 CHECK OUT MY PYTHON OPENCV TUTORIAL IN JUST 1 HOUR 🔥🔥
@@amoghamaiya3832 We prefer Javascript over PYTHON. So go away
The intro was like a robot talking about robots. Appreciate the tutorial.
That is just how I am. My newer videos are slightly less robotic.
He was reading
@@murilomelo6752 I wasn't reading any script. I do not script any of my videos since I suck at writing and it would be even more robotic.
@@murilomelo6752 Your profile pic is in almost any youtube channel comment section I visit.
"Anything but mess my hairdo."
Just wanted to let you, @Web Dev Simplified, know, that this video, as well as the sequel were helpful in an international project at my university. Thank you you for providing a fast and simple tutorial as a guide for our minimum viable solution for a part of the project
Wow so many haters... thanks I think this video is really nice for anyone who wants to start playing with facedetection without deep knowledge of programming. Even if you don't build the facedetection I believe it's really impressive how you make things easy to understand. Thanks again
I know that this was a while ago. But, it is definitely still one of the better API recognition discovery / coding demonstrations that I have seen in quite some time. Well done, sir!!!!
Nobody:
Me:Don't know anything about coding but still watching this.
me 2
AI is just that interesting. I watch lots of AI videos even though I have no idea what is going on in many of them.
maybe you should start coding.
Me 2
@Kaya Beautymantra Yeah, you need the right tutorials to start
Keep them coming dev, someone like i get to be enthusiastic and motivated by seeing such good works from the development side
"That's all it takes to create this simple face detection algorithm." No, you are not creating this algorithm, you are just interacting with the API.
Yes, everybody knows that here, you don't need to point that out
@@nadir2k He's polish "programmer" and he's angry coz he don't have any success with codding.
@@messiah2534 And you with english. "he don't"
It doesn't matter because in the real world at these tech companies you will be using their APIs to implement stuff, this is a great project to complete and to have in a portofolio
no one asks your opinion, you little polish peasant
Hi, dude. Please make a second part of this, it would help me a lot. Thanks.
I just recorded a part 2 which will release Tuesday.
Despite all negative comments, this was really a eye opener for what JS is capable of. And now I can test how to fool face recognition algoritms. Thanks!
"how to implement a face detection api" not "how to creat"
Anyway, making a face detection api takes at least a 5 hour run and will definitely makes less views in yt, after all people just like to see the cool part when everything works with press of a button not the time spent debugging.
Nice video dude
"5 hour run and will definitely makes less views in yt"
I'm gonna stop you right there. If done right, long tutorials get views. Other experienced youtubers can fastforward footages from their actual coding time, condensing it down to 10 minutes of contents with summaries. Others can make it a really interesting series to watch. Watch time is how you get money
Syed, wallah !
In opposite of the majority of comments, I thank you for this tutorial. It's going very helpful so far and even a dummy can understand the steps.
You really are an amazing programmer and an awesome instructor. I never saw a video so straight into the topic, and understandable. :)
he's one of the worst instructors ever, nonetheless the argument treated is interesting
That's the way to do it, nothing but the necessary frameworks and all vanilla! Well done.
Can you make a series about Javascript, I have watched a lot on youtube but I just understand your channel. Form Vietnam with love!
I plan to eventually, but haven't gotten around to it yet.
@@WebDevSimplified Thank you !
You can follow following channel as well.
ua-cam.com/users/programmingwithmosh
Nice flow, easy to listen to (didn't ramble, or divert), clear, simple and effective. Your a great presenter with a nice story type flow ability. Well done, excellent presentation.
Thank you so much! I really appreciate it. I'm glad you enjoyed the video.
@@WebDevSimplified thanks for the work... is there any way i could make the lips fill in blue, etc... or even get the pixels and shade it blue, like makeup?
Thanks bro
Love from INDIA
You're welcome!
u just made the world of programming so easy
Awesome.... Thanks for great video...
Please make part 2 for login with face detection.
I don't think I will cover login in part 2 since that will require building a login system, but I definitely plan to cover face recognition.
@@WebDevSimplified Hey! The best way to do login with the face is saving the custom model in local session?
3:40 when i open the live server, my camera turns on, but the live feed wont show up
"there's only one face apparently" he says as if expecting more than one 👀
Wow, thanks so much. I'm very happy that I can connect my camera to my site 😁
When I added the Promise.all([... part I could no longer see the video, although when I inspect element there are no errors.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
ua-cam.com/video/-VKhBdcuBqY/v-deo.html
ua-cam.com/video/_32EAm9Z08g/v-deo.html
ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
Man you're gem ! People are actually really mean, believe me if they would have been paying for such informative tutorial they'd be like a kicked ass. They are getting such informative content for free that's why they are barking too much. Thank you so much for this tutorial. I had been searching for such content for long time and at last I got what I was looking for. You earned a subscriber. Stay blessed
you hit it spot on! have you any examples on codepen. some ppl there get angry with questions, but u seem quite reasonable!
I am getting CORS error URL scheme must be "http" or "https" for CORS request. when i am including face-api.min.js in script tag in index.html . Can anyone help me
Install the cors package :
Command: npm install cors
Also include this in the file like server.js or app.js
Santosh Gupta that has nothing to do with this???
can't believe this is free this man is a hero thank you sir.
Videos like yours are such inspirations for me to keep on coding. Thanks
I'm glad I could help!
It's always been great to visit your channel. All videos are very intuitive, simple to understand but full of learnings. Thank you!!!
>uses a face detection algorithm
>this is how to make a face detection algorithm.
I'm not sure I understand.
it's amazing to see some unusual videos like this as i'm always focusing on my web dev tutorials, please keep them up, and thank you.
OH YEAH~~~~ I gotta definitely check this out soon! Traveling abroad right now so have limited time to code and study, heehee~ :)
It was really fun to make! Thank you so much for the suggestion.
great work sir we want more tutorial on AI with projects
error : face-api.min.js:1 Uncaught (in promise) Error: Failed to link vertex and fragment shaders. ........
Same
feel your pain! same
@@imacup5640 I answered in this thread what I think might have been causing it
@@_Moody_1502 Answered in the thread what worked for me
MAKE PART 2!!!!
love your videos!
That surprise expression 😆😆
I am interested to learn more on AI Face Detection. Kindly provide more videos on such topics.
I have another video linked at the end of this one on face recognition.
A lot of people are asking about part two of this video. It is already released and can be found here. ua-cam.com/video/AZ4PdALMqx0/v-deo.html
This is really BEAUTIFUL video I have seen in a long time!! Terrific explanation in such a short time!!
Awesome! Love it that it is well explained. All done in less than 13 mins. Yes, please .... more AI goodness sounds real good. Now to have fun with this.
Thank you! I try to keep all my videos short and to the point since I hate watching long drawn out tutorials.
you are amazing, you make javascript look like adding 1+ 1
Bro Make a video on simplified JS series , love from India❤️
I plan to do that eventually. It is just really time consuming.
That’s a super good idea :)
Holly sh*t... Please do more videos like this. Thanks. Do more videos... You definitely master Js and take it to a whole new level.
Thank you. I have a part two of this video already out and linked in the description and end screen of this video.
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)
have you figured out this error? :)
@@danpetre5414 If you know please kindly tell me
Your videos are super exciting. Explained well. Keep up the work dude
Yes, thank you for this. Keep making awesome stuff like this! Maybe you could look into incorporating React Native with .TSX files into future projects.
I do not use React Native so I probably will not cover it in the near future. Sorry.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
ua-cam.com/video/-VKhBdcuBqY/v-deo.html
ua-cam.com/video/_32EAm9Z08g/v-deo.html
ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
@@WebDevSimplified Hey kyle it's showing, : Uncaught SyntaxError: Unexpected identifier 'faceapi'
Do you know what would have caused this?
These ar great videos and give a very helpful starter on the subjects. More please.
Now I can be like the cool kids and include a face detection in my website in order to unlock my content lol.
Hi, I know it's a 2 years old video, but I have a question, during the timemark at 9:56, there's no box showing or any mark showing, it's only showing the video. I did all the exact same code as yours but couldn't get the square canvas at all.
copy paste codes and tell my dad this is my first A.I. LOL xD
yes you're right , a lot of people make videos without any background, just copy paste. => it's a wasting time.
Great! Please do more of these videos
Thank you soooooo much this helped me out a ton!!!!
:D
I'm glad I could help!
@@WebDevSimplified is there angular version of this code available ??
Do the second part , these kind of content helps a lot Thanks man
I have a part 2 of this video already out linked in the description and end screen.
@@WebDevSimplified Got it man thank you so much..
Rename the title to "How To Use Face API to Build Real Time Face Detection"
up
Very nice.
Waiting for next video.
Thank you. Part 2 of this video is already released and linked in the description.
@@WebDevSimplified checking Right now.
Thanks.
I have a question
How I can only fetch the expression and store it into a variable and print it in console. Nothing else
I tried
console.log (detections[0].expressions); but it shows all expressions value. I want only which is on the screen
@webdevsimplified
This is really good. I love it. Thanks for making this video. It's impressive how far just a little JavaScript can go.
Omar, that's not a little. its the ready made ingredients remixed.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
ua-cam.com/video/-VKhBdcuBqY/v-deo.html
ua-cam.com/video/_32EAm9Z08g/v-deo.html
ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
Hope that you will like
7:52 "and it saying tinyFaceDetectorOptions is not a constructor" --*cut* (10m-1h later) "Oh man you kidding me?!?!?! " *cut*-- "and this is super easy to fix, this just needs to be a captial T"
So if i ever get an "is not a constructor" error, i should just put a capital T
lol true
@@animehero8648 not sure if trolling or serious haha
Really glad UA-cam suggest me this video. Liked, subscribed cant wait for more epic stuff.
Thank you so much!
Paaaaart 2
Sir , please consider making a video or rather give me the idea about how to host this website online so that it can be accessed from anywhere.
This is an amazing video. Please make more videos like this
This doesnt seems simple. dont understand anything just the HTML.. ;(
keep working on learning. takes time to understand.
I'm going to use this to learn how to break realtime facial recognition algos. Thanks for that. We must all resist this kind of technology.
You didn't build the face detection algorithm, nor you've implemented it.
That would also be quite stupid if he would have done that, because it seems that someone already did that. Now I make something to see if the people at my frontdoor come with good intentions or not.
@@arumbai you are absolutely right. Yet he claimed to do so.
@@Illu07 I know he did, but still i enjoyed his video and enthusiasm. Let's just be glad he not your lawyer in a capital case and his claim would put you away forever. Now I watched this video very relaxed on my couch and learned about the API he used.
Really Simplified
good job bro
Great tutorial! Thanks man. But honestly: semicolons ffs!!
Never! Once you go semicolon-less you never go back 😜
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
ua-cam.com/video/-VKhBdcuBqY/v-deo.html
ua-cam.com/video/_32EAm9Z08g/v-deo.html
ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
Hope that you will like
@@WebDevSimplified Bro 🙄😁😂
Very nice audio's are crystal clear 👍 !!!
Thank you.
Without Promise and Face API, I think I'm gonna have to sell watermelon for a living..
hahahhaha......you need assistance ??
Awesome video sir... Love from india🇮🇳
Thank you
you mean use a library not build there is a big difference.
Cannot wait to try this. Very nice tutorial would love more like this.
Thanks. I have a part 2 linked in the description and end screen as well.
It’s not building, nor implementing. Title should be ‘Calling face-detection API by JavaScript’
So?
I have been looking for this video. Finally ... got it. Thank You :)
12:17 I thought he will laugh hahahaha
The Best tutorial on AI face Detection I have ever seen ,Thank you Brother
You're welcome!
didn't appreciate the clickbaity title
Video is crisp and clear... Thanks for the tutorial... Waiting for more AI tutorials...
Thanks! If you haven't already seen the face recognition video that is a followup to this video I would check it out.
Your explanations are really impressive. I want you to make more videos like this using javascript. I am a lover of JavaScript.
Whoever published this project on github and ran into 404 error, replacing "/models" with "./models" in the script.js worked for me.
Awesome tutorial! I think I'll implement this to my robot
Super tutorials. Looking forward for more tutorials from you
Please create a video about markerless facial motion capture.
This code can easily be modified to make the face detection not add in the marks. I purposely added the marks by telling it to include landmarks.
@@WebDevSimplified you are the best
There’s 2 things...
He is copying the code from another device.
And he is not creating any detection algorithms rather he is just interacting with the Face detection algorithms API 🐝
But the explanation was good. Very cleaver guy.
Umm.. something went wrong on the purple box thingy around 11:08. The box doesn't appear, it appeared for like 1 second then disappeared and then never came back
Yes, a part two, please.
It is already released and linked in the description.
Aaaaand that is my subscription of today!!
Thanks man your videos are amazing.
loved this one please make next one soon.
It is already out and linked in the end screen and description
Damn... Awesome content as always!!
Wow! This is super cool. Definitely gonna give it a try. Please do face recognition too. And extend it to a face unlock system perhaps. Please do more videos on ML, AI and AR.
Great video! Congrats and keep up the awesome work!
Nice video, but what's the use of it for e.g is there a Web App already built using this technique?
There are limitless uses. For example you can use this algorithm detect when a camera detects a face and take a picture as a security measure for a building.
Boom, im a new subscriber dude, keep it the good work
Thank you!
more please i liked, subbed, commented, add to watch later and shared this video LOL
I have a part two to this video that is linked in the description and end screen.
Great video man, subscribed!
Thank you so much for the support.