65

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.

1
  • Just see this repo as an example of backend and frontend based on python3 flask github.com/4xy/qr4u.
    – 4xy
    Sep 4, 2017 at 21:59

4 Answers 4

25

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.

4
  • 12
    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
    Dec 8, 2012 at 17:41
  • this webqr demo is not working
    – Lonare
    Jan 10, 2019 at 17:01
  • 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 Jan 10, 2019 at 20:32
  • 1
    I wonder why no one has proposed using WASM?.. Here's an example project I have just published: github.com/maslick/koder
    – maslick
    Apr 8, 2021 at 7:07
16

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.

3
  • 6
    It's just erroring for me. Anyone else having the same problem? Mar 2, 2015 at 0:51
  • 3
    Does not work iphone 5s safari or chrome. Both example and installed version give same errors
    – Jos
    Jun 3, 2015 at 19:44
  • 1
    Maybe pertinent to getting it to work on iPhone: github.com/LazarSoft/jsqrcode/issues/75
    – Stephen R
    Feb 26, 2018 at 17:17
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.

4
  • 1
    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. Dec 11, 2014 at 19:05
  • 1
    @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 Aug 17, 2016 at 21:05
  • 1
    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 Aug 17, 2016 at 21:06
  • Works on Android devices but can't make it work on iOS (iPhone 10x)
    – Jonny
    Apr 10, 2019 at 18:28
0

The algorithm that drives http://www.webqr.com is a JavaScript implementation of https://github.com/LazarSoft/jsqrcode. I haven't tried how reliable it is yet, but that's certainly the easier plug-and-play solution (client- or server-side) out of the two.

1
  • 7
    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
    Dec 8, 2012 at 17:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.