Build HTML5 QRCode Scanner Using InstaScan.js Library in Browser Using Javascript Full Project For Beginners

 

 

index.html

 

 

<!DOCTYPE html>
<html>
<head>
	<title>JQuery HTML5 QR Code Scanner</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</h1>
    
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview'), mirror: false });
      scanner.addListener('scan', function (content) {
        alert(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
            cameras.forEach(element => {
                alert(element.name);
            });
          scanner.start(cameras[1]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
   
</body>
</html>

 

See also  Build a Book Search Web App Using Google Books API in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Leave a Reply