@flipbookqr/reader

The Flipbook reader is responsible for reading "flipbooks" created by the Flipbook writer. It can be used to decode a series of QR codes into a single payload.

Installation

NPM:

npm install @flipbookqr/reader

Yarn:

yarn add @flipbookqr/reader

PNPM:

pnpm add @flipbookqr/reader

Bun:

bun add @flipbookqr/reader

Usage

View a CodeSandbox example

Screenshare

The following will read a QR code via the getDisplayMedia (screenshare) API:

import { Reader } from '@flipbookqr/reader';

// Create a new instance of the Flipbook reader
const reader = new Reader(optionalConfig);

// Read the Flipbook visible on the screen
const result = await reader.read();

The result is a is the original payload that was encoded into the series of QR codes.

Camera

The following will read a QR code via the getUserMedia (camera) API:

import { Reader, WebRTCProcessor } from '@flipbookqr/reader';

// Create a new instance of the Flipbook reader
const reader = new Reader({
  frameProcessor: new WebRTCProcessor('camera'),
});

// Get a list of all available camera sources
const sources = await reader.opts.frameProcessor.getStreamTracks();

// Select a camera source
reader.opts.frameProcessor.setStreamTrack(sources[0]);

// Note: If you don't do the above two commands, it will default to the first camera source

// Read the Flipbook visible on the screen
const result = await reader.read();

The result is a is the original payload that was encoded into the series of QR codes.

File upload

The following will read a QR code from a file:

import { Reader, FileProcessor } from '@flipbookqr/reader';

const file = new File(); // some file

const reader = new Reader({
  frameProcessor: new FileProcessor(),
});

const result = await reader.read(file);

The result is a is the original payload that was encoded into the series of QR codes.

Configuration

The Writer class accepts an optional configuration object that can be used to customize the behavior of the writer. The following options are available:

{
  logLevel: 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error', // Default: 'silent'
  frameProcessor: FrameProcessor, // Default: new WebRTCProcessor()
}