Sharing cat gifs after the apocalypse

A presentation at Fronteers Jam Session in October 2019 in Amsterdam, Netherlands by Niels Leenheer

Slide 1

Slide 1

Imagine living after the apocalypse. You know. When the wifi is broken. Like in the venue this afternoon or in the train you took to get to Amsterdam.

No seriously. This is a serious talk. Who knows what will happen. Kim Jong-un might diss Trump on Twitter, he’ll have a fit, blame Hillary. And in his rage push the wrong button and bombs will be raining down.

And that means….

Slide 2

Slide 2

No more Wifi. No more 3G. No 4G. Okay, everybody will be dead, but let’s not focus on that.

Some of us will survive and live underground for a while. We will be conquered by talking apes and monkeys. But luckily some astronauts will rescue us from slavery… I saw that on a documentary once.

Slide 3

Slide 3

So now what? We need to rebuild society. Bring civilisation back. And that means sharing meaningless photos of your food. And of course cat gifs. And I say GIF, because after the apocalypse everyone agrees it is GIF – all the JIF people were eaten by monkeys.

Slide 4

Slide 4

But how? And the most important question, will there actually be cats left, or will they mutate into horrible creatures that will come out night and try to eat our children. Those are the important questions that I think about when I lay awake in my bed at night.

Slide 5

Slide 5

But good news. Everything we need to rebuild society is already in your browser.

Slide 6

Slide 6

If you were sensible - like me - you would have bought a massive supply of mutant cat repellant. And installed a GIF sharing PWA beforehand. And that PWA will keep working after the Internet is gone.

Slide 7

Slide 7

Our PWA is going to use the getUserMedia API to capture video…

Slide 8

Slide 8

And we’re going to need WebAssembly to analyse that video, because JavaScript is just too slow for this. And the whole analysation happens in a WebWorker.

Slide 9

Slide 9

But what are we going to analyze? Everyones favorite type of barcode…

Slide 10

Slide 10

QR codes…. Obviously!

Slide 11

Slide 11

So, how does it work. Let’s go over this. We take our cat gif of 128 x 128 pixels and split it into…

Slide 12

Slide 12

…64 segment. Because we are not going to transmit this images in one go. We’re going to load it progressively.

Slide 13

Slide 13

Each one of these segments is just 16 x 16 pixels.

Slide 14

Slide 14

And we encode it using Base64. That is just a text string.

Slide 15

Slide 15

And turn it into a QR code. You’ll notice there are 56 QR codes, that is because some of the segments are identical. But some segments are larger than a QR code can contain. So in the end we are left with 56.

Slide 16

Slide 16

And we show these codes after each other. 4 per second. That takes just shy of 13 seconds and will transfer almost 5000 bytes. So in practice we’ve created a 300 baud modem. That is faster than the modem of my first computer. Yeah I’m old.

Slide 17

Slide 17

And on the other end we use the camera to scan, web workers and web assembly to analyse the QR code.

We’re using a library Zbar which is a QR code detection library written in C. It’s old. It’s from 2007. I’ll put it in other terms. It’s on Sourceforge…

So let’s see how this actually works in practice.

Slide 18

Slide 18

But I want thank Luis first. He gave me this idea and inspired me. Okay I just shamelessly stole his idea. And he let me, so he is a really awesome person. 

So let’s try this.