Package Exports

react-webcam-qr-scanner

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-webcam-qr-scanner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

npm install react-webcam-qr-scanner

Using Yarn:

yarn add react-webcam-qr-scanner

Usage

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

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 (
    <Scanner 
      className="some-classname"
      onDecode={handleDecode}
      onScannerLoad={handleScannerLoad}
      constraints={{ 
        audio: false, 
        video: { 
          facingMode: "environment" 
        } 
      }}
      captureSize={{ width: 1280, height: 720 }}
    />
  );
}

Props

Most of the props are identical to the React <video> 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

License

This package is licensed under MIT

Feedback

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