@thewirv/react-barcode-scanner
Version:
A React component for scanning QR codes and other barcodes via webcam
2 lines (1 loc) • 4.21 kB
JavaScript
;var e=require("react/jsx-runtime"),r=require("react"),n=require("@zxing/browser"),t=require("react-icons/fi"),o=require("@zxing/library"),i=function(){return i=Object.assign||function(e){for(var r,n=1,t=arguments.length;n<t;n++)for(var o in r=arguments[n])({}).hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},i.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var a={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}},c=function(c){var s=c.doScan,u=void 0===s||s,l=c.constraints,d=void 0===l?{facingMode:"environment"}:l,f=c.onSuccess,p=c.onError,v=c.onLoad,b=c.Viewfinder,h=c.containerStyle,y=c.videoContainerStyle,S=c.videoStyle,w=c.videoProps,g=r.useState(!1),x=g[0],m=g[1],E=r.useMemo((function(){return new n.BrowserMultiFormatReader}),[]),j=r.useRef(null),k=!x||!u;r.useEffect((function(){if(u&&f&&p){if(!(null===navigator||void 0===navigator?void 0:navigator.mediaDevices)){var e='Your browser has no support for the MediaDevices API. You could fix this by running "npm i webrtc-adapter"';return console.warn("[ReactBarcodeScanner]: ".concat(e)),void p(Error(e))}!function(e,r,n){var t,i,a,c;t=this,i=arguments,c=function(e,r,n){var t,i,a=n.constraints,c=n.onSuccess,s=n.onError;return function(e,r){var n,t,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(s){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(a=0)),a;)try{if(n=1,t&&(o=2&c[0]?t.return:c[0]?t.throw||((o=t.return)&&o.call(t),0):t.next)&&!(o=o.call(t,c[1])).done)return o;switch(t=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,t=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){a=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){a.label=c[1];break}if(6===c[0]&&a.label<o[1]){a.label=o[1],o=c;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(c);break}o[2]&&a.ops.pop(),a.trys.pop();continue}c=r.call(e,a)}catch(e){c=[6,e],t=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,s])}}}(this,(function(n){switch(n.label){case 0:if(!r.current)return[2];n.label=1;case 1:return n.trys.push([1,3,,4]),[4,e.decodeOnceFromConstraints({audio:!1,video:a,preferCurrentTab:!0},r.current)];case 2:return t=n.sent(),c(t.getText()),[3,4];case 3:return(i=n.sent())&&s&&!(i instanceof o.NotFoundException||i instanceof o.ChecksumException||i instanceof o.FormatException)&&s(i),[3,4];case 4:return[2]}}))},new((a=void 0)||(a=Promise))((function(e,r){function n(e){try{s(c.next(e))}catch(e){r(e)}}function o(e){try{s(c.throw(e))}catch(e){r(e)}}function s(r){var t;r.done?e(r.value):(t=r.value,t instanceof a?t:new a((function(e){e(t)}))).then(n,o)}s((c=c.apply(t,i||[])).next())}))}(E,j,{constraints:d,onSuccess:f,onError:p})}}),[f,p,u,E,d]);var M=r.useMemo((function(){var e,r={playsInline:!0,disablePictureInPicture:!0,muted:!0,onLoadedData:function(e){var r=e.nativeEvent.target;(null==r?void 0:r.readyState)&&r.readyState===r.HAVE_ENOUGH_DATA&&(m(!0),v&&v())},style:i(i(i({},a.video),S),{transform:"".concat(null!==(e=null==S?void 0:S.transform)&&void 0!==e?e:""," ").concat("user"===d.facingMode?"scaleX(-1)":"")})};return w?"function"!=typeof w?w:w(r):r}),[w,v]);return e.jsxs("section",{style:h,children:[k&&e.jsx("div",{style:a.barcodeScannerError,children:e.jsx(t.FiCameraOff,{size:300,style:a.barcodeScannerErrorSvg})}),e.jsxs("div",{style:i(i(i({},a.container),k?{}:a.barcodeScannerVisible),y),children:[e.jsx("video",i({ref:j},M)),!!b&&e.jsx(b,{})]})]})};c.displayName="BarcodeScanner",exports.BarcodeScanner=c;