Browser-ready QR Code decoder in Javascript

Using Lazar Laszlo's port of ZXing Java library, QCodeDecoder brings to the web a great interface for dealing with QRCode decoding, being usable both on desktops and mobile phones.


Installing the lib is super damn easy. There are two ways of doing it: downloading the zip and including in your page or fetching it using Bower, the package manager for the frontend and then including from bower components.

As i really belive in the power of organizing the codebase with package managers, i recomend using bower and, then, doing the following after having Bower installed:

$ bower install -s qcode-decoder

Then, inside your .html file, add the following line before your scripts:

<script src="PATH/dist/qcode-decoder.min.js"></script>

Thats it. Don't forget to contribute to the project! Go fork it on Github.


QCodeDecoder keeps everything simple, trying to do well only a few things.

There are mainly three things to do with the library: decode a qr-code directly from camera (i.e, the phone's front/back camera, your webcam or whatever), from a video or from an image.

In the following samples the QRCodes contains a local IP Addres.


The simplest case is decoding from an image. It only requires passing to the decodeFromImage method the image's source or an image element that has a src attribute set.


Just like decoding from camera, a video can also contain a QRCode in it. Although not the common case, it is also exposed as it is a part of the Camera code.


Decoding from camera requires, firstly, access to the user's camera. For getting this, QCodeDecoder will ask the user about it (this process is required so that browsers are able to keep it secure) and, if conceived, start searching for a valid QRCode to decode.


For more documentation (there is also a multiple-source selector, for example), check the README.md file at the github repository :)