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

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

• php
• javascript
• augmented-reality
• qr-code
• appcelerator

• 1 patrick-wied.at/static/qrgen – stefcud Commented Jul 17, 2012 at 23:24
• @StefanoCudini that site is using ZXing remote service, not pure js. – Amir Ali Akbari Commented Nov 27, 2012 at 12:52
• A little late, but if you are looking for a reliable solution for android and ios only, then you can check this answer stackoverflow.com/questions/17652017/… – maraca Commented Aug 13, 2015 at 12:37

3 Answers 3

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.

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.

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.