Skip to content

Instantly share code, notes, and snippets.

@yurydelendik
Created July 8, 2013 23:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save yurydelendik/5953383 to your computer and use it in GitHub Desktop.
Save yurydelendik/5953383 to your computer and use it in GitHub Desktop.
Making simple barcode scanner for Firefox OS

Simple barcode scanner in JavaScript

Random toughts and steps for creation of the https://github.com/yurydelendik/zbarjs project.

Finding native library

The http://zbar.sf.net looks like a good library. The license is LGPL, we have to take that in account late. Let's compile http://downloads.sourceforge.net/project/zbar/zbar/0.10/zbar-0.10.tar.bz2 :

./configure --disable-video --without-python --without-qt
make
./zbarimg/zbarimg IMG_0005.png

The application outputs code type and number.

Trying to compile zbarimg using emscripten

By following http://mozakai.blogspot.com/2012/03/howto-port-cc-library-to-javascript.html, found out that zbar projects requires ImageMagick. Also, getting and compiling ImageMagick requires libpng1.6 dependency, but using it without libpng gives us only ability to scan/analyze simple formats such as Netpbm format (which are not supported/produced by the browser). After compiling ImageMagick without PNG support and linking zbarimg, we need to add _NSGetExecutablePath and llvm_prefetch function. After that it's possible to analyze the PPM file with barcode. Abandoning the idea of using zbarimg as is.

Writing small C application

We can write application that directly uses zbar library without the ImageMagick (see zbar-main.c). We add few external functions: js_get_width, js_get_height, js_read_data and js_output_result. The zbar library and this small application can be compiled using:

emconfigure ./configure  --without-PACKAGE --without-x --without-jpeg --without-imagemagick --without-npapi --without-gtk --without-python --without-qt --disable-video --disable-pthread
emmake make
emcc -O1 -I`pwd`/include ../templates/zbar-main.c ./zbar/.libs/libzbar.a --js-library ../templates/zbar-callbacks.js -o ./zbar-processor-content.js

The js_XXXX functions are defined in the zbar-callbacks.js library/file. Also implementingother functions that are missing: iconv_open, iconv, and iconv_close. Now we can pass gray color canvas data directly to the zbar library.

Trying get image

Processing the full resolution image using the JavaScript compiled zbar library takes long time (asm.js is not present on Firefox OS v1.0) on the underpowered mobile devices. We need to reduce the size of the image to the size that is close to 320x240. Even with this size it takes about a second, so we will not consider the real-time video analysis (e.g. via https://developer.mozilla.org/en-US/docs/WebRTC/Taking_webcam_photos or https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.mozCameras).

Using the next best thing: <input type="file" accept="image/*"> (see https://hacks.mozilla.org/2012/04/taking-pictures-with-the-camera-api-part-of-webapi/). That shall work on any moder browser.

To convert, reduced in size, RGB image to gray scale, we will use colors limunosity (see http://en.wikipedia.org/wiki/YUV#BT.709_and_BT.601) and feed that directly to the js_read_data function.

CSS styling

It's a web application. We can using CSS to make it non-uglier. Using https://developer.mozilla.org/en-US/docs/Web/CSS/transform and https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Hosting application for Firefox OS

Last steps is to create web application manifest file and cache manifest. The webapp file (see https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest), is hard to test without remote web server using https://marketplace.firefox.com/developers/validator. The offine cache is easy to create -- we will just list all our files.

Time to push it to the github pages: http://yurydelendik.github.io/zbarjs/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment