Stream data through multiple QRCodes

a bit like this meme:

This project is made possible by all the sponsors supporting my work
You can join them at my sponsors profile:

Live demo

• QiFi CLI - CLI for streaming QR code file transmission
• luby-transform - Luby Transform encoding and decoding
• @qifi/generate - Stream Generated QR Codes for data transmission

This situation of streaming QR code data transmission is similar to the "Binary Erasure Channel (BEC)," which is a communication model. In this model, the sender transmits binary data (0 or 1), and the receiver has a certain probability of not receiving some data bits, which are marked as "erased" or "lost." In other words, the receiver knows which bits are lost but does not know their specific values. This model is used to study and design coding techniques that can effectively transmit information even in cases of data loss.

Scientists have already achieved very mature research results on how to efficiently transmit data in BEC, one of which is using "Fountain Codes." Fountain Codes are a type of error-correcting code that can effectively transmit information even in the case of data loss. This project uses Luby Transform coding, which is a type of Fountain Code. The basic principle is to divide the original data into multiple small blocks and then generate an unlimited number of encoded blocks through encoding. The receiver only needs to receive enough encoded blocks (usually slightly more than the original blocks) to reconstruct the original data.

After selecting a file on the Send page, expand Save QR sequence as GIF. Choose a multiple of the data block count (1.5× by default) or an exact frame count, then set the playback speed and image size and select Export GIF. Frame counts are not capped. Larger sequences take longer to encode and use more memory. You can cancel an export while it is running.

The export uses a separate fountain-code encoder and pauses the live QR stream until it finishes. GIF encoding is loaded only when needed, and the QR modules are written directly as lossless black-and-white pixels. Before downloading, the exported sequence is decoded and compared with the input. If it cannot be recovered, increase the multiplier or frame count and try again. This check verifies the data in the sequence; camera scanning may still miss frames.

1. Install Dependencies

You need install Node.js first.The project uses pnpm as its package manager. First, ensure you have pnpm installed:

npm install -g pnpm

Then, install the project dependencies:

pnpm install

2. Build the Project

Build the project using the command specified in the package.json and netlify.toml:

pnpm run build

This will generate the output in the .output directory.

Alternatively, if you want to run the development server to test changes:

pnpm run dev

3. Serve the Project Locally

if your target environment have Node.js, you can copy entire .output directory to where you want.You can preview this build using:

node .output/server/index.mjs

if your target environment don't have Node.js, you cat just host those static files.

cd .output/public
python -m http.server

You will usually encounter the following errors.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

you need a custom web server, Run in the .output/public directory:

# python custom_http_server.py
from http.server import SimpleHTTPRequestHandler, HTTPServer

class CustomHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.extensions_map.update({
            ".js": "application/javascript",
        })
        super().end_headers()

ADDR = '0.0.0.0'
PORT = 8000
with HTTPServer((ADDR, PORT), CustomHandler) as httpd:
    print(f"Serving on http://{ADDR}:{PORT}")
    httpd.serve_forever()

• Fountain codes and animated QR
• LT codes -- a design and analysis epiphany
• gofountain

• Anthony's QR Toolkit