Socket
Socket
Sign inDemoInstall

react-webcam-qr-scanner

Package Overview
Dependencies
89
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-webcam-qr-scanner

A humble implementation of a real-time QR-code scanner using WebRTC


Version published
Maintainers
1
Weekly downloads
114
decreased by-2.56%

Weekly downloads

Readme

Source

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:

PropertyTypeMeaning
onDecodefunctiona callback which fires when a QR-code is successfully decoded
onScannerLoadfunctiona callback which fires when QR-decoding script is successfully loaded
constraintsobjecta MediaStreamConstraints object
captureSizeobject { 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

Keywords

FAQs

Last updated on 10 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc