JavaScript QR Code Reader - can it be done? Or, Remote Service?

Question

I'm doing a bit of preliminary research on an upcoming project and I have a quick question that I figure I'll throw up here while I look elsewhere, in case anyone has any experience with this.

The question is simple: is it possible to read a QR code using JavaScript? Is there a remote service to which I can pass a bitmap object from a camera and do it that way? Are there currently any libraries that allow this?

The project is going to be deployed to various mobile devices and we'd like to try to use Appcelerator to make it work. I know Appcelerator does expose the Camera API on its host devices, but whatever we do with it has to be able to parse QR codes. Is this something that can be done?

Thanks in advance! myk

Solution 1

I bet it's possible, but it would be a challenge. Someone's written an AS3 library for reading QR codes. I'd start by reading up on image manipulation in Canvas.

If you go down the remote API route, Kaywa have an API you may be able to use.

Solution 2

There's a javascript library already, however the comments are mostly in Japanese and there's no documentation.

Solution 3

You can use the getUserMedia API to get video from the webcam and you could put it into a canvas element and use the canvas to read the pixels and decode a QR code.

I don't know of a library to decode QR codes but here is one library that can do bar codes.

Solution 4

Because of memory limits for JavaScript on mobile devices, it's likely to take too long for practical use, if it is possible with purely JS.

I don't know exactly how the Appcelerator API works with external native libraries, but your best bet is to pass the image data to the native code (Objective-C or Java) and then use a lower-level library (like iphone-qrcode) to parse the QR code, then pass the result back to the JS execution context.

This has the added advantage of working offline, which a remote service could not do.

View more solutions

Comments

[Myk]

My understanding is that Appcelerator is sandboxed - no access to lower-level native functionality. So I'm thinking a remote service call is the way to go, but oddly I haven't found one. Might have to roll my own.

[obeenham]

looking at the docs, you should be able to extend appcelerator with extra native functionality: developer.appcelerator.com/doc/mobile/iphone/module_sdk

[Myk]

Cool, that points me in a few solid directions. I think I'm going to move away from the remote service plan; porting AS3 to JS sounds like it might make the most sense. Answer accepted unless something better comes along, in which case I'll shamelessly revoke my acceptance. ;)

[dave1010]

Thanks! Make sure the mobiles you're targeting support Canvas. I think iPhone and Android do.