importReactfrom'react';import'../dynamsoft.config';// --Change starts// For some reason, import from Dynamsoft does not work. But the library is creating a global// `Dynamsoft` object that has all the library contents.//@ts-ignoreimport"dynamsoft-camera-enhancer";//@ts-ignoreimport"dynamsoft-capture-vision-router";//@ts-ignoreimport"dynamsoft-utility";constDynamsoft=(windowasany).Dynamsoft;constCameraEnhancer=Dynamsoft.DCE.CameraEnhancer;constCameraView=Dynamsoft.DCE.CameraView;constCaptureVisionRouter=Dynamsoft.CVR.CaptureVisionRouter;constMultiFrameResultCrossFilter=Dynamsoft.Utility.MultiFrameResultCrossFilter;// -- Change endconstcomponentDestroyedErrorMsg="VideoCapture Component Destroyed";classVideoCaptureextendsReact.Component<{onSubmit:Function},{}>{cameraViewContainer:React.RefObject<HTMLDivElement>=React.createRef();resolveInit?:()=>void;pInit:Promise<void>=newPromise((r)=>(this.resolveInit=r));isDestroyed=false;cvRouter?:typeofDynamsoft.CVR;cameraEnhancer?:typeofDynamsoft.CE;asynccomponentDidMount(){try{// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.constcameraView=awaitCameraView.createInstance();if(this.isDestroyed){throwError(componentDestroyedErrorMsg);}// Check if component is destroyed after every asyncthis.cameraEnhancer=awaitCameraEnhancer.createInstance(cameraView);if(this.isDestroyed){throwError(componentDestroyedErrorMsg);}// Get default UI and append it to DOM.this.cameraViewContainer.current!.append(cameraView.getUIElement());// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.this.cvRouter=awaitCaptureVisionRouter.createInstance();if(this.isDestroyed){throwError(componentDestroyedErrorMsg);}this.cvRouter.setInput(this.cameraEnhancer);// Define a callback for results.this.cvRouter.addResultReceiver({onDecodedBarcodesReceived:(result:any)=>{if(!result.barcodeResultItems.length)return;for(letitemofresult.barcodeResultItems){this.props.onSubmit(item.text);}},});// Filter out unchecked and duplicate results.constfilter=newMultiFrameResultCrossFilter();// Filter out unchecked barcodes.filter.enableResultCrossVerification("barcode",true);// Filter out duplicate barcodes within 3 seconds.filter.enableResultDeduplication("barcode",true);awaitthis.cvRouter.addResultFilter(filter);if(this.isDestroyed){throwError(componentDestroyedErrorMsg);}// Open camera and start scanning single barcode.awaitthis.cameraEnhancer.open();if(this.isDestroyed){throwError(componentDestroyedErrorMsg);}awaitthis.cvRouter.startCapturing("ReadSingleBarcode");if(this.isDestroyed){throwError(componentDestroyedErrorMsg);}}catch(ex:any){if((exasError)?.message===componentDestroyedErrorMsg){console.log(componentDestroyedErrorMsg);}else{leterrMsg=ex.message||ex;console.error(errMsg);console.log("ERROR HERE");console.log(ex);alert(errMsg);}}// Resolve pInit promise once initialization is complete.this.resolveInit!();}asynccomponentWillUnmount(){this.isDestroyed=true;try{// Wait for the pInit to complete before disposing resources.awaitthis.pInit;this.cvRouter?.dispose();this.cameraEnhancer?.dispose();}catch(_){}}shouldComponentUpdate(){// Never update UI after mount, sdk use native way to bind event, update will remove it.returnfalse;}render(){return(<divref={this.cameraViewContainer}style={{width:"100%",height:"70vh"}}></div>);}}exportdefaultVideoCapture;

import{useState}from'react';importVideoCapturefrom"./VideoCapture";constQRCodeReader=(props)=>{const[errors,setErrors]=useState(null);constonSubmit=async(param)=>{try{constisUpdated=awaitprops.onSubmit(param);if(isUpdated){setErrors(null);}}catch(error){setErrors(error);}}return(<div><VideoCaptureonSubmit={onSubmit}/>{errors}</div>);}exportdefaultQRCodeReader;

importReact,{useEffect,useState}from'react';importPropTypesfrom'prop-types';importModalfrom'Modal';importQRCodeReaderfrom'./QRCodeReader';/** * Widget to access a profile using a QR code * *@param {object} props - React props * *@return {ReactDOM} */constQRModal=(props)=>{const[code,setCode]=useState(null);useEffect(()=>{},[]);return(<ModalonClose={()=>{props.onClose();}}show={true}title={props.modalTitle}><QRCodeReaderonSubmit={(c)=>{if(c===code)return;setCode(c);props.onScan(c);}}/></Modal>);}QRModal.defaultProps={modalTitle:'Scan QR Code',};QRModal.propTypes={modalTitle:PropTypes.string,};exportdefaultQRModal;