This Codebox shows you how to use the ZXing library (pronounced “Zebra Crossing”) to identify QR codes in a live webcam feed. (Although Processing has a great contributed library called QRCode, the ZXing is much faster and can do recognition in realtime.) The sketch looks for QR codes with an encoded O’Reilly books ISBN (ISBNs are standard book identifiers). When it finds one, it superimposes the book’s cover image onto the video over the QR code.

About QR Codes
Before jumping into the code, a bit of background. A QR code has two basic parts — the three positioning elements, which are the large square blocks at the three corners, and the data elements, which is everything else. The positioning elements help the software determine the QR code’s location and orientation. The data elements represent the encoded data. For example, it could be a product number, a URL, or (in our case here) an ISBN. The code also has some information used for error correction. The following image should give you the basic idea:

You can use a site like Kaywa to generate the code. Here’s an example of how to generate a code for “9780596510510,” the ISBN for Tom Igoe’s book Making things Talk:

Setting up the sketch

The first thing to do is download ZXing and use your Java compiler to create two files: core.jar and javase.jar. If you’re comfortable with Java, all you have to do is go into the “core” and “javase” directories and run ant to build the jar files.

If you’re not, I’ve compiled them for you. (But, don’t tell anybody — this probably violates some license requirement or the other. Just download javase.jar and core.jar. (A jar file like a zip file for Java that compresses and bundles multiple files.)

Once you have the jar files, fire up Processing and then use “Sketch -> Add File” to add them to your project. Then paste in the sketch code into the main code window. You can get it from the qr_codes.pde file or pull it from the following codebox:

Print off a few QR Codes for various O’Reilly books and start the sketch. When you show the codes to the webcam, you should see the cover image appear after a short delay. Of course, you can encode any other information you like.

The setup is similar to the one we’ve used in the posts on OpenCV. First, we set up a new reader object, like this: reader = new;

Then, we pass the reader an image that might contain a QR code. In this case, we’re just passing it the frames coming in from the webcam. It’s slightly more complex in that we have to do a couple of transformations on the raw image before we can use the decoder — this is all done in the draw() method:

       LuminanceSource source = new BufferedImageLuminanceSource((BufferedImage)cam.getImage());
       Result result = reader.decode(bitmap);

Once we’ve called decode(), the reader object will have data about any QR codes it’s detected. The getResultPoints() method returns the coordinates of each of the position indicators, and the getText() method returns the encoded text. Assuming we found something, we then just try to pull off the corresponding cover from the O’Reilly site and display it. As one bit of a wrinkle, we keep track of the last ISBN we found so that we’re not constantly loading the same image on every frame.

This demo should give you most of what you need to do your own QR hacking with Processing. Have fun!

PS: Remember, it you’re using Windows, you’ll need to install WinVDIG and QuickTime to use the webcam in Processing.

Check out all of the Codebox columns here

In the Maker Shed:



Getting Started with Processing