🎭📸 MoodCam – Emotion-Based Photobooth

💡 Inspiration

MoodCam was inspired by photobooths and modern Snapchat-style camera applications. The goal was to explore how a simple photo capture experience can be transformed into an emotionally aware, cinematic interaction.

Instead of just taking a selfie, MoodCam attempts to create a story-like experience by detecting user emotions and dynamically adapting visuals and audio to match the mood.

---

🛠️ How I Built It

MoodCam is a web-based prototype built using JavaScript and browser-native APIs.

🔧 Tech Stack

• HTML, CSS, JavaScript (Frontend)
• Webcam access via getUserMedia()
• Canvas API for image capture and processing
• Audio playback using HTML5 Audio API
• Basic emotion classification logic (prototype-level)

📸 System Workflow

1. The application accesses the user's webcam using browser media APIs.
2. The user captures a photo through a Snapchat-style interface.
3. The system analyzes facial input and assigns a mood category:
   • Happy 😄
   • Sad 😢
   • Angry 😠
   • Neutral 😐
   • Tired 😴
4. Based on the detected mood:
   • A mood-matching background audio track is played
5. The final image is displayed with options to download or retake and emojis.

---

🧠 What I Learned

This project helped me understand several important concepts:

• Working with browser media APIs (getUserMedia, Canvas rendering)
• Structuring a simple AI-like pipeline (input → processing → output)
• Handling audio playback restrictions in browsers
• Designing interaction-based user experiences instead of static interfaces
• The importance of UX simplicity in early-stage prototypes

---

⚡ Challenges Faced

🎧 Browser Audio Restrictions

Modern browsers block autoplay audio, requiring user interaction before playback. This was solved by triggering audio only after the capture event.

🎭 Emotion Detection Limitations

Accurate facial emotion recognition is complex, so the system uses a simplified classification approach for demonstration purposes.

🎨 UI Limitations

The current UI is minimal and functional. The focus was placed on core interaction logic rather than visual polish.

📦 Audio Copyright Constraints

Real OSTs could not be used due to copyright restrictions, so royalty-free or placeholder audio assets were used instead.

---

🚀 Future Improvements

• Implement real-time emotion detection using advanced ML models
• Upgrade UI to a Snapchat-like immersive camera interface
• Replace static filters with dynamic video-based effects
• Add cinematic “scene modes” (e.g., romantic, dramatic confession scenes)
• Improve audio transitions for a more film-like experience

---

🧩 Conclusion

MoodCam demonstrates how emotion-aware computing can enhance simple user interactions like taking a photo. By combining computer vision, visual effects, and audio feedback, the project turns a basic camera tool into a lightweight storytelling experience.

The current version is a prototype, but it establishes a foundation for more immersive, AI-driven media applications.

Built With

• css
• face-api.js
• html5
• javascript
• react
• supabase
• tensorflow.js
• typescript