Read qrcode from a web page with camera.

Instascan (https://github.com/schmich/instascan) has recently been published and solve many of the drawbacks of Lazarsoft's and the callback solution by @maraca. It uses HTML5 for camera and can be deployed off-line.


I have once worked with Lazarsoft's jsqrcode

It worked fine in the browser, and I know he made a demo to test on a phone with camera.

Here is his repository: https://github.com/LazarSoft/jsqrcode

For camera support: use the CamCanvas API: http://www.taboca.com/p/camcanvas/


You can read QR Codes using instascan.

Copy instascan.min.js from the releases page and load with:

<script type="text/javascript" src="instascan.min.js"></script>

Sample code to read QR Code.

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Reader using Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(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>

Tags:

Javascript

Camera

Qr Code

Recent Posts