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

$3

``
npm install react-barcode-qrcode-scanner
`

$3

`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 (


`

$3

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.

$3

MIT