File tree Expand file tree Collapse file tree 1 file changed +33
-0
lines changed
Javascript/Virtual Mirror Expand file tree Collapse file tree 1 file changed +33
-0
lines changed Original file line number Diff line number Diff line change 1+ # 🪞 Webcam Mirror — JavaScript Demo
2+
3+ A lightweight web app that uses your device’s ** webcam** and flips the video feed ** horizontally** , so it behaves just like a real mirror.
4+ Built with plain ** HTML** , ** CSS** , and ** JavaScript** — no frameworks required.
5+
6+ ---
7+
8+ ## 📸 Features
9+
10+ - 🔁 ** Real mirror effect** — flips the camera preview horizontally.
11+ - 🎥 ** Camera selection** — choose between multiple cameras (front/back on mobile).
12+ - 🖼️ ** Snapshot capture** — take photos that respect the mirror orientation.
13+ - 💾 ** Instant download** — download your mirrored photo as a ` .png ` file.
14+ - ⚙️ ** Toggle mirroring** — turn the mirror effect on or off anytime.
15+ - 🌗 ** Dark UI** — modern, clean, and responsive design.
16+
17+ ---
18+
19+ ## 🚀 Live Demo
20+
21+ You can run this app locally by opening the HTML file directly in a browser that supports ** ` getUserMedia() ` ** (most modern browsers).
22+
23+ ---
24+
25+ ## 🧠 How It Works
26+
27+ The app uses the ** WebRTC API** (` navigator.mediaDevices.getUserMedia ` ) to access your webcam stream and display it in a ` <video> ` element.
28+ CSS is used to flip the live preview horizontally using:
29+
30+ ``` css
31+ video {
32+ transform : scaleX (-1 );
33+ }
You can’t perform that action at this time.
0 commit comments