Read qrcode from a web page with camera.

Question

Im looking for a solution to read a QRCode on a webpage.

Lets say I've generated with PHP and some library (zxing or something else) a QRCode and its printed on a piece of paper, ok?

What i would like to do now, is to read it back with tablet/smartphone throught a web-page. I browse to that page, it asks me to aim the QRCode with the camera, and then the scanned content is sent back to the page that decodes it.

There's something out there to handle this without the need to use an Android/iOS app? It could be another type of 2D barcode aswell, not exclusively a QRCode.

TY

https://www.npmjs.com/package/@altack/quar – WSD May 18 '21 at 07:47 — WSD, May 18 '21 at 07:47

score 8 · Accepted Answer · answered Jul 15 '13 at 10:31

8

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/

answered Jul 15 '13 at 10:31

edi9999

19,701
13
88
127

Thanks edi, ill give a look at your links. – Sclerato Jul 15 '13 at 19:19
I'm trying the jsqrcode test.html, i can see the web cam preview but it's not capturing the qr code, any idea? – Sam Apr 24 '14 at 05:29

score 6 · Answer 2 · edited Jun 03 '19 at 12:51

6

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>

edited Jun 03 '19 at 12:51

krivar

342
1
3
16

answered Jul 04 '18 at 05:19

Codemaker2015

12,190
6
97
81

1

I am getting error in console: `Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.`. What's the problem? – goldsky Dec 26 '18 at 10:18
2

ok, turned out, the javascript file in the official release (1.0.0) has bug. This link is preferable `https://rawgit.com/schmich/instascan-builds/master/instascan.min.js` – goldsky Dec 26 '18 at 11:02
its turning on my MOBILE front camera i want to open back camera is that any option? – M Amir Shahzad Dec 03 '19 at 19:37
@MAmirShahzad I have the same issue. I believe it's because the docs say that iOS is not supported and I was using iPhone/Safari. If I pressed front or back, only the front camera showed. – Ollie Feb 12 '23 at 16:06

score 1 · Answer 3 · answered Jul 18 '17 at 17:52

1

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.

answered Jul 18 '17 at 17:52

Oren Pinsky

419
3
19

3

But instascan doesnt work well with android webview, hope this help someone, might considering https://nimiq.github.io/qr-scanner/demo/ or https://github.com/cozmo/jsQR – Akbar Noto Jun 18 '19 at 17:41

Read qrcode from a web page with camera.

3 Answers3

Linked