Read Qrcode from a Web Page With Camera.

Read qrcode from a web page with camera.

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/

How can I scan a QR code from a webcam using ZXing in JS?

You can get the latest version of the library from a CDN:

<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>

With that, ZXing will be available in the web page, so you can use some code like this to scan from a webcam using the decodeFromVideoDevice method:

<video id="webcam-preview"></video>
<p id="result"></p>
<script>
  const codeReader = new ZXing.BrowserQRCodeReader();

  codeReader.decodeFromVideoDevice(null, 'webcam-preview', (result, err) => {
    if (result) {
      // properly decoded qr code
      console.log('Found QR code!', result)
      document.getElementById('result').textContent = result.text
    }

    if (err) {
      // As long as this error belongs into one of the following categories
      // the code reader is going to continue as excepted. Any other error
      // will stop the decoding loop.
      //
      // Excepted Exceptions:
      //
      //  - NotFoundException
      //  - ChecksumException
      //  - FormatException

      if (err instanceof ZXing.NotFoundException) {
        console.log('No QR code found.')
      }

      if (err instanceof ZXing.ChecksumException) {
        console.log('A code was found, but it\'s read value was not valid.')
      }

      if (err instanceof ZXing.FormatException) {
        console.log('A code was found, but it was in a invalid format.')
      }
    }
  })
</script>

This code will continuously scan the webcam video stream and try to idenitfy QR codes in it.

Use smartphone camera from a web app to scan QR code

Yes, yes it is possible:

How to create a QR code reader in a HTML5 website?

hope that helps.

There would be lots of libraries and examples out on the internet. I would suggest googling it and checking out some open source projects.

How to read QR code using iPad camera on website?

You need to have a look at the Stream API. There are some demos at the bottom of Eric Bidelman's blog post.

How to read a QR code directly from a mobile camera using ZXing [ASP.Net WebForm]

I ended up enabling WebRTC javascript plugin to enable a panel that uses the camera on the phone. (This tutorial https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos#Using_specific_devices)

And then used this example to enable the back camera since the first section only allowed the front-facing camera to be used. (https://webrtc.github.io/samples/src/content/devices/input-output/)

This gave me the desired outcome needed with the image capturing.

I then used ZXing to create the QR needed and then also to read the image that's being captured by the WebRTC camera.

I also remembered that the cameras where displaying a blank screen when I'd try and run the website on my mobile, that turned out to be since the website didn't have the SSL ceritificate verified meaning that the site was still a HTTP rather than a HTTPS which for some reason allows the mobile from accessing the camera feature. (https://www.pluralsight.com/guides/visual-studio-2017-resolving-ssl-tls-connections-problems-with-iis-express)

jQuery - How to read QR Codes with web cam?

This cannot be done using native HTML (yet?).
You could either use Flash\Silverlight to capture the web-cam output, each of them has qr code libraries (.Net, Flash)

---

Related Topics