Welcome folks today in this blog post we will be building a qrcode and barcode scanner using webcam and image file in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<html>
  <head>
    <title>Html-Qrcode Demo</title>
  <body>
    <div id="qr-reader" style="width:500px"></div>
    <div id="qr-reader-results"></div>
  </body>
  <script src="library.js"></script>
  <script>
    function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
} 

docReady(function() {
    var resultContainer = document.getElementById('qr-reader-results');
    var lastResult, countResults = 0;
    
    var html5QrcodeScanner = new Html5QrcodeScanner(
        "qr-reader", { fps: 10, qrbox: 250 });
    
    function onScanSuccess(decodedText, decodedResult) {
        if (decodedText !== lastResult) {
            ++countResults;
            lastResult = decodedText;
            console.log(`Scan result = ${decodedText}`, decodedResult);
 
            resultContainer.innerHTML += `<div>[${countResults}] - ${decodedText}</div>`;
            
            // Optional: To close the QR code scannign after the result is found
            html5QrcodeScanner.clear();
        }
    }
    
    // Optional callback for error, can be ignored.
    function onScanError(qrCodeError) {
        // This callback would be called in case of qr code scan error or setup error.
        // You can avoid this callback completely, as it can be very verbose in nature.
    }
    
    html5QrcodeScanner.render(onScanSuccess, onScanError);
});
  </script>
  </head>
</html>

<html>

<head>

<title>Html-Qrcode Demo</title>

<body>

</body>

function docReady(fn) {

// see if DOM is already available

if (document.readyState === "complete" || document.readyState === "interactive") {

// call on next available tick

setTimeout(fn, 1);

} else {

document.addEventListener("DOMContentLoaded", fn);

}

docReady(function() {

var resultContainer = document.getElementById('qr-reader-results');

var lastResult, countResults = 0;

var html5QrcodeScanner = new Html5QrcodeScanner(

"qr-reader", { fps: 10, qrbox: 250 });

function onScanSuccess(decodedText, decodedResult) {

if (decodedText !== lastResult) {

++countResults;

lastResult = decodedText;

console.log(`Scan result = ${decodedText}`, decodedResult);

resultContainer.innerHTML += `<div>[${countResults}] - ${decodedText}</div>`;

// Optional: To close the QR code scannign after the result is found

html5QrcodeScanner.clear();

}

// Optional callback for error, can be ignored.

function onScanError(qrCodeError) {

// This callback would be called in case of qr code scan error or setup error.

// You can avoid this callback completely, as it can be very verbose in nature.

}

html5QrcodeScanner.render(onScanSuccess, onScanError);

});

</script>

</head>

</html>

As you can see in the above html we are having the section where we will be displaying the result of the qrcode and barcode . And also we will allow the user to enable the webcam and then scan the qrcode and barcode.

And now guys you need to include the library file which is needed for this application as shown below. Now make a library.js file inside the root directory and copy paste the following code

After that when you open the index.html file inside the browser you will see the below result. For this you will require the library.js file which is part of this application. The directory structure is shown below of the app

BUY THE FULL SOURCE OF APPLICATION