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.

MediaPipe projects

  1. 16 Apr 2026

    A tiny OLED display connected to an ESP32 showing a live webcam feed in a dithered 1-bit pixel style, streamed wirelessly from the browser over Wi-Fi.

    ESP32 Mini OLED Webcam Stream

    Stream your webcam to a tiny ESP32 OLED display with MediaPipe face detection and seven dithering styles. Runs from a single Arduino sketch file.

  2. 3 Apr 2026

    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.

    Open Source Hand Gesture Controls for Maps in the Browser

    Open source library for controlling OpenLayers, Google Maps, and Leaflet with hand gestures. Pan, zoom, and rotate maps without touching the screen.

  3. 15 Mar 2026

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

    Eyebrow Tetris: Face Controlled Browser Game

    A browser Tetris game controlled by your face. Raise your eyebrows to rotate, tilt your head to move pieces. Built with MediaPipe face mesh tracking.

  4. 2 Mar 2026

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

    Pug's Hunt: Webcam Duck Hunt with Hand Tracking

    A webcam-controlled browser game inspired by Duck Hunt. Point your hand to aim, make a finger gun to shoot. Built with MediaPipe hand tracking and Next.js.

MediaPipe articles

  1. 29 Apr 2026

    MediaPipe Face Mesh: All 478 Landmark Points

    MediaPipe Face Mesh: All 478 Landmark Points

    Complete visual reference for all 478 MediaPipe Face Mesh landmarks. Grouped by face region with copy-paste JavaScript code for eyes, mouth, nose and jawline.

  2. 12 Apr 2026

    Gesture Controls for OpenLayers, Google Maps & Leaflet

    Gesture Controls for OpenLayers, Google Maps & Leaflet

    Add open source hand gesture controls to OpenLayers, Google Maps and Leaflet with MediaPipe hand tracking. Pan, zoom and rotate maps by webcam.

  3. 22 Mar 2026

    MediaPipe Hand Tracking & Face Detection in JavaScript

    MediaPipe Hand Tracking & Face Detection in JavaScript

    Beginner MediaPipe JavaScript tutorial: build a real-time hand tracking and face detection app in one HTML file with rainbow trails, particles and webcam effects.