JavaScript tutorial: Add face detection to your web app


Last week we using annyang. This week we’ll extend our multi-modal interface even further by adding simple head-tracking using pico.js. is a minimal JavaScript library that is closer to a proof-of-concept than a production library, but it seems to work the best among the face detection libraries I’ve investigated.

The goal of this post is to start displaying the user’s head position overlaid on the map with a simple red dot:


First we’ll create a simple React class wrapping the pico.js functionality that we can use to get position updates of a user’s face:

<ReactPico onFaceFound={(face) => {this.setState({face})}} />

Then we can use the details of that face location to render a component, if there is a face detected: