quirc.js, an alternative javascript qrcode decoder

5 years ago, I was starting to discover the use of Canvas in browsers. I first wrote a simple barcode generated canvas and later decided that it was time that QR codes be generated realtime with Canvas too (IIRC, most qrcode generators then generated images server side or or used divs/tables/ascii with they were done in JS).

Back to the present recently, Ilmari has been telling me a little about his idea of using qrcodes in JS augmented reality projects. There’s jsqrcode, a JS port of the popular ZXing lib, but he said the code wasn’t the most optimized as there were caught exception blocks. Anyways I thought that QRCode would probably been around so I could find some C libraries to port it to Javascript with emscripten.

I quickly narrow down a couple of libraries I could.
1. zxing
2. libqrcode
3. quirc

I started with the C++ version zxing. I managed to compiled it with emscripten but I was too lazy to look at converting to its buffer format. Libqrcode had some dependencies so I skipped over it. Quirc looked like it was designed for embed systems, has a really small codebase with no dependencies so I thought I would use it.

So in the hours when I turned 3 decade young, I whipped up quirc.js with some contribution from Iimari. Using some optimization flags in emscripten, the resulting js library is <70KB gzipped, which I would think is my smallest emscripten port thus far.

Decoding a frame seems to happen under 25ms, which I think is pretty decent since you could probably decode in realtime on a 30fps video. quirc also seems to be able to decode multiple qr codes at the same time (at the expense of higher processing time).

After this little success, I started having a little fun with QRCodes, and added a mashup with get user media (which I incorrectly refer as WebRTC). To think that many actually do not have a QRCode reader app, this 80kb app is just a link away that runs on even on (android) mobile phones.

I started having wild ideas like trying out ASCII qrcodes, and creating a RPC library that communicates over QRCode. Thankfully, I simply stopped at generating “QArt” codes using images with this online generator.

About a day after, Ilmari starting working on his custom QRCode decoder.

Then after, he also ported ZXing-cpp with emscripten to js. I gave it a try and added the user media example. Turns out it is also pretty efficient (seems to be faster than quirc.js although a bigger library),
but it can also decode a couple more encodings.

So that’s that for QR codes for now. If you’re looking at alternate javascript qrcode libraries, hope this post helped!