📸 Build a Voice-Controlled Selfie App using HTML, JS, and Tailwind CSS – No Backend Needed!

Live Demo: 👉 Try the app here

---

Table of Contents

Toggle

🚀 What We Built

Have you ever wanted to take a selfie with just your voice — no clicks, no buttons?
Introducing “Take My Selfie”, a fun voice-activated selfie web app using:

• 🔊 Web Speech API for voice recognition
• 📷 WebcamJS for accessing the webcam
• 🎨 Tailwind CSS v4 for a sleek, modern UI

No backend, no database — just pure frontend magic!

---

🛠️ Features

✅ Voice command "take my selfie" triggers camera
✅ Countdown + speech feedback
✅ Snapshot taken via webcam
✅ Auto-downloads your selfie
✅ Mobile responsive design using Tailwind CSS
✅ Runs 100% on the browser (client-side only)

---

✨ Screenshots

---

🧠 Technologies Used

Tool	Purpose
HTML/CSS	Structure & basic styling
JavaScript	Speech, camera, automation logic
WebcamJS	Easy webcam access in browser
Tailwind CSS v4	Modern, responsive UI
Git + GitHub	Version control & deployment

---

📄 How It Works – Explained Simply

1. User clicks “Start Listening”
2. App uses SpeechRecognition to listen for "take my selfie"
3. When detected, a voice says: “Taking your selfie in 3 seconds…”
4. The webcam activates and captures the image
5. The selfie is shown in the UI and automatically downloaded

---

👨‍💻 Code Overview

main code files:

• index.html: structure, webcam preview, result view
• main.js: voice logic, selfie logic, download logic

---

🌐 Live Demo (Try It Now!)

👉 Click here to try the app
Make sure to:

• Allow microphone and camera permissions
• Say clearly: "take my selfie"

It works on most modern browsers (Chrome, Edge, Brave).
🚫 Not supported on iOS Safari yet due to Web Speech limitations.

---

💡 Final Thoughts

This was a fun little experiment to mix voice, webcam, and UI — all without any backend setup. You can use this to:

• Learn Web APIs like SpeechRecognition
• Play with Tailwind UI
• Build something cool for your portfolio
• Add a voice assistant to fun side projects

👉 Follow me on X

---

📥 Want the Full Source Code?

Drop a comment or DM me — I’d be happy to share it!