Real-time AI camera that detects your hand gestures & facial expressions — then responds with the perfectly matched cat meme.
No installs. No backend. No server.
Just open your browser, show a gesture, and let the cats judge you. 🐾
- About the Project
- Key Features
- Live Demo
- How It Works
- Gesture & Expression Map
- Custom Gesture Heuristics
- Tech Stack
- Project Structure
- Getting Started
- Contributing
- Author
MeowCam is a fully browser-based AI experience — no app download, no server, no configuration. It uses Google MediaPipe to run real-time computer vision directly in your browser, detecting your hand gestures and facial expressions through your webcam and instantly matching them to the most fitting cat meme.
Whether you flash a thumbs up, pull a peace sign, or just smile at the camera — a cat has something to say about it.
Why I built this:
- Explore real-world MediaPipe integration in a fun, engaging way
- Demonstrate that complex AI pipelines can run entirely client-side
- Because the internet always needs more cat memes 🐱
- On-Device ML Inference: Hand skeleton and facial landmark detection running fully in the browser via WebAssembly (WASM).
- Temporal Gesture Smoothing: Built-in sliding window queue filtering to eliminate coordinate noise and screen flickering.
- Victory (Peace Sign) Classifier: Advanced geometric distance checks classifying double-finger spreads.
- 📸 Save Collage: Capture your webcam frame overlaid with your hand skeleton tracking lines and your matching cat meme in a single consolidated image download.
Steps to use:
- Open the link in any modern browser (Chrome recommended)
- Click Allow when asked for webcam permission
- Wait 2–3 seconds for the AI models to load
- Strike a gesture or expression from the table below
- Watch your matching cat meme appear instantly 🐾
- Click Save Collage to capture and download your pose with the cat!
┌─────────────────────────────────────────────────────────────┐
│ MeowCam Pipeline │
│ │
│ 📷 Webcam Feed │
│ │ │
│ ▼ │
│ 🧠 MediaPipe Vision Models (runs in browser via WASM) │
│ │ │
│ ├──► Hand Landmark Detection │
│ │ └──► Gesture Classification │
│ │ │
│ └──► Face Landmark Detection │
│ └──► Expression Classification │
│ │
│ ▼ │
│ 🗂️ memes.js (gesture → meme URL mapping) │
│ │ │
│ ▼ │
│ 🐱 Matching Cat Meme displayed in real-time │
└─────────────────────────────────────────────────────────────┘
All processing happens 100% on-device in the browser. No image or video data is ever sent to a server.
| Input Trigger | Gesture | Cat Meme Response |
|---|---|---|
| 👍 Thumbs Up | Raise thumb upward | Crying thumbs-up cat |
| ✊ Fist | Closed fist | Fist bump cat GIF |
| 👌 OK Sign | Thumb & index finger circle | OK approval cat |
| 🙏 Namaste | Both palms pressed together | Peaceful Namaste cat |
| 🤫 Shh | Index finger to lips | "Quiet" shut up cat |
| ✌️ Peace | Two fingers raised | Peace & love cat |
| 😊 Smile | Natural smile at camera | Happy smiling kitten |
| 😛 Tongue Out | Stick tongue out | Silly derp cat |
Tip: Hold each gesture steady for 1–2 seconds for the best detection accuracy.
To avoid the performance costs of heavy deep learning classification networks running in-browser, this project utilizes custom mathematical heuristics calculated from the 21 hand landmarks:
-
Wrist-to-MCP Scaling: To ensure distance thresholds remain scale-invariant (working the same whether your hand is close to the lens or far away), all distance offsets are dynamically scaled relative to the wrist-to-middle-knuckle distance:
$$\text{Scale} = \text{Distance}(\text{Wrist}_0, \text{Middle Knuckle}_9)$$ - Victory (Peace) Spread Check: The classification verifies that the Index and Middle fingers are straight, the Ring and Pinky fingers are curled, and the tip separation exceeds a minimum coordinate ratio: $$\text{Distance}(\text{Index Tip}8, \text{Middle Tip}{12}) > 0.25 \times \text{Scale}$$
| Technology | Role | Why |
|---|---|---|
| MediaPipe Tasks Vision | AI hand & face landmark detection | Runs fully in-browser via WebAssembly — zero latency, zero server |
| HTML5 | Structure & webcam integration | Native getUserMedia API for webcam access |
| Vanilla CSS | Responsive UI & styling | No framework needed — clean, fast, and structured |
| JavaScript (ES6+) | Real-time gesture logic & meme mapping | Lightweight, no build step required |
No React. No Node. No dependencies to install.
This entire app ships as 5 static files.
cat-meme-cam/
│
├── index.html # App shell, webcam canvas, UI layout
├── style.css # Styling, animations, responsive design
├── script.js # MediaPipe integration, gesture detection logic
├── memes.js # Gesture-to-meme URL mapping object
└── README.md # You are here
Just visit https://pratikshya32.github.io/cat-meme-cam/ — nothing to install.
# 1. Clone the repository
git clone https://github.com/Pratikshya32/cat-meme-cam.git
# 2. Navigate into the folder
cd cat-meme-cam
# 3. Serve locally (webcam requires a local server, not file://)
npx serve .
# OR
python -m http.server 8000Then open http://localhost:8000 (or the port shown) in your browser.
⚠️ Important: Webcam access requires eitherlocalhostor anhttps://URL. Openingindex.htmldirectly viafile://will NOT work.
| Browser | Support |
|---|---|
| Chrome 88+ | ✅ Full Support |
| Edge 88+ | ✅ Full Support |
| Firefox | |
| Safari | |
| Mobile Chrome | ✅ Works on Android |
Contributions, ideas, and cat meme suggestions are always welcome!
# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/add-new-gesture
# 3. Add your changes
# 4. Commit with a clear message
git commit -m "feat: add surprised face expression mapping"
# 5. Push and open a Pull Request
git push origin feature/add-new-gesturePratikshya Sahoo
If MeowCam made you smile, drop a ⭐ on the repo — it helps a lot!
Made with 💜 and a lot of cat memes · © 2026 Pratikshya Sahoo