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

Question

I was looking for possibility to create QR code reader in my HTML5 based web page. I've done some googling and all the links point me to the mobile applications.

Please help me with some pointers as to how I can use HTML5 and JavaScript to read a QR code containing a url and then redirect the browser to that URL.

Solution 1

There aren't many JavaScript decoders.

There is one at http://www.webqr.com/index.html

The easiest way is to run ZXing or similar on your server. You can then POST the image and get the decoded result back in the response.

Solution 2

The jsqrcode library by Lazarsoft is now working perfectly using just HTML5, i.e. getUserMedia (WebRTC). You can find it on GitHub.

I also found a great fork which is much simplified. Just one file (plus jQuery) and one call of a method: see html5-qrcode on GitHub.

Solution 3

Reader they show at http://www.webqr.com/index.html works like a charm, but literaly, you need the one on the webpage, the github version it's really hard to make it work, however, it is possible. The best way to go is reverse-engineer the example shown at the webpage.

However, to edit and get the full potential out of it, it's not so easy. At some point I may post the stripped-down reverse-engineered QR reader, but in the meantime have some fun hacking the code.

Happy coding.

Comments

[Codebeat]

webqr: Does not work most of the time. Only getting it to work in Chrome and camera option does not work at all. It is buggy stuff, do not invest many time in it, you are wasting your time! It seems that it can only 'read' barcodes that are encoded with L error correction mode.

[Codebeat]

Does not work most of the time. Only getting it to work in Chrome and camera option does not work at all. It is buggy stuff, do not invest many time in it, you are wasting your time! It seems that it can only 'read' barcodes that are encoded with L error correction mode.

[Yevgeny Simkin]

any thoughts on where in the code I should go to look for the other camera? I need this to work on a handheld device and to use the camera that is on the opposite side from the display. Not having any luck with that, atm.

[lloydphillips]

It's just erroring for me. Anyone else having the same problem?

[Jos Faber]

Does not work iphone 5s safari or chrome. Both example and installed version give same errors

[deweydb]

@GeniaS. try using firefox for android instead of chrome for android, at the moment chrome for android does not support: facingMode. I suggest taking a look at line 164 of www.webqr.com/webqr.js

[deweydb]

As for August 2016, this is the only answer that currently works. I'm not sure why lazarus hasn't updated his github repo to reflect the demo on webqr.com

[Stephen R]

Maybe pertinent to getting it to work on iPhone: github.com/LazarSoft/jsqrcode/issues/75

[Lonare]

this webqr demo is not working

[Terence Eden]

Although this answer is 7 years old(!) I can confirm that the website still works. The source code for it is at github.com/LazarSoft/jsqrcode

[Jonny]

Works on Android devices but can't make it work on iOS (iPhone 10x)

[maslick]

I wonder why no one has proposed using WASM?.. Here's an example project I have just published: github.com/maslick/koder