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})}} />

To continue reading this article register now