Real-time Webcam Object / Face Detection with MediaPipe

AI powered object detection web application built with Next.js, Three.js, and MediaPipe ML solutions.

Web Framework/Library: Next.js Ver. 14.1, Three.js Ver. 0.161.0

MediaPipe Vision Tasks: Ver. 0.10.10

MediaPipe Vision Models: Object Detection, Face Detection, Gesture Recognition, Face Landmark Detection

Demo

Demo Link

ℹ️  This app is not tested on mobile devices. Best to run on desktop browsers.

Todo

• add avatar using face landmarks
• add mobile compability

Screenshots

1. Object Detection

   

2. Face Detection

   

3. Gesture Recognition

   

4. Face Landmark Detection