Create a QR Code Scanner or Reader in HTML CSS & JavaScript (original) (raw)

Last Updated : 10 Feb, 2026

Here , we will build a QR Code Scanner using HTML, CSS, and JavaScript. The application allows users to scan QR codes easily and view the decoded result instantly.

Scan QR codes by uploading an image file.
Scan QR codes using the system camera.
Display the decoded QR code text via an alert message.

Approach

Create a project folder with the project name and three files for HTML, CSS, and JavaScript.
Inside the HTML file, the structure of the website will be defined using HTML tags like div, input, heading, etc.
Now, use the CSS styling properties to make the page more attractive and good-looking.
Use JavaScript to implement the basic interaction operations like adding events, setting timeouts, etc.
After that, include the below CDN link to your HTML document to implement the **html5-qrcode library to scan the QR.

HTML5-qrcode library methods:

**Html5QrcodeScanner: Initializes the QR code scanner.
**render(): Renders the scanner within a specified HTML element.
**onScanSuccess(decodeText, decodeResult): A callback function triggered upon successful QR code scanning, displaying decoded text in an alert.
**fps: Sets the frames per second for video capture.
**qrbos: Sets the QR code detection boundary size.

**Example: This shows the implementation of the QR code scanner or Reader.

HTML `

QR Code Scanner / Reader

Scan QR Codes

CSS

/* style.css file*/ body { display: flex; justify-content: center; margin: 0; padding: 0; height: 100vh; box-sizing: border-box; text-align: center; background: rgb(128 0 0 / 66%); } .container { width: 100%; max-width: 500px; margin: 5px; }

.container h1 { color: #ffffff; }

.section { background-color: #ffffff; padding: 50px 30px; border: 1.5px solid #b2b2b2; border-radius: 0.25em; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25); }

#my-qr-reader { padding: 20px !important; border: 1.5px solid #b2b2b2 !important; border-radius: 8px; }

#my-qr-reader img[alt="Info icon"] { display: none; }

#my-qr-reader img[alt="Camera based scan"] { width: 100px !important; height: 100px !important; }

button { padding: 10px 20px; border: 1px solid #b2b2b2; outline: none; border-radius: 0.25em; color: white; font-size: 15px; cursor: pointer; margin-top: 15px; margin-bottom: 10px; background-color: #008000ad; transition: 0.3s background-color; }

button:hover { background-color: #008000; }

#html5-qrcode-anchor-scan-type-change { text-decoration: none !important; color: #1d9bf0; }

video { width: 100% !important; border: 1px solid #b2b2b2 !important; border-radius: 0.25em; }

JavaScript

// script.js file

function domReady(fn) { if ( document.readyState === "complete" || document.readyState === "interactive" ) { setTimeout(fn, 1000); } else { document.addEventListener("DOMContentLoaded", fn); } }

domReady(function () {

// If found you qr code
function onScanSuccess(decodeText, decodeResult) {
    alert("You Qr is : " + decodeText, decodeResult);
}

let htmlscanner = new Html5QrcodeScanner(
    "my-qr-reader",
    { fps: 10, qrbos: 250 }
);
htmlscanner.render(onScanSuccess);

});

**Output: