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

JavascriptHtmlQr Code

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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 - Javascript

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.

Solution 4 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBinayView Question on Stackoverflow
Solution 1 - JavascriptTerence EdenView Answer on Stackoverflow
Solution 2 - JavascriptprespicView Answer on Stackoverflow
Solution 3 - JavascriptreicekView Answer on Stackoverflow
Solution 4 - JavascriptBurgiView Answer on Stackoverflow