QR Vision
A FastAPI, OpenCV, and Next.js based QR code generation and detection system. Generate QR codes, decode uploaded images, and test different computer vision detection methods.
Generate QR Code
Create QR codes from text, links, or WiFi data.
Generated QR code preview will appear here.
Decode QR Code
Upload, drag and drop a QR image, then inspect the decoded response.
Uploaded QR image preview will appear here.
Webcam QR Scanner
Scan QR codes directly from your device camera in real time.
Camera is off
Click Start Scanner to enable webcam scanning.
Live Scan Result
Start the scanner and place a QR code inside the camera frame. The decoded text will appear here.
Camera scanning works on localhost during development and on HTTPS after deployment. Some browsers may ask for camera permission before listing available cameras.
Learning Section
QR Code Theory
QR Vision is not only a scanner or generator. It also demonstrates the theory behind QR code structure, image processing, and decoding.
QR Code Structure
A QR code stores data inside a two-dimensional grid of black and white modules.
Finder Patterns
The three large square patterns help scanners detect position, scale, and orientation.
Binary Data Encoding
Text or URLs are converted into binary data and placed inside the QR matrix.
Error Correction
QR codes include error correction so damaged or partially unclear codes may still be decoded.
Image Detection
Computer vision techniques locate QR regions from uploaded images using OpenCV-based logic.
Preprocessing
Grayscale conversion, thresholding, and noise reduction can improve decoding accuracy.
Backend API
Live API Documentation
The FastAPI backend is deployed on Render and exposes QR generation and decoding endpoints for the frontend.
NEXT_PUBLIC_API_BASE_URL=https://qr-vision-ss-api.onrender.comUse this environment variable in Vercel so the frontend can connect to the deployed FastAPI backend.
Available Endpoints
/
Check API running status
/generate-qr
Generate QR code from text or URL
/decode-qr
Decode uploaded QR image using basic method
/decode-qr-preprocess
Decode uploaded QR image after preprocessing
/decode-qr-math
Decode uploaded QR image using math/computer vision detection
| Method | Endpoint | Purpose |
|---|---|---|
| GET | / | Check API running status |
| POST | /generate-qr | Generate QR code from text or URL |
| POST | /decode-qr | Decode uploaded QR image using basic method |
| POST | /decode-qr-preprocess | Decode uploaded QR image after preprocessing |
| POST | /decode-qr-math | Decode uploaded QR image using math/computer vision detection |
About Project
QR Vision SS
QR Vision SS is an academic and portfolio-based full-stack computer vision project that combines QR code technology, digital image processing, FastAPI backend development, OpenCV experiments, live webcam QR scanning, and modern Next.js frontend design.
Developer
Sajjad Hossain Soykot
B.Sc. Engineering in ICT · Islamic University, Bangladesh
View GitHub ProfileI am a B.Sc. Engineering student in Information and Communication Technology at Islamic University, Bangladesh. I am interested in programming, full-stack development, UI/UX design, web development, research, and building academic technology projects.
QR Vision SS was created to transform digital image processing and QR code concepts into an interactive full-stack web platform. Through this project, I explored how to connect a FastAPI backend with a modern Next.js frontend and how to present QR generation, QR decoding, image upload, API response handling, and webcam scanning in a clean user interface.
Academic Background
This project is inspired by ICT-4104 Digital Signal and Image Processing Laboratory concepts. It converts QR code generation, image upload, image preprocessing, QR detection, and OpenCV-based processing ideas into a deployed web application.
Project Purpose
The main purpose of this project is to help students, developers, and learners understand how QR codes can be generated, uploaded, detected, decoded, scanned through a webcam, and connected with a full-stack API-based platform.
Learning Goal
Besides QR and image processing, this project is also a practical learning journey for FastAPI routing, backend response handling, Next.js App Router, reusable frontend components, REST API integration, deployment, and responsive UI design.
QR Generation
Users can generate QR codes from text or URLs, preview the generated QR image, and download it directly from the frontend.
Image Upload Decode
Users can upload or drag-and-drop QR images and decode them using backend API endpoints connected with FastAPI and OpenCV.
Live Webcam Scanner
The current version includes a working webcam scanner that can scan QR codes directly from the browser camera in real time.
Multiple Decode Methods
The project supports basic decode, preprocessing-based decode, and mathematical/computer vision based QR detection methods.
Deployed Backend API
The backend API is deployed on Render and provides live endpoints for QR generation, image upload, QR decoding, and API documentation.
Responsive Frontend
The frontend is deployed on Vercel and designed with a clean responsive layout for desktop and mobile browser usage.
Core Features
QR generation, QR image upload, drag-and-drop upload, uploaded QR preview, live webcam scanner, multiple decode methods, decoded answer display, API response preview, warning/error states, and theme toggling.
Backend Implementation
The backend is built with Python, FastAPI, Uvicorn, OpenCV, Pillow, NumPy, qrcode, and python-multipart. It exposes API endpoints for QR generation and multiple QR decoding methods.
Frontend Implementation
The frontend is built with Next.js, React, TypeScript, Tailwind CSS, CSS variables, Lucide icons, React Icons, reusable components, responsive layout, sticky navbar, and webcam scanning support.
Deployment Status
Frontend and backend are both deployed and connected.
Tech Stack
Disclaimer
QR Vision SS is created for academic learning, digital image processing practice, QR code technology demonstration, computer vision experimentation, and full-stack project development practice. It is not intended for high-security QR verification, banking authentication, payment validation, banking login verification, or production-level identity verification systems.