Barcode Recognition in Flash

Concept

The idea is simple: allow use of a commodity webcam as a barcode reader, thus allowing users to efficiently input physical items into web based applications. This page documents the current state of my efforts – the project is by no means complete, as I’ll detail below.

Demo Application

To try out the demo application, you’ll need:

  • Flash Player 9: This page should prompt you to update to Flash Player 9 automagically, but in case it doesn’t work or you don’t have a previous version of Flash installed, you can get the plugin directly from Adobe.
  • A webcam: It’s pretty hard to do barcode recognition from a webcam without a webcam! Note that fixed focus webcams, such as those on the new MacBook Pro, generally don’t work yet. See the Known Issues section below for more detail.
  • Decent light: Depending on your webcama’s driver, you may or may not have some sort of automatic white balance. Performing recognition generally requires decent light to provide high contrast between the barcode’s black bars and the white spaces/background.
  • A barcode or three: Grab a couple of your favorite books or CDs to use to test the barcode recognition.

To use the demo application:

  1. Give Flash access to your webcam.
  2. Focus your webcam’s lens so that an item’s barcode is in focus when placed in front of your camera.
  3. Hold your item’s barcode steady in front of your webcama so that the barcode fills the application’s display.
  4. When the application has extracted the barcode, an alert displaying the barcode value will pop up.

So without any further ado, here’s the demo application:

A barcode can be extracted only once. So, you’ll need to use a different item for the next recognition. Note that if you can’t get it to work, add a comment below describing which webcama you’re using and the item you’re scanning. If you’re really desperate to see this work, here’s a video of the application in action.

Technology Choice

I built the original library in Java as a proof of concept to figure out how best to reliably extract a barcode from an image. I knew it had to be fairly straightforward as there are a number of SDKs available on the web to perform image-based barcode recognition, but I was uncertain if a commodity webcama was up to the job. I used the cheapest webcam I could find ($20 at Best Buy) to make sure I had something that would work with even the worst hardware.

Once I had the basic algorithm for scanning an image and extracting an EAN-13 barcode, I ported the code to Flash 9 in an evening (ActionScript approximates Java). Flash was an obvious choice for a couple reasons:

  1. Cross-platform browser support: Flash has strong support across all platforms, operates in all web browsers, and is readily integrated with web-based applications. While the same is also generally true of Java, Flash is more widely deployed and is lighter weight.
  2. Native camera access: Flash provides a native API for accessing video cameras, as well as native support for manipulating bitmap and video data.
  3. Mobile support: While not strictly required, the possibility of deploying this technology on mobile devices in the future would be a nice bonus. Again, not an especially original idea – Japanese cell phones have native QR barcode recognition capabilities – but a nice bonus nonetheless.

Known Issues

The core library is in a functioning state, with a couple of caveats:

  • EAN-13 only: The current code only decodes EAN-13 barcodes, a superset of UPC typically used to represent barcodes on books, CDs, DVDs, and other boxed goods sold by retailers. While the framework is in place to support other symbologies, I haven’t yet implemented any code to decode other symbologies as EAN-13 covers the majority of barcodes that I believe to be of interest for consumer-oriented web applications. I also have a funny feeling that there are still some nuances of EAN-13 that I haven’t implemented correctly, so those issues will need to be addressed.
  • No fixed focus cameras currently work: Decoding a barcode with the current code requires a fairly high quality image that clearly resolves the separation between the bars and spaces in a barcode. A webcama shooting in 640×480 resolution is sufficient, provided the barcode is put close to the camera. The challenge is that in order to provide the clarity required you need a webcama whose focal length is adjustable. Currently, webcamas with a fixed focal length, such as the Logitech QuickCam Communicate STX or those built into the latest MacBook Pro and Sony VAIO laptops, can’t be adjusted to render a crisp image when the object is placed close to the camera. This is somewhat ironic given that webcamas with manual focus, such as the Logitech QuickCam Chat, are generally very cheap (< $30).

The second shortcoming is the most problematic as we can only expect embedded webcamas to become the norm. I’m not clear if recognizing a barcode using these types of cameras is possible – Delicious Library claims that it can work with the built-in cameras on MacBooks, but I haven’t had an opportunity to confirm it myself.

Next Steps

At this point the proof of concept is done, but several questions remain:

  • Does Delicious Library work with MacBooks? If so, I’d love to see some video of it in action. It would also be great if someone can point me in the direction of possible approaches to solve the fixed focus problem. This will also be useful if I’m going to be able to get this working on mobile devices in the future, as they also use fixed focus lenses (although at the rate their resolution is increasing, that problem may go away pretty soon).
  • Does this work for regular users? I’m interested in seeing if the demo application can be used successfully by “normal” users under field conditions. Are there problems with other cameras? Lighting conditions? Can an average user hold a book steady enough to justify using this for data entry? If you try this out, please take a moment to add a comment below to let me know whether or not you were able to get it to work for you, and what webcama you’re using.
  • Identify potential applications: The next step is to explore interesting opportunities to integrate this into other applications. I’ve got a couple ideas – are you interested in building something on top of this? Drop me a line!