react-barcode-qrcode-scanner

Barcode and QR Code Scanner Component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.

Online demo

Installation

npm install react-barcode-qrcode-scanner

Usage

import { BarcodeScanner } from "react-barcode-qrcode-scanner";
import { TextResult } from "dynamsoft-javascript-barcode";

function App() {
  const [isActive,setIsActive] = React.useState(true); //whether the camera is active
  const [isPause,setIsPause] = React.useState(false); //whether the video is paused
  const [runtimeSettings,setRuntimeSettings] = React.useState("{\"ImageParameter\":{\"BarcodeFormatIds\":[\"BF_QR_CODE\"],\"Description\":\"\",\"Name\":\"Settings\"},\"Version\":\"3.0\"}"); //use JSON template to decode QR codes only
  const onOpened = (cam:HTMLVideoElement,camLabel:string) => { // You can access the video element in the onOpened event
    console.log("opened"); 
  }

  const onClosed = () => {
    console.log("closed");
  }
  
  const onDeviceListLoaded = (devices:MediaDeviceInfo[]) => {
    console.log(devices);
  }
  
  const onScanned = (results:TextResult[]) => { // barcode results
    console.log(results);
  }
  
  const onClicked = (result:TextResult) => { // when a barcode overlay is clicked
    alert(result.barcodeText);
  }

  const onInitialized = () => { // when the Barcode Reader is initialized
    setInitialized(true);
  }
  
  return (
    <div>
      <BarcodeScanner 
        isActive={isActive}
        isPause={isPause}
        license="license key for Dynamsoft Barcode Reader"
        drawOverlay={true}
        desiredCamera="back"
        desiredResolution={{width:1280,height:720}}
        runtimeSettings={runtimeSettings}
        onScanned={onScanned}
        onClicked={onClicked}
        onOpened={onOpened}
        onClosed={onClosed}
        onInitialized={onInitialized}
        onDeviceListLoaded={onDeviceListLoaded}
      >
      </BarcodeScanner>
    </div>
  )
}

FAQ

How to specify which camera to use?

1. Use the desiredCamera prop. If one of the camera's name contains it, then it will be used. You can get the devices list in the onDeviceListLoaded event.
2. Use the facingMode prop. Set it to environment to use the back camera. Set it to user to use the front camera. Please note that this is not supported on Desktop.

You can use the two props together. facingMode has a higher priority.

Blog

How to Create a React Barcode and QR Code Scanning Library

License

MIT