React Code Scanner
A react component to scan bar codes and qr codes, it uses the zbar.wasm library in a web worker.
This uses hooks, so needs React >= 16.8
Install
npm i react-code-scanner
Usage
const result setResult = ;const facingMode setFacingMode = ; return <div ="App"> <h1>Code Scanner</h1> <div>Result: result</div> <div> <button =>reset</button> </div> <div> <button = > current camera: facingMode switch camera </button> </div> <CodeScanner = = = /> </div>;
Props
name | default | meaning |
---|---|---|
width | 400 | the width in px of the camera view |
height | 300 | the heigth in px of the camera view |
onResult | console.log | the callback that is invoked when a code is decoded |
onError | console.error | the callback that is invoked when an error occours |
maxVideoWidth | 640 | the width in px of the image taken from the camera and passed to the scanner |
maxVideoHeight | 640 | the width in px of the image taken from the camera and passed to the scanner |
facingMode | 'environment' | this prop is used by devices with a back and a front camera and takes 2 values: 'environment' to use the back camera and 'user' to use the front camera |
codeOverlayColor | '#00ff00' | the color of the code overlay that is dispalyed when a code is recognized |
codeIndexColor | '#ff0000' | the color of the progressivo code id that is dispalyed when a code is recognized |
mirrorUserImage | true | if true the component will mirror the image when using the front camera |