Cycle QR Code Reader

A Cycle.js Driver for QR Code scanning in the browser.

It leverages on the media stream captured by the camera and outputs the result repeatedly.

$ npm install --save @leesiongchan/cycle-qrcode-reader

Usage

Basics:

import Cycle from '@cycle/xstream-run';
import { makeQrCodeReaderDriver } from '@leesiongchan/cycle-qrcode-reader';

function main(sources) {
  // ...
}

const drivers = {
  QrCodeReader: makeQrCodeReaderDriver(),
}

Cycle.run(main, drivers);

Simple and normal use case:

function main({ DOM, QrCodeReader }) {
  return {
    DOM: QrCodeReader
      .map(({ mediaStream, result }) =>
        h('div', [
          h('Result: ', result),
        ]),
        h('video', { props: { autoplay: true, height: 480, srcObject: mediaStream, width: 480 } }),
      ),
    QrCodeReader: DOM
      .select('video')
      .elements()
      .map(videos => videos[0]),
  };
}

API

• makeQrCodeReaderDriver

makeQrCodeReaderDriver()

Arguments

• {HTMLVideoElement} videoEl

Returns

• {MediaStream} mediaStream
• {string} result

Important

It is important to note that video must consists of both height and width in order for the driver work properly as the driver is leveraging on the height and width to create a canvas and pass to the QR Code reader to decode.