UNPKG

@thewirv/react-barcode-scanner

Version:

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

2 lines (1 loc) 2.75 kB
"use strict";var e=require("react/jsx-runtime"),n=require("react"),r=require("react-icons/fi"),o=require("@zxing/browser"),i=require("@zxing/library");const t={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}};function a({doScan:a=!0,constraints:s={facingMode:"environment"},onSuccess:c,onError:d,onLoad:u,Viewfinder:l,containerStyle:f,videoContainerStyle:v,videoStyle:p,videoProps:b}){const[y,g]=n.useState(!1),S=n.useMemo((()=>new o.BrowserMultiFormatReader),[]),h=n.useRef(null),m=!y||!a;n.useEffect((()=>{if(a){if(!(null===navigator||void 0===navigator?void 0: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 d(Error(e))}!function(e,n,r){var o,t,a,s;o=this,t=arguments,s=function*(e,n,{constraints:r,onSuccess:o,onError:t}){if(n.current)try{o((yield e.decodeOnceFromConstraints({audio:!1,video:r,preferCurrentTab:!0},n.current)).getText())}catch(e){e&&!(e instanceof i.NotFoundException||e instanceof i.ChecksumException||e instanceof i.FormatException)&&t(e)}},new((a=void 0)||(a=Promise))((function(e,n){function r(e){try{c(s.next(e))}catch(e){n(e)}}function i(e){try{c(s.throw(e))}catch(e){n(e)}}function c(n){var o;n.done?e(n.value):(o=n.value,o instanceof a?o:new a((function(e){e(o)}))).then(r,i)}c((s=s.apply(o,t||[])).next())}))}(S,h,{constraints:s,onSuccess:c,onError:d})}}),[c,d,a,S,s]);const x=n.useMemo((()=>{var e;const n={playsInline:!0,disablePictureInPicture:!0,muted:!0,onLoadedData:({nativeEvent:e})=>{const n=e.target;(null==n?void 0:n.readyState)&&n.readyState===n.HAVE_ENOUGH_DATA&&(g(!0),null==u||u())},style:Object.assign(Object.assign(Object.assign({},t.video),p),{transform:`${null!==(e=null==p?void 0:p.transform)&&void 0!==e?e:""} ${"user"===s.facingMode?"scaleX(-1)":""}`})};return b?"function"!=typeof b?b:b(n):n}),[s.facingMode,u,b,p]);return e.jsxs("section",{style:f,children:[m&&e.jsx("div",{style:t.barcodeScannerError,children:e.jsx(r.FiCameraOff,{size:300,style:t.barcodeScannerErrorSvg})}),e.jsxs("div",{style:Object.assign(Object.assign(Object.assign({},t.container),m?{}:t.barcodeScannerVisible),v),children:[e.jsx("video",Object.assign({ref:h},x)),!!l&&e.jsx(l,{})]})]})}"function"==typeof SuppressedError&&SuppressedError,a.displayName="BarcodeScanner",exports.BarcodeScanner=a;