In this tutorial I will show you how to easily create a cross-device QR code decoder using nothing but MoSync, HTML 5 and a couple of Javascript libraries.

I will assume you already have a blank MoSync project setup that you can work on.

Scroll to the bottom of this tutorial to download an example project.

Method

1) Download all the QR Decoder JS source files from here: https://github.com/LazarSoft/jsqrcode/tree/master/src

2) As per the instructions in the readme, include all of them in your index file (Android is case sensitive so make sure you check all the file paths carefully!

3) Download jQuery from here: http://jquery.com/download/ and include it into the head of your index.html file

4) Add the below javascript to your page. It contains the functions that open the MoSync camera, grab the photo that the user took, hand it to the qr decoder and display the result as an alert:

5) Now add the button code below to call out getImage function:

And voila! You should have a fully functioning MoSync QR code decoder using pure javascript :)

The full solution can be found on github by clicking here

If you are facing any difficulties, you can refer to the download at the above link to get all of the code in a package. Remember though, that the download contains files like the mosync debug script, which might now be outdated.

Thanks go to "The Web Spot" for the original code I then adapted to Mosync, and LazarSoft for their beautiful javascript QR code debugger plugin - we love you!!!