Building a QR code reader with JavaScript and HTML5

This tutorial help to read QR code scanner using jQuery html5. We will provide a js script to read QR code using a mobile or webcam. We will use the Instascan js plugin for QR code scan.

What is QR Code:

QR (Quick Response) codes have become increasingly popular due to their ability to store a large amount of information in a small square. They are widely used for various purposes, including advertising, payment systems, and information sharing.

Create JavaScript QR Codes

In this article, we will explore how to create a QR code scanner using JavaScript and HTML5, Allowing you to decode QR codes and extract their data effortlessly.

The Instascan JS is an open-source real-time webcam-based HTML5 QR code scanner. This lib will find the camera in your device and read the barcode using that device.

Let’s start to create a JavaScript app that’ll read QR codes using html5.

Step 1: Let’s create a index.html file that will have all the source code.

Step 2: Included all libs in the head section of the index.html file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>

Step 3: Created a video tag into the body of the index.html file.

<video id="preview" autoplay></video>

Added a video element where we’ll display the camera stream.

Step 4: Let’s add JavaScript to the footer of the index.html file.

<script type="text/javascript">
  const video = document.getElementById('video');
  let scanner = new Instascan.Scanner({ video: video});
  scanner.addListener('scan', function (content) {
	alert(content);
  });
  Instascan.Camera.getCameras().then(function (cameras) {
	if (cameras.length > 0) {
	  scanner.start(cameras[0]);
          scanner.addListener('scan', function(content) {
               alert('QR code scanned! Content: ' + content);
               // You can perform additional actions with the scanned content here
          });
	} else {
	  console.error('No cameras found on this device.');
	}
  }).catch(function(e) {
      alert('Error accessing camera: ' + e);
  });
</script>

In the code above, We start by accessing the video element from the HTML file. We then create a new instance of the Instascan.Scanner object, passing the video element as a parameter. This object will handle the scanning process for us.

Next, we use the Instascan.Camera.getCameras() method to retrieve the available cameras on the device.

If cameras are found, we start the scanning process using the first camera found. When a QR code is scanned, the scan event is triggered, and we display an alert with the scanned content.

Conclusion:

In this article, we have learned how to create a simple QR code scanner using JavaScript and HTML5. We can quickly access the user’s camera, decode QR codes, and retrieve their data by making use of the Instascan library. It now becomes possible to incorporate a variety of QR code scanning features into your online apps.