React component for reading QR codes from webcam

React component for reading QR codes from webcam

React component for reading QR codes from the webcam. It uses the WebRTC standards for reading webcam data and jsQR is used for detecting QR codes in that data. To optimise the speed and experience, a web-worker is used to offload the heavy QR code algorithm on a separate process.

Introduction

A React component for reading QR codes from the webcam. It uses the WebRTC standards for reading webcam data and jsQR is used for detecting QR codes in that data. To optimise the speed and experience, a web-worker is used to offload the heavy QR code algorithm on a separate process. The web worker is inlined and loaded on creation of the component.

Known Issues

  • Server side rendering won't work so only require the component when rendering in a browser environment.
  • Due to browser implementations the camera can only be accessed over https or localhost.
  • In Firefox a prompt will be shown to the user asking which camera to use, so facingMode will not affect it.
  • On IOS 11 it is only supported on Safari and not on Chrome or Firefox due to Apple making the API not available to 3rd party browsers.

Install

npm install --save react-qr-reader

Example

import React, { Component } from 'react'
import QrReader from 'react-qr-reader'

class Test extends Component {
  state = {
    result: 'No result'
  }

  handleScan = data => {
    if (data) {
      this.setState({
        result: data
      })
    }
  }
  handleError = err => {
    console.error(err)
  }
  render() {
    return (
      <div>
        <QrReader
          delay={300}
          onError={this.handleError}
          onScan={this.handleScan}
          style={{ width: '100%' }}
        />
        <p>{this.state.result}</p>
      </div>
    )
  }
}

Props

Events

Prop Argument Description
onScan result Scan event handler. Called every scan with the decoded value or null if no QR code was found.
onError Error Called when an error occurs.
onLoad object Called when the component is ready for use. Object properties are mirrorVideo: boolean, streamLabel: string
onImageLoad img onLoad event Called when the image in legacyMode is loaded.

Options

Prop Type Default Description
delay number or false 500 The delay between scans in milliseconds. To disable the interval pass in false.
facingMode user or environment environment Specify which camera should be used (if available).
resolution number 600 The resolution of the video (or image in legacyMode). Larger resolution will increase the accuracy but it will also slow down the processing time.
style a valid React style none Styling for the container element. Warning The preview will always keep its 1:1 aspect ratio.
className string none ClassName for the container element.
showViewFinder boolean true Show or hide the build in view finder. See demo
constraints object null Use custom camera constraints that the override default behavior. MediaTrackConstraints
legacyMode boolean false If the device does not allow camera access (e.g. IOS Browsers, Safari) you can enable legacyMode to allow the user to take a picture (On a mobile device) or use an existing one. To trigger the image dialog just call the method openImageDialog from the parent component. Warning You must call the method from a user action (eg. click event on some element).

Dev

Install dependencies

npm install

Build

npm run build

Demo

npm run storybook

Linting

npm run lint

Tested platforms

  • Chrome macOs & Android
  • Firefox macOs & Android
  • Safari macOs & IOS

Download Details:

Author: JodusNodus

Live Demo: https://jodusnodus.github.io/react-qr-reader

GitHub: https://github.com/JodusNodus/react-qr-reader

reactjs javascript react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Setup React Router v5 using React Hooks

React Router library makes the navigation experience of the client in your web page application more joyful, but how?! React Router, indeed, prevent the page from being refreshed. Thus the blank page resulted from a refreshed page is not...

React Hooks: useState - Part 2

React Hooks: useState. In this blog, we are going to discuss the useState hook in detail. As this hook let us use state without writing a class. This hook is the equivalent of this.state/this.setState for functional components.

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour. The quick guide to learn basic concepts and workflow of how to build React App. In this course you will learn React in 1 hour. You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more.

React Slider: How to Build an Image Slider With React Hooks

React Slider: How to Build an Image Slider With React Hooks. Creation of all the components necessary to display an array of content, as well as the ability to navigate back and forth to each slide in our slider. Adding an autoplay feature. We will dive deeper into React Hooks and optimize the slider both for performance and visual appeal. We will achieve this by tapping into useEffect and some new memoization helpers.

Hire Dedicated React.JS Developer

Are you looking to Hire ReactJS Developers to build a web app solution with faster rendering performance? **[Hire Dedicated React.JS Developer](https://hourlydeveloper.io/hire-dedicated-react-js-developer/ "Hire Dedicated React.JS Developer")**...