SCC de SnaijerSander de Snaijer
Loading Light/Dark Toggle

MediaPipe

MediaPipe in the browser: real-time face and hand tracking used to build webcam-controlled games without any server-side processing.

  1. Screen recording of the map gesture control demo showing an OpenLayers map with a small webcam preview in the corner. A user pans the map by making a fist and moving their hand, then zooms by spreading two open hands apart. All hand tracking and gesture detection runs in the browser using MediaPipe WASM with no backend.

    Control Maps with Hand Gestures: Browser-Native Gesture Control for OpenLayers

    Apr 2026

    Ever wanted to pan, zoom, rotate, and reset a map without touching anything? I built a library that lets you control OpenLayers maps using just your hands. No mouse, no touchscreen, no backend. Everyt...

  2. Face-controlled Tetris game where a player moves pieces by raising eyebrows and opening their mouth using webcam face detection.

    Eyebrow Tetris: A Face-Controlled Browser Tetris Game

    Mar 2026

    The classic Tetris formula has been implemented countless times, but almost always with a keyboard or controller. For this project I wanted to explore a different question: What if a game could be c...

  3. Pug's Hunt browser game using webcam hand tracking to aim and shoot ducks

    Pug’s Hunt: A Webcam-Controlled Duck Hunt Built with Hand Tracking

    Mar 2026

    Pug’s Hunt is a browser game inspired by the classic NES Duck Hunt, controlled entirely through your webcam using hand tracking and facial gestures. Players aim by pointing their finger and shoot by o...

  1. How I built an open source gesture controller for OpenLayers (with MediaPipe) in public

    How I built an open source gesture controller for OpenLayers (with MediaPipe) in public

    Apr 2026

    Control an OpenLayers map with just your hands. This open source experiment uses MediaPipe in the browser to turn gestures into pan, zoom, rotate, and reset actions. No mouse, no keyboard, no backend, just a webcam and a surprisingly tricky set of gesture design decisions.

  2. Hand Tracking, Face Detection & Gesture Recognition with MediaPipe in the Browser

    Hand Tracking, Face Detection & Gesture Recognition with MediaPipe in the Browser

    Mar 2026

    Learn how to build a real-time hand tracking and face detection app in the browser using Google MediaPipe. Draw rainbow trails with your fingers, trigger effects with gestures, and detect mouth movement: all in one HTML file, no install needed.