react-webcam-qr-scanner

1.0.8 • Public • Published

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

Package Sidebar

Install

npm i react-webcam-qr-scanner

Weekly Downloads

70

Version

1.0.8

License

MIT

Unpacked Size

44.2 kB

Total Files

10

Last publish

Collaborators

  • simpleman383