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.
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!
PS: Remember, it you’re using Windows, you’ll need to install WinVDIG and QuickTime to use the webcam in Processing.
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.
13 thoughts on “Codebox: Use QR codes in Processing”
Comments are closed.
Once we have cheap display glasses that produce a virtual overlay, One can see how QR codes in the environment could create an extremely rich environment (and nerdy parties with hats with QR codes linked to your avatar/last tweet/flicker gallery etc)
how can I do this? please help me a bit. i can’t
Hey Federico, you wanna generate a QR Code? I found this page with detailed tutorial on how to generate QR Codes in Java library. Check this out:
http://www.onbarcode.com/products/java_barcode/barcodes/qrcode.html
And there’s tutorials for C#, VB.NET, and ASP.NET~
http://www.onbarcode.com/csharp/qr-code-generator.html
http://www.onbarcode.com/vb_net/qr-code-generator.html
http://www.onbarcode.com/asp_net/qr-code-generator.html
I am trying to use Processing to export this qr decoder so that it will work on my website. It’s not working and i’m not sure why, any thoughts?
I am having the same challenge… Did you ever figure out why?
Hey all.
At first thanks odewahn, for this gread article.
At the moment im am working on an project for our Master Research Exhebition at the department of Architecture at the “University of Wuppertal”.
We aim to invent an interactive table, wicht generates some stuff controlled by a couple of printed QR Codes (captured by video Cam).
Does some one has an idea how i can read multiple QR codes at the same time?
Thanks a lot,
Alex
Alex, did you manage to find how do decode more thank one QR? I you do, do you mind sharing the answer? Thanks
Hey Theo,
of cause i can give you an example, how to decode multiple QR Codes from an WebCam input. By the way i havent used the original “com.google.zxing.*;” Java Library. I have used Thomas Diewalds library (http://thomasdiewald.com/).
You can watch some photos of our work here:
“http://www.arch.uni-wuppertal.de/Forschungs_und_Lehrbereich/Staedtebau/forschung_master/para_masterplan/”
And at last, here is my example Sketch:
// Libraries
// ——————————————————————————————————–
import diewald_bardcode.*;
import diewald_bardcode.CONSTANTS.*;
import codeanticode.gsvideo.*;
GSCapture cam;
int cam_size_x = 640;// 1280;//1280;//800; //1280;
int cam_size_y = 480;// 720;//800;//600; //(int)(3.0*cam_size_x/4.0);
PFont font;
// SETUP
// ——————————————————————————————————–
void setup()
{
font = createFont(“Arial”, 20);
textFont(font);
size(cam_size_x, cam_size_y);
String[] cameras = GSCapture.list();
cam = new GSCapture(this, cam_size_x, cam_size_y); // …, cam_size_y, cameras[1] ) <– If multiple Cameras are used!
cam.start();
// uncomment this to see your supported Camera Resolutions!
// println ("Supported Resolution:");
// int[][] res = cam.resolutions();
// for (int i = 0; i < res.length; i++) {
// println(res[i][0] + "x" + res[i][1]);
// }
}
// DRAW
// ——————————————————————————————————–
void draw()
{
if ( cam.available() ) {
background(0);
cam.read();
cam.loadPixels();
image(cam, 0, 0);
decode();
}
}
// Decode QR Code
// ——————————————————————————————————–
void decode() {
DecodingResult[] dr = Barcode.decodeMultiQRcode(cam, CHARACTER_SET.DEFAULT, true); //true = tryHarder (slower)
for (int QR_count = 0; QR_count < dr.length; QR_count++) {
if ( dr[QR_count].decodingFailed() == true) {
fill(255, 0, 0);
text( "No decoding information could be found!", 20, 40 );
}
else {
fill (0, 255, 0);
int xpos = int(dr[QR_count].getCorners()[0].x);
int ypos = int(dr[QR_count].getCorners()[0].y);
text(dr[QR_count].getText(), xpos, ypos);
for (int PosIndex = 0; PosIndex < 3; PosIndex++) {
int NewX = int(dr[QR_count].getCorners()[PosIndex].x);
int NewY = int(dr[QR_count].getCorners()[PosIndex].y);
pushMatrix();
translate(NewX-10, NewY-10);
rect(0, 0, 20, 20);
popMatrix();
}
}
}
}
I wanted to know if i could make this QR code using a microcontroller from Arduino and a LCD. Please let me know how and point me towards the hardware. Thank You.
can you make any tutorial on how to use it in vb.net? any version will do thx
im trying to use this in an application pls help
I Have followed all the steps and it worked fine at first, then Oreilly changed the cover pickture location, but a small hack solved that. problem i’m having now is with the latest version of processing 2.0b8. followed all the steps again, and all i get is a gray screen, no video and no error message, can someone point me in the direction to solve this, do other people have the same problem
Hi ppl,
Im trying to get qrcode into processing to do a project.
I folowed some posts to add librarys and all that but it always says:
UnsatisfiedLinkError: can’t load library gio-2.0 (gio-2.0|libgio-2.0|libgio-2.0-0) with -Djna ,
i have imported the 2 files in library with sketch add file, am i doing something wrong ?
anyone knows how to solve it ?
Tks.
[…] metin olarak hazırlanmış bir qr kod üzerinden imaj gösterebileceğimiz bir sketch yer almakta. Codebox: Use QR codes in Processing başlığı altında makezine tarafından paylaşılan çalışma için ihtiyacınız olan tüm […]