Let’s play with Chrome’s Face Detection API 👨 👩

Still experimental but we can start building fun stuff 😃

chrome

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 :

chrome://flags/#enable-experimental-web-platform-features

And enable the Experimental Web Platform features section.

How it looks disabled on Chrome — Ubuntu

After enabling it you should see a Relaunch Now button on the bottom of the screen.

relaunch now button

After relaunching you should be able to access the FaceDetector API from a console window for example.

FaceDetector API is now available in the console

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.

Wes Bos tweet about the FaceDetection API

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.

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.

example code snippet for Face Detection

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.