https://github.com/xulihang/react-barcode-qrcode-scanner

Barcode and QR Code Scanner Component for React
https://github.com/xulihang/react-barcode-qrcode-scanner

Last synced: about 1 month ago
JSON representation

Barcode and QR Code Scanner Component for React

• Host: GitHub
• URL: https://github.com/xulihang/react-barcode-qrcode-scanner
• Owner: tony-xlh
• Created: 2022-07-13T06:32:32.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-23T06:25:44.000Z (10 months ago)
• Last Synced: 2024-04-13T21:03:59.919Z (6 months ago)
• Language: TypeScript
• Size: 844 KB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-react-components - 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. (UI Components / Audio / Video)
• awesome-react-components - 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. (UI Components / Audio / Video)

README

        
# react-barcode-qrcode-scanner

Barcode and QR Code Scanner Component for React. It uses [react-vision-camera](https://github.com/xulihang/react-vision-camera) to access the camera and [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/) to read barcodes.

[Online demo](https://rainbow-moonbeam-f7ef52.netlify.app/)

### Installation

```

npm install react-barcode-qrcode-scanner

```

### Usage

```jsx

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 (

    


      

      

    

  )

}


```

### 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.

### License

MIT