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

Genro

patrick-wied.at/static/qrgen – Deering

@StefanoCudini that site is using ZXing remote service, not pure js. – Everetteverette

A little late, but if you are looking for a reliable solution for android and ios only, then you can check this answer #17652517 – Pinetum

Answer 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.

Heidi

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. ;) – Genro

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

Answer 2

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

Aplanatic

Answer 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.

Gerkman

Answer 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.

Mixedup

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. – Genro

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

Answer 5

If you want a proof-of-concept, then here it is - a motion tracker written in pure Javascript.

However, support for it is not widespread right now. Only FF and the latest Webkit builds support it afaik.

Just noticed that you wanted this for a mobile device. Then absolutely go with a remote service. It will be really taxing even on the most high end devices assuming they even support it, which I highly doubt.

Keramics