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.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
Binay
  • 703
  • 1
  • 7
  • 7
  • Just see this repo as an example of backend and frontend based on python3 flask https://github.com/4xy/qr4u. – 4xy Sep 04 '17 at 21:59

4 Answers4

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.

Terence Eden
  • 14,034
  • 3
  • 48
  • 89
  • 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 08 '12 at 17:41
  • this webqr demo is not working – Lonare Jan 10 '19 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 https://github.com/LazarSoft/jsqrcode – Terence Eden Jan 10 '19 at 20:32
  • 1
    I wonder why no one has proposed using WASM?.. Here's an example project I have just published: https://github.com/maslick/koder – maslick Apr 08 '21 at 07: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.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
prespic
  • 1,635
  • 1
  • 17
  • 20
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.

reicek
  • 86
  • 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. – Yevgeny Simkin Dec 11 '14 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 – deweydb Aug 17 '16 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 – deweydb Aug 17 '16 at 21:06
  • Works on Android devices but can't make it work on iOS (iPhone 10x) – Jonny Apr 10 '19 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.

Burgi
  • 1,385
  • 9
  • 13
  • 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 08 '12 at 17:42