JavaScript QR Code Scanner

A simple, lightweight QR code scanner built with HTML, CSS, and vanilla JavaScript. Scan QR codes directly from your device camera or by uploading an image — all in the browser, with no backend, database, or heavy frameworks.

The project uses the tiny, dependency-free jsQR library for decoding, keeping the footprint minimal and the code easy to read and modify.

---

Features

• 📷 Camera scanning — decode QR codes in real time using the device camera (rear camera preferred on mobile).
• 🖼️ Image upload — scan a QR code from an existing image file.
• 📋 Copy result — copy the decoded text to the clipboard with one click.
• 🔄 Scan again — quickly reset and start a new scan.
• 📱 Responsive design — works cleanly on desktop and mobile.
• 🎨 Clean, modern interface — dark, minimal UI.
• 🪶 Minimal dependencies — a single lightweight decoding library, no build step.
• 🚫 No backend — everything runs client-side in the browser.

---

How It Works

1. When you start the camera, the app requests access via the browser's getUserMedia API and streams video into a hidden <video> element.
2. On each animation frame, the current video frame is drawn onto a <canvas>.
3. The canvas pixel data is passed to jsQR, which attempts to locate and decode a QR code.
4. When a code is found, scanning stops and the decoded text is displayed.
5. For uploaded images, the same canvas + jsQR decoding pipeline is used on a single static frame.

Because all decoding happens locally in the browser, no data ever leaves your device.

---

Installation

No build tools or package managers are required.

# Clone the repository
git clone https://github.com/shehzadbaqir/javascript-qr-code-scanner.git

# Move into the project folder
cd javascript-qr-code-scanner

Then open the project in a browser. Because camera access requires a secure context, use one of the following:

• Open index.html directly (image upload works from file://, but camera access requires https:// or localhost).
• Or serve it locally, for example:

# Python 3
python -m http.server 8000

# Node.js (with the "serve" package)
npx serve

Then visit http://localhost:8000.

---

Usage

1. Open the app in your browser.
2. Click Start Camera and grant camera permission, then point your camera at a QR code.
   • or click Upload Image and choose an image that contains a QR code.
3. When a code is detected, the decoded result appears in the Result box.
4. Click Copy Result to copy the text, or Scan Again to start over.

---

Try an Online QR Code Scanner

If you don't want to install or host the project yourself, you can use QRScanner.org to scan QR codes directly from your browser using your camera or an uploaded image.

---

Browser Compatibility

Browser	Camera Scan	Image Upload
Chrome	✅	✅
Edge	✅	✅
Firefox	✅	✅
Safari (14+)	✅	✅
Mobile browsers	✅	✅

Note: Camera access requires a secure context (https:// or localhost). Image upload works everywhere, including from the local file:// protocol.

---

Project Structure

javascript-qr-code-scanner/
├── index.html    # Markup and layout
├── style.css     # Styling and responsive design
├── script.js     # Scanning logic (camera + image decoding)
├── README.md     # Project documentation
└── LICENSE       # MIT license

---

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request to improve features, fix bugs, or enhance the design.

---

License

This project is licensed under the MIT License — you are free to use, modify, and distribute it.

---

Website: https://www.qrscanner.org/