JavaScript tutorial: Add face detection to your web app

Let’s add face detection to our React map explorer app using the pico.js JavaScript library

Last week we enhanced a map interface with voice commands using annyang. This week we’ll extend our multi-modal interface even further by adding simple head-tracking using pico.js. 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:

javascript face detection map IDG

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:

To continue reading this article register now