ITP Camp 2024

Face/hand tracking in the browser with mediapipe: talk & workshop

Date: June 10, 2024 2-4pm


Session Leaders: Nolen Royalty


Format: Hybrid (In-person with online access)


Tags: #browser #mediapipe #hand-tracking #face-tracking #games #javascript


Mediapipe is a powerful and easy to use library for hand and face tracking in the browser. It detects hands, faces, and gestures in images or live video, letting you easily create webpages that respond to your body.

I've used Mediapipe to build online staring contests with realtime blink detection, virtual drums that you play with your hands, a pacman game that you control by chomping your mouth, and more!

Mediapipe can be intimidating, but the core concepts are pretty straightforward and with a little help it can be easy to use! Building with it is hard because building anything is hard - but the purpose of this session is to show that if you can build a website, you can hook it up to a webcam :)

During this session I'll give a brief talk where I introduce the basics of Mediapipe, followed by a live workshop where we build applications! We'll close it out with some live demos of what folks built.

I'll provide starter code for hooking Mediapipe up to your webcam and getting hand/face data, along with some basic website templates that can respond to that data.

I'm assuming no knowledge of Mediapipe and limited knowledge of building websites. That said, the workshop component of this session will be challenging if you're new to coding! I encourage folks to form small groups during the workshop so that everyone can participate (and of course I'll be around to help!)

Bring a laptop with a webcam!