You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi , Im using this package in react , barcode reader work perfectly in some phones and does'nt work in others
this is my code on a useBarcode hook :
import{useEffect,useState}from'react';import{BarcodeReader}from'./barcodeClass';importtypeWebcamfrom'react-webcam';interfaceuseBarcodeData{webcamRef: React.RefObject<Webcam>;scannerOpen: boolean;}exportconstuseBarcode=(props: useBarcodeData)=>{const[barcodeReader,setBarcodeReader]=useState<BarcodeReader|null>(null);const[barcodeData,setBarcodeData]=useState('Not Found');// Initialize BarcodeReader on component mountuseEffect(()=>{constsetupBarcodeReader=async()=>{constresult=awaitBarcodeReader.setup();if(result.barcodeReaderError){console.error(result.barcodeReaderError);}else{constreader=awaitBarcodeReader.create(['qr_code','ean_13','code_128']);setBarcodeReader(reader);}};voidsetupBarcodeReader();},[]);consthandleScanBarcode=async()=>{if(props.webcamRef.current&&barcodeReader){constimageSrc=props.webcamRef.current.getScreenshot();if(imageSrc){try{constimage=newImage();image.src=imageSrc;image.onload=async()=>{try{constbarcode=awaitbarcodeReader.detect(image);setBarcodeData(barcode.rawValue);}catch(error){console.error('Error detecting barcode:',error);}};}catch(error){console.error('Error processing image for barcode detection:',error);}}}};letinterval: NodeJS.Timeout|null=null;if(props.scannerOpen){interval=setInterval(async()=>{awaithandleScanBarcode();},500);}elseif(interval&&!props.scannerOpen){{clearInterval(interval);}}return{ barcodeData };};
And this is BarcodeReader class :
/* eslint-disable @typescript-eslint/member-ordering */// utils/barcodeReader.tsinterfaceBarcodeDetection{rawValue: string;format: string;boundingBox: DOMRect;cornerPoints: Array<{x: number;y: number}>;}constWHITELISTED_FORMATS=['aztec','code_128','code_39','code_93','codabar','data_matrix','ean_13','ean_8','itf','pdf417','qr_code','upc_a','upc_e',];classBarcodeReader{// eslint-disable-next-line @typescript-eslint/class-literal-property-styleprivatereadonlybarcodeReader: BarcodeDetector|null=null;staticasyncpolyfill(){if(!('BarcodeDetector'inwindow)){try{awaitimport('barcode-detector');console.log('Using BarcodeDetector polyfill.');}catch(error){thrownewError('BarcodeDetector API is not supported by your browser.',{cause: error});}}else{console.log('Using the native BarcodeDetector API.');}}staticasyncgetSupportedFormats(){constnativeSupportedFormats=(awaitwindow.BarcodeDetector.getSupportedFormats())||[];// @ts-expect-error - TS doesn't know about the WHITELISTED_FORMATS constantreturnWHITELISTED_FORMATS.filter((format)=>nativeSupportedFormats.includes(format));}staticasynccreate(supportedFormats: string[]): Promise<BarcodeReader>{constisValidFormats=Array.isArray(supportedFormats)&&supportedFormats.length>0;constformats=isValidFormats ? supportedFormats : awaitBarcodeReader.getSupportedFormats();// @ts-expect-error - TS doesn't know about the WHITELISTED_FORMATS constantreturnnewBarcodeReader(formats);}staticasyncsetup(){try{awaitBarcodeReader.polyfill();return{barcodeReaderError: null};}catch(error){return{barcodeReaderError: error};}}constructor(formats: BarcodeDetectorOptions['formats']){this.barcodeReader=newwindow.BarcodeDetector({ formats });}asyncdetect(source: HTMLImageElement|HTMLVideoElement|ImageBitmap): Promise<BarcodeDetection>{if(!this.barcodeReader){thrownewError('BarcodeReader is not initialized.');}constresults=awaitthis.barcodeReader.detect(source);if(Array.isArray(results)&&results.length>0){constfirstResult=results[0];console.log({rawValue: firstResult.rawValue,format: firstResult.format});returnfirstResult;}else{thrownewError('Could not detect barcode from provided source.');}}}export{BarcodeReader};
The text was updated successfully, but these errors were encountered:
Hi , Im using this package in react , barcode reader work perfectly in some phones and does'nt work in others
this is my code on a useBarcode hook :
And this is BarcodeReader class :
The text was updated successfully, but these errors were encountered: