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!

22 thoughts on “Barcode Recognition in Flash

  1. Pingback: Barcode Recognition in Flash at www.brendonwilson.com

  2. Awesome concept. I wish I had a webcam to really test it, but the possibilities for this are exciting. User identification, cataloging, etc. Nice work.

  3. Niall Kennedy reports that Delicious Library does indeed work with MacBooks, which is great, because it means that it’s technically possible. All I have to do is figure out how.

    For those of you on a MacBook, you’ll probably just get a black screen – you will need to change your camera device to “USB camera” instead of “DV camera” which is the default in Flash. Control-Click the app, and choose “settings” to change the camera setting.

  4. Pingback: Barcode Recognition in Flash at www.brendonwilson.com « The other side of the firewall

  5. Oh wow – how about this for a “you are not a unique snowflake” moment: posting this on Digg, Digg informed me of a similar post from 285 days ago.

    Apparently there’s a community-based barcode database project that has a Flash-based barcode recognition application. However, as with mine, it doesn’t appear to work with fixed focus cameras.

    Hmph, well, that’s the challenge for me to address I guess.

  6. An interesting development today: a compact “folded” lens destined to be used by cell phone cameras to take high-resolution photos. Heck, if we had these now, I wouldn’t have to go and solve the fixed focus camera problem.

    That said, I’m making good progress overcoming the current inability to recognize barcodes in photos taken by webcams with fixed-focus lenses. I’ll be at SuperHappyDevHouse 15 this weekend working on this.

  7. I am using a Macbook pro, got the camera to see the barcode but nothing happens, meaning taht no bar code ‘decoding’ is happening.

  8. Hi,

    you can bypass prior comment from me, I got it to work by printing a large enought barcode so it could get proper focus at a larger distance (about 14 inches) from the camera.

    I could send you the captured image with barcode and read out if you wanted to post it as proof that it does work on a Macbook pro. Also got it to work (with same image) on a 20″ iMac.

    This is gret stuff for learning, I was trying to explain my coworkers the technology behind barcodes, with out havng a barcode reader at hand, this was perfect example.

    Thanks

  9. It DOES work! I took my NTSC DVD camcorder and went into the kitchen shooting a motion video of various barcodes that I could find in the room, then hooked it up to my WinTV tuner card and then played back the DVD while the recognizer was running. It caught 5 out of 6 of the barcodes. The one that didn’t catch was because it was too dark.

  10. I have a macbook pro. for some reason the webcama isn’t turning on so I only see black in the flash window. Just installed the flash 9 plugin, but still no success. not sure why. Great idea though. definitely something I could use in a web-based shopping cart project that wants to maintain all of their inventory synchronized online as well as in the local store.

    JJH

  11. pretty sick, I got it to work, I had to right-click the flash app and tell it which input I wanted it to get for the video feed. I do a lot of video editing, so it was defaulting to a firewire in, but I changed it to a USB something or other and it’s getting the video fine now, the isight doesn’t focus at all, so that sucks.

  12. The problem is that the MacBook defaults to a DV camera input, which Flash doesn’t appear to like. You need to CTRL-click the Flash application and change the camera to use the “USB Video Class Video” camera. A future version will automatically choose this camera, but I’m battling the fixed focus problem first.

  13. Well, after much ado, I have conquered the fixed focus problem. I’ve now got a library that can extract EAN-13, UPC-A, and JAN-13 barcodes from an image capture from an ordinary fixed focus webcam. While it’s not perfect yet, it’s good enough to show off. I’m putting the code into private beta; details are available at http://www.scannerfly.com

  14. as expected didn’t get it to work on my MBP, so I hooked up my Sony DCR-HC51 and after adding enough light it worked quite fast. Scanned the back of a cd-rw case and a blue on white code on some thin plastic cookies package
    I once tried an application on my mbp to archive cd’s and books etc, and although it didn’t work great I do remember being able to scan some codes using my MBP webcam … So I guess it should be possible …
    Good luck with the project, very nice work so far!
    peace!

  15. Logitech webcam Communicaiton STX can’t focus on the barcode…
    maybe auto-focus issue. The screen image is just too blurry to see.
    try a UPC from a pack of candy, a barcode from DVD and barcode from the library card.

  16. What a creative idea! I work for a barcode software company and our developers are currently having a great time with what you’ve done here. Nice job! Looking forward to seeing how it all turns out.

  17. @Nathan: Glad you like it – although the version on this page doesn’t work very well with fixed-focus cameras. I’ve been working hard on a version that does solve this problem – see the demo over here.

  18. I got this to work using my Philips iCatch VI webcam. Great concept- I can’t wait for QR barcode support!

  19. I signed up for the beta early today and then realized this post is 4 years old. Is this still be supported and any idea on how we could implement a flash bar code scanner on a few of our web apps? Any suggestions would be helpful!

  20. Hey! This is pretty slick, basically exactly what I need for a personal side project. I was going to have a look at scannerfly.com, but the site is down… Any pointers? I am interested in the beta (although it seems to do what it needs to just fine), how might i get ahold of the source? :-) Pretty pretty please?

  21. Thanks for pointing out the database connection on the site was broken – it’s fixed now. There’s a beta available that I can send you, if you’re interested.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>