Barcode Recognition in Flash
As part of my new year, I’ve decided to start putting more code out there earlier. I have a tendency to build projects in private, trying to get things perfect before I reveal them publicly. The end result is that I have a lot of code gathering dust in the corners of my hard drive. No more. That’s why I’m going to post one of the mini-projects I’ve been working on for the last little while: a Flash-based barcode recognition library.
I know what you’re thinking: Why the heck would anyone want to build a Flash-based barcode recognition library? Why not try the demo yourself and see! 😉
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. Using digital cameras as a cheap alternative to traditional barcode scanners isn’t an original idea – Delicious Library uses iSight to allow its users to input their CDs, DVDs, and other media into a personal media library. Unfortunately, that particular application is a heavy application that’s only available on the Mac – what I want to do is build a simple way to provide that same kind of functionality in platform independent web-based applications.
Think of the web applications that could benefit from quick and efficient input from physical items that carry a barcode – cataloging items you own or consume to drive recommendations on sites like AllConsuming or Shelfari (or any number of other similar sites), tracking your personal property for insurance purposes, or easily selling or trading large numbers of goods on eBay, Lala, or Swaptree. And of course, I’m sure there are some other applications that I haven’t even considered.
I built the original library in Java as a proof of concept, more 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 webcam 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:
- 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.
- Native camera access: Flash provides a native API for accessing video cameras, as well as native support for manipulating bitmap and video data.
- Mobile support: While not strictly required, the ability to deploy 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.
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 a 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 webcam shooting in 640×480 resolution is sufficient, provided the barcode is put close to the camera. The challenge here is that in order to get the clarity required, you need a webcam whose focal length is adjustable. Currently, webcams 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 webcams with manual focus, such as the Logitech QuickCam Chat, are generally very cheap.
The second shortcoming is the most problematic – we can only expect embedded webcams to become the norm. I’m not clear if recognizing a barcode from these types of cameras is possible – Delicious Library claims that it can work with the built-in cameras on MacBooks, but I’ve not had an opportunity to confirm it myself.
This brings me to my questions for the technologists out there:
- 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 you? I’ve put together a simple proof of concept Flash application that you can use to try the library out for yourself. Grab a book and hold its barcode close to your webcam with a steady hand; the application will pop up an alert showing the decoded barcode. Give it a try and comment here to let me know if you’re able to get it to work for you, and what webcam you’re using.
- Wanna build something with this? Come on, you know you do. I’m looking to see if people are interested in building an application to use this – are you interested? Drop me a line here.