@thewirv/react-barcode-scanner/dist/index.min.js

A React component for scanning QR codes and other barcodes via webcam

import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useMemo as n,useRef as i,useEffect as t}from"react";import{BrowserMultiFormatReader as a}from"@zxing/browser";import{FiCameraOff as c}from"react-icons/fi";import{NotFoundException as s,ChecksumException as d,FormatException as l}from"@zxing/library";const p={barcodeScannerError:{border:"8px #eee solid",borderRadius:"10px",padding:"2rem"},barcodeScannerErrorSvg:{width:"75%",height:"75%",display:"block",opacity:.2,margin:"0 auto"},container:{width:"100%",paddingTop:"100%",overflow:"hidden",position:"relative",display:"none"},barcodeScannerVisible:{display:"block"},video:{top:0,left:0,width:"100%",height:"100%",display:"block",overflow:"hidden",position:"absolute",transform:void 0}},f=({doScan:f=!0,constraints:u={facingMode:"environment"},onSuccess:m,onError:v,onLoad:y,Viewfinder:b,containerStyle:S,videoContainerStyle:h,videoStyle:g,videoProps:w})=>{const[E,x]=o(!1),A=n((()=>new a),[]),D=i(null),P=!E||!f;t((()=>{if(f&&m&&v){if(!navigator?.mediaDevices){const e='Your browser has no support for the MediaDevices API. You could fix this by running "npm i webrtc-adapter"';return console.warn("[ReactBarcodeScanner]: "+e),void v(Error(e))}(async(e,r,{constraints:o,onSuccess:n,onError:i})=>{if(r.current)try{n((await e.decodeOnceFromConstraints({audio:!1,video:o,preferCurrentTab:!0},r.current)).getText())}catch(e){e&&i&&!(e instanceof s||e instanceof d||e instanceof l)&&i(e)}})(A,D,{constraints:u,onSuccess:m,onError:v})}}),[m,v,f,A,u]);const T=n((()=>{const e={playsInline:!0,disablePictureInPicture:!0,muted:!0,onLoadedData:({nativeEvent:e})=>{const r=e.target;r?.readyState&&r.readyState===r.HAVE_ENOUGH_DATA&&(x(!0),y&&y())},style:{...p.video,...g,transform:`${g?.transform??""} ${"user"===u.facingMode?"scaleX(-1)":""}`}};return w?"function"!=typeof w?w:w(e):e}),[w,y]);return e("section",{style:S,children:[P&&r("div",{style:p.barcodeScannerError,children:r(c,{size:300,style:p.barcodeScannerErrorSvg})}),e("div",{style:{...p.container,...P?{}:p.barcodeScannerVisible,...h},children:[r("video",{ref:D,...T}),!!b&&r(b,{})]})]})};f.displayName="BarcodeScanner";export{f as BarcodeScanner};