Let’s play with Chrome’s Face Detection API 👨 👩
Still experimental but we can start building fun stuff 😃
Before the actual code, read this ❗ ❗️
This API is still experimental and under development. It isn’t available right off the bat in Chrome. From my experience some operating systems still don’t detect very well (my Linux machine can’t detect anything, my Windows machine only detects faces and my Apple machines detect face, eyes and mouth).
To put it available you must first enable Experimental Web Platform Features on your Chrome’s flags. Very simple to do.
Go to :
And enable the Experimental Web Platform features section.
After enabling it you should see a Relaunch Now button on the bottom of the screen.
After relaunching you should be able to access the FaceDetector API from a console window for example.
But why?! It’s unfinished, limited and buggy 🤔
My answer is: Why the hell not?! It’s still fun to do something with it and we’re all learning something 😄
I never touched on something like this before and I thought it would make a great challenge to make some kind of snapchat / instagram filter.
I first stumbled upon this API on Wes Bos’s twitter.
After that I went on trying to find something about the API eventually finding the link below. In it the author mentions some pretty cool use cases for FaceDetection.
Face detection using Shape Detection API
I was at the party of the Chrome Dev Summit and Miguel Casas-Sanchez on the Chrome team came up to me and said "Hey…
- Use it on Web Workers / Service Workers
- Crop the User’s profile photo automatically by detecting his face 🔥 🔥
- Quick tag of photos — find all the faces in the photo and place tags near the faces
Pretty cool when you think about it right?! I recommend you read it.
How’s the code?
Pretty simple really, there is nothing really that complicated.
Video Prototype 📝
I ended up building a prototype to see if I could get something like a snapchat filter with googly eyes. I actually got it to work and it’s available in CodeSandbox below.
I also learned that, at least for now, this API is not really meant to be used in situations like video capture because, the more smooth I wanted it to get, the API would mostly crash when called on 30 or 60 fps.
Github Demo Project
This is the link for the project:
And you can check it out and play with it here 😄
Mostly all of the project is done with sort of hacky code but I focused mainly on getting it to work than making it look good.
It detects multiple faces 😄 🔥 🔥
If you want to test out the video example go here 😏
IMPORTANT NOTE ❗️ ❗️
I’ve observed different behaviours in several computers. My proxy configured work machine cannot call the FaceDetector service at all. Some older computers only detect the face but 0 landmarks (still don’t know why). On my personal work machine (Macbook Air) works fine and it can detect faces and landmarks such as eyes and mouths. In all apple machines I’ve tried it worked fine.
Still very early for this API but it’s still good and fun to play with 😄 😄
I really want to see what people build with this so, please, start building your own fun little projects and if you want to, share them in the responses of this article 👍 😄
If you do play with this API and do some cool things or take some cool pics with filters please let me know and post them on the responses below 😄
If you want to stay updated on everything I write please feel free to Followme!
João Miguel Cunha — Medium
Read writing from João Miguel Cunha on Medium. Full-Stack @ Wiremaze SA. ❤ JS and React. Every day, João Miguel Cunha…
And if you want to see more stuff from me I can recommend these posts: