A modern QR Code Scanner built with React that uses your device's camera to detect and decode QR codes in real time.
It features a sleek UI, live webcam preview, automatic link detection, and toast notifications.
- 🎥 Live Camera Preview (uses the back camera if available)
- 🔍 QR Code Detection powered by
jsQR - 📋 Copy to Clipboard functionality
- 🌐 Auto-open links when QR content is a URL
- 🔔 Toast Notifications using
react-toastify - 🎨 Modern UI built with Tailwind CSS
| Technology | Purpose |
|---|---|
| React | Frontend framework |
| jsQR | QR decoding logic |
| react-webcam | Access device camera |
| react-toastify | Toast notifications |
| Tailwind CSS | Styling and layout |
npm installor
yarn installnpm run devQrScanner.jsx
Handles camera feed and QR detection
Uses jsQR to decode images
Displays decoded data
Includes Copy, Go to Link, and Rescan buttons
WebcamCapture.jsx
Manages the webcam view using react-webcam
Captures images every 700ms while scanning is active
The UI shows a live camera feed with an animated green scanning frame, decoded QR text, and control buttons.
- Camera permissions must be granted by the user.
- Works only over HTTPS or localhost (browser security policy).
- Automatically selects the rear camera on mobile devices.
This project is licensed under the MIT License. You’re free to use, modify, and distribute it.
Developed by: Ulvi Aghazade 💻