Show HN: QuaggaJS, a barcode scanner written in JavaScript | Hacker News Reader

Show HN: QuaggaJS, a barcode scanner written in JavaScript

serratus.github.io

168 pointsserratus27 comments

Invariant to scale and rotation in JS on mobile? That's fantastic! I just tested the Red Laser native app on my phone and it can handle scale/rotation too. But I never thought about rotation for the Red Laser app and always tried to align it properly between the [ ] brackets.

I think apps that support scale/rotation should not show [ ] brackets but instead a central red +. Haven't dug deeply into how barcode_locator.js in your repo works but with the expectation that the barcode will be in the middle, you might be able to slightly optimize your code to start the location detection from the middle and expand outwards.

It appears you are breaking the image into smaller 'patches' and looping through those to look for chunks of a barcode. Even if the algorithm is resolution independent, you might be able to exit the loop 50-60% earlier if you detect from the middle and go out in a spiral. In other words, the order in which you iterate the loop can make a difference.

Barcode can be anywhere. It's an impressive work. http://www.oberhofer.co/how-barcode-localization-works-in-qu...

There are a range of different methods that can be used, but your guess is probably correct regardless of which method you use: "breaking the image into smaller 'patches' and looping through those to look for chunks of a barcode". I would probably train a classifier (SVM or similar) using some rotation invariant feature, such as DAISY or ORB (BRIEF). I tried something similar for CRF image segmentation. This is mighty impressive in JS whatever method they use, the CV libraries in JS are kind of limited.

Thanks for this interesting input. I don't have much experience with classifiers, nor if they work well in JavaScript. I already implemented FAST and BRIEF in another project, but this solution was neither scale, nor rotation invariant. ORB seems to be a better fit for that. How would you implement your idea in JS?

Thanks for the input, I haven't really thought of that before. But since the barcode is usually in the center of the viewport this makes a lot of sense. I'll give it a try and thanks for adding an improvement issue on GitHub.

This is great news.

I just wrote a QRcode-reader Django widget to be used on a mobile browser, using the LazarSoft library (https://github.com/LazarSoft/jsqrcode). The library worked great, but the HTML5 bits turned out to be surprisingly painful. Camera selection works differently in different browsers - Android Chrome has an API, Firefox throws up a selection dialog every time. Mobile Chrome doesn't let you emit audio unless it is in the context of a UI interaction (desktop Chrome does!)

Worst of all: poor autofocus. I tried multiple Android devices (Nexus 4, Moto G v2, Nexus 5) and in all cases, autofocus on getUserMedia() worked indifferently or not at all, especially close up. In contrast, native barcode/QRcode reader apps on the same devices did much better, snapping to focus very quickly.

I wonder if you faced something similar?

I've had similar issues on Google Glass, which has no auto-focus. Commercial libraries like Scandit and even the paid app by the zxing author have better support for blurry images and are able to handle, for example pixels which are partially white/black instead of trying to bin everything into on or off, but the open source version lacks this capability. So sometimes it is possible to do without good focus if you have a better algorithm.

I'm still facing the same problems with the missing autofocus. For some devices it works out of the box, like the HTC one mini, but for the most it does not. There is actually an open issue about that in the Chrome-Browser for Android (https://code.google.com/p/chromium/issues/detail?id=343894)

It would help a lot to get continous autofocus working in the browsers. Especially with barcodes, since their size requires the camera to be really close.

Fantastic library, we've tried a few like it before and none of them really worked quickly or reliably enough.

We did a quick mashup of our API and this to create a basic (but functional) mobile PoS using the phone camera as a scanner.

https://pbs.twimg.com/media/B3TWAKxIYAALMp7.jpg

https://pbs.twimg.com/media/B3TYETSIAAErP8U.jpg

Being able to scan barcodes using a web app is pretty cool. I used something similar when I was tinkering with transmitting data visually for the handshake step of webrtc: http://franklinta.com/2014/10/19/serverless-webrtc-using-qr-....

I used Lazarsoft's javascript QR code scanner which worked, but it wasn't very robust since it was a manual port of an early version of zxing. It is pretty easy to compile the c++ branch of zxing v2.3 using emscripten but it is a pain to optimize: https://github.com/fta2012/zxing-emscripten (or demo link: http://fta2012.github.io/zxing-emscripten/).

There's also a port of ZBar using Emscripten / asm.js: https://github.com/yurydelendik/zbarjs and a hand-made port of ZXing by Wojciech Szela here: https://github.com/wojciechszela/zxingjs

The hand-made port looks really promising. This could work alongside QuaggaJS as the decoding part, since ZXing does not locate the barcode.

Thanks, I was looking for a way to trigger a QR code scan from a webpage. I can see zxingJs is in progress

This is great, but using the example with the webcam stream I could not get one correct reading of a barcode.

Have you really tried with Code128 or EAN13 encoded barcodes? In the demo, you can switch between those two modes. Make sure your camera has an auto-focus built in, because blurry images are not recognized robustly enough.

This looks interesting. Bookmarked to check it when home. The images in the doc files seems to be broken. https://github.com/serratus/quaggaJS/tree/master/doc

> Safari and IE do not allow the access to the camera yet, neither on desktop, nor on mobile. You can check caniuse for updates.

I assume this could be solved by wrapping the JS library in something like PhoneGap and installing it as a native app?

That's correct. Phonegap/Cordova gets you access to the camera, and would provide the ability to capture an image for local-processing with this library.

https://github.com/franzenzenhofer/miniqr -- This does the same .. very handy

At present there is only one bar code scanner on firefoxos marketplace, with this library it looks like where will be better ones.

Maybe consider making a quick FFOS App?

The problem of Firefox OS is the fix focus camera of over 1 meter and the max 5 mega pixel resolution. You can't get sharp barcode images. They are either blurry while to near, or too small while in focus.

I've build a Firefox OS app [1] that is theoretically enabled to scan barcodes, but it won't work with most devices out there.

[1] https://marketplace.firefox.com/app/qr-reader

It's too bad that most of the problems when scanning barcodes are related to the missing auto-focus in browsers. I really hope this gets sorted out in the near feature.

I just tried your app and reading QR codes works really well. You are using an emscripten version of ZBar, right?

Yeah, I already tried the webpage on my Flame and it worked out of the box. This might be a great app for the FF-OS store indeed.

Hey there fellow flame user! I also have one, and yeah, it would make a great addition!

at the very least, it can be a web-webapp (firefoxOS let's you declare app manifests for online sites)

when I read "QuaggaJS" before finishing the headline, I thought that it could be a porting of Quagga the routing software[1] to Javascript :)

[1] http://www.nongnu.org/quagga/

Very impressive.

Fast and accurate under Android/Firefox Mobile, will use it in the coming project.

I was looking for something like that back in 2010 :) Nice trye :)

Reply on news.ycombinator.com