Real Time AI Face Landmark Detection in 20 Minutes with Tensorflow.JS and React

Ever wondered how snapchat filters work?

Three words...facial landmark recognition!

Facial landmark recognition allows you to detect a number of different points on your face that together make up your eyes, mouth, ears, nose and so on. From there you're able to apply overlays aka filters to get your snap! But there's so much more that it can be used for like emotion analysis and face tracking.

Sounds a little difficult though, right? Well, in this video you'll learn how to build your own face landmark detector app in 20 minutes using Javascript and Tensorflow.JS.

In this video you'll learn how to:
1. Install the Tensorflow.JS facemesh model
2. Build a Javascript React.JS face landmark detection app
3. Detecting landmarks on your face in real time using your webcam

Resources:

Oh, and don't forget to connect with me!

Happy coding!
Nick

P.s. Let me know how you go and drop a comment if you need a hand!

Music by Epidemic Sounds

[yx]

I haven't even started watching and can already tell you deserve more views.

[ThangNguyen-zibm]

One of the best Facemesh tutorials I've seen so far online. Keep up the good work.

[Altanis]

why dont you have more subs/views? youre amazing at explaining your code and actually seem passionate unlike most coding tutorial creators. keep going!

[codelucky]

As a backend dev, it wasn't difficult to understand the front-end part.
I like your teaching style. 👍

[PTAH]

WHOA YOU WILL RECEIVED ONE MILLIONS OF VIEWS THAT AMAZING CONTENT RIGHT HERE

[sufyan]

Absolutely great tutorial...And believe me, you will get dozens of subscriber soon..
All the Best!

[waytosanathan]

The key points for me was to switch to video.videoWidth instead of video.offsetWidth & second one is resetting canvas width and height for each loop. Thanks for the simple learning

[TagenigmaLLC]

Best Face Landmark Detection + Coding Tutorial that I've seen!

[nicoleiva]

You deserve more subs dude. I'm on your team now

[diegorafass]

Canva has a delay in relation to the video component. Hide the video and add the camera image to the canva, along with the points on the face. Congratulations on the video!

[katlisabeth]

There is a lot to learn from you! You rock

[reachinganwesha]

Love from India.... Hoping one day I can also figure it out by Ur videos are Explained well..

[abeechr]

I would love to see a continuation of this project. Maybe create a filters of your own? Rabbit ears, whiskers, etc...

[tkipkemboi]

You are AWESOME!!! Your tutorials are easy to follow and I love how you break down the concepts as well.
As a point of feedback, I would love if you could mention some possible applications for noobs.
Thanks again,
Subscriber!

[kayan_dev]

I try your GitHub repo and build in 1 command " npm i " and it's working so amazing :)

[parsa]

the new version of tensorflowjs is different and i am fully confused now! it doesn't know the model and i don't know how and from where it's requesting to download about 4MB models for each request!! so setinterval can not be the best practice for me! is there anyone here that can help me?!

[mustafaashraf]

best tutorial ever <3
i hope you make a video about face recognition soon, it'd be nice

[StaMariaRock]

This is an amazing video, what could make it even better, is possible applications for the landmarks, for example, detecting certain dots, and based on it's movements, detect micro-expressions, that could be interesting

[shhh]

I was wondering if you can make a separate video on who to map the detected face landmarks on a 2D/ 3D avatar

[KriGeta]

Is there any way to export this data into 3D software like blender?