Skip to content

feat: add QR code scanner with file upload and camera support#174

Open
NaitikVerma6776 wants to merge 1 commit into
Mrinalray:mainfrom
NaitikVerma6776:feature/qr-code-scanner
Open

feat: add QR code scanner with file upload and camera support#174
NaitikVerma6776 wants to merge 1 commit into
Mrinalray:mainfrom
NaitikVerma6776:feature/qr-code-scanner

Conversation

@NaitikVerma6776

Copy link
Copy Markdown

✨ Feature: QR Code URL Scanner

Closes #127

What this PR does

Adds the ability for users to upload or scan QR codes and automatically extract and analyze the embedded URL using the existing Google Safe Browsing check.


Changes

index.html

  • Added QR scanner section inside .scanner-card between the example chips and the result div
  • Added jsQR library via CDN for client-side QR decoding

style.css

  • Added QR scanner styles using existing CSS variables (--card-border, --accent-cyan, --safe-bg, etc.)
  • Light mode and dark mode both supported automatically
  • Mobile responsive — buttons stack vertically under 680px

script.js

  • Added QR decode logic using jsQR
  • Wired extracted URL directly into existing checkSecurity() function

How it works

  1. User sees an "or scan a QR code" divider below the example chips
  2. They can upload an image (PNG, JPG, GIF, WebP) or drag and drop a QR code
  3. Or click "Use camera" to scan live using the device's rear camera
  4. The extracted URL auto-fills the input and appears in a decoded result box
  5. Clicking "Scan this URL" runs the existing Safe Browsing check — no backend changes needed

Edge cases handled

  • No QR code detected in image → friendly error message
  • Invalid file type → error shown
  • Camera permission denied → error with fallback suggestion
  • QR contains non-URL text → text shown but not auto-filled into input
  • jsQR CDN fails to load → error message instead of crash
  • Same file re-uploaded → works correctly (input reset after each use)

Testing done

  • Uploaded a QR image → URL extracted correctly
  • Drag and dropped a QR image → URL extracted correctly
  • Camera scan → QR detected and camera stopped automatically
  • "Scan this URL" → triggers Safe Browsing check
  • Light mode → QR section renders correctly
  • Mobile view → buttons stack and layout is clean
  • Invalid file upload → error shown
  • No QR in image → error shown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

QR Code Security Scanner

1 participant