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:
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.
Discussion 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:
com.google.zxing.Reader reader = new com.google.zxing.MultiFormatReader();
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()); BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source)); 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!
More: Check out all of the Codebox columns here
In the Maker Shed:
Getting Started with Processing Learn computer programming the easy way with Processing, a simple language that lets you use code to create drawings, animation, and interactive graphics. Programming courses usually start with theory,but this book lets you jump right into creative and fun projects. It’s ideal for anyone who wants to learn basic programming, and serves as a simple introduction to graphics for people with some programming skills.