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
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]),
};
}
Arguments
- {HTMLVideoElement} videoEl
Returns
- {MediaStream} mediaStream
- {string} result
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.