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.

Face detection using Shape Detection API

• 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.

The first prototype on CodeSandbox

Github Demo Project

This is the link for the project:

JoaoCnh/googly

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 😏

A group of people happy they got detected successfully 😃

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.

Conclusion

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

And if you want to see more stuff from me I can recommend these posts:

The power of prototyping code

How to be constantly learning in programming