
Show HN: QuaggaJS, a barcode scanner written in JavaScript - serratus
http://serratus.github.io/quaggaJS/
======
chime
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.

~~~
klintcho
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.

~~~
serratus
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?

------
tubelite
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](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?

~~~
lnanek2
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.

------
jHoldroyd
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/B3TWAKxIYAALMp7.jpg)

[https://pbs.twimg.com/media/B3TYETSIAAErP8U.jpg](https://pbs.twimg.com/media/B3TYETSIAAErP8U.jpg)

------
nilknarf
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-...](http://franklinta.com/2014/10/19/serverless-webrtc-using-qr-codes/).

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](https://github.com/fta2012/zxing-emscripten) (or demo link:
[http://fta2012.github.io/zxing-emscripten/](http://fta2012.github.io/zxing-
emscripten/)).

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

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

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

~~~
serratus
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.

------
myth_buster
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](https://github.com/serratus/quaggaJS/tree/master/doc)

------
snowwrestler
> 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?

~~~
uptown
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.

------
uberneo
[https://github.com/franzenzenhofer/miniqr](https://github.com/franzenzenhofer/miniqr)
\-- This does the same .. very handy

------
hardwaresofton
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?

~~~
SunboX
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](https://marketplace.firefox.com/app/qr-reader)

~~~
serratus
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?

------
Ecio78
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/](http://www.nongnu.org/quagga/)

------
tszming
Very impressive.

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

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

