Skip to content

Commit 35554dd

Browse files
committed
created README.md
1 parent a3d4bee commit 35554dd

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
}

0 commit comments

Comments
 (0)