JQuery HTML5 QR Code Scanner using Instascan JS Example

By Hardik Savani | October 21, 2018 | | 84470 Viewer | Category : Javascript jQuery


Are you looking for qr code scanner script using jquery html5? If yes then i will defiantly help to create simple example for qr code or barcode reader using webcam or mobile camera. we will use instascan js plugin for qr code scan.

Instascan JS is a real-time webcam-driven HTML5 QR code scanner. Instascan JS wil help to find all camera attach with your system or mobile and you can read barcode using anyone that you want.

So, basically, you have to copy bellow html code and run in your system. Then i also attach qr code for demo. So let's see.

Index.html

Read Also: Jquery Ajax CRUD Operations in PHP
<!DOCTYPE html>
<html>
<head>
	<title>JQuery HTML5 QR Code Scanner using Instascan JS Example - ItSolutionStuff.com</title>
	<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>
</head>
<body>
  
    <h1>JQuery HTML5 QR Code Scanner using Instascan JS Example - ItSolutionStuff.com</h1>
    
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        alert(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
   
</body>
</html>

You can also check this qr code:

I hope it can help you....



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

Tags :

Instascan JS Javascript jQuery Jquery Plugin

Featured Post

We are Recommending you: