React webcam QR-scanner

An implementation of a real-time QR-code scanner using WebRTC

* Based on jsQR Library
* Properly disposable resources (MediaStream)
* Web worker support (for the detection process)
* Fallback to main thread supported
* Implemented as a pure React component

Installation

Using NPM:

``batch
npm install react-webcam-qr-scanner
`

Using Yarn:

`batch
yarn add react-webcam-qr-scanner
`

$3

Here is an example of a simple React component that utilizes `react-webcam-qr-scanner`

`javascript
import React from "react";
import Scanner from "react-webcam-qr-scanner";

const MyAwesomeComponent = (props) => {

const handleDecode = (result) => {
console.log(result);
}

const handleScannerLoad = (mode) => {
console.log(mode);
}

return (
className="some-classname"
onDecode={handleDecode}
onScannerLoad={handleScannerLoad}
constraints={{
audio: false,
video: {
facingMode: "environment"
}
}}
captureSize={{ width: 1280, height: 720 }}
/>
);
}

`

$3

Most of the props are identical to the React \ tag (e.g. classname, name, id, event handlers etc).
However, some of them define the decoder behaviour and can be set as follows:

Property | Type | Meaning
---------|------|--------
onDecode | function | a callback which fires when a QR-code is successfully decoded
onScannerLoad | function | a callback which fires when QR-decoding script is successfully loaded
constraints | object | a MediaStreamConstraints object
captureSize | object `{ width: number, height: number }`` | Represents the size of the frame area sensitive for QR-detection

$3

This package is licensed under MIT

$3

I'm also open to new suggestions for improving this package. Contacts: simpleman383@gmail.com