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.
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.
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'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.
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/).
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.
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.
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.
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?
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.