QR Code

QR-codes are as popular as ever and incredibly useful for mobile url sharing and 2-factor authentication. So I started wondering what are the limits of the data it can be used for and what other methods of "image sharing data" are there.

1. The basics

Starting with the basics, I create a QR-code generator for some of the most popular uses. I will be using the qrcode library to generate the svg.

From what I gathered from most online QR-code generators the most popular ones include URL, text, email, telephone, wifi. (There is also full contact information, but that is just a lot of form fields and I'm felling lazy XD).

Click the QR-code image to download it.

This first part took me 1h to complete, most of the heavy work was done by the qrcode library and I only had to handle the inputs and send the content to the library.

2. Encoding an ebook

Now let's continue, testing out with the form above I found out the maximum amount of text for the low error correction level is 2954 characters. Could it be possible to encode a whole book?

My first though would be to get a plain text book and then compress its text using gzip. Then generate multiple QR-codes with some metadata to identify the collection. Finally I'll need to make a custom Qr-code scanner to decompress the gzip data and join the data back together.

I will be using HTML5 qrcode scanner for the camera scanner and Pako for gzipping the incoming data. For the example data I'll be using Alice in Wonderland public domain book in plain text from Project Gutenberg. Notice: I removed the copyright from the original text downloaded from Project Gutenber to reduce the final file size and number of generated QR-codes.

Here is an example of what every QR-code in this collection would have to be:

alice-in-wonderland;9999;9999;...

The break down would be: 4- characters for the id/name and 4 characters for index and count values. This leaves 2906 characters for the data on each QR-code, let's round down to 2900 just to be safe.

Click to checkout the 29 part qr-codes

Turns out by gzipping the text I could only fit 1860 bytes of compressed data, still it generated 29 parts for Alice in Wonderland instead of 51 before compression a reduction of ~43%.

Another lesson learned, camera resolution and lighting makes a lot of difference when trying to scan a ton of data using a web QRCode scanner. My iPhone camera could easly scan a 1860 bytes data QRCode while my 2018 MacbookPro could only read a 400-800 bytes QRCode (even using a kindle to imitate paper and make it easier to scan).

The second part took me 8hs to complete, around 4hs for the experimentation of how much data could be scanned in practice and generating the collection of QR-codes, 1h to make the html5-qrcode scanner work and the rest to polish the solution and make the scanning progress visual idication.

3. Animating QR-codes

Ok, that's a lot of QR-codes to scan for a simple 100 pages book. Printing this out we could maybe put 6-12 on each page which would give 3-5 pages and a lot of patience to scan each qr-code. However if we could scan a video of all of those QR-codes with 1 every few ms in an infinite loop we could reduce it to a few seconds.

So I created a animated svg of the combined generated QRCodes.

Data Size:

FPS:

Okay so the process was not that simple, at the speed of 5 fps the scanner would only read successfully ~92% of the parts on the first run, then ~97%, and there was always a few that took ~5 seconds to scan, so I would have to stop the animation on the right frame to get it. However it actually works and in around 4-7minutes you could get a 100 pages book.