updated React App

Author: jmoonacuant

ReactApp/package-lock.json

@@ -1,9 +1,11 @@
 import {configReducer} from "./screens/reducers/configReducer";
 import {processedDataReducer} from "./screens/reducers/processedDataReducer";
 import {idPropertiesReducer} from "./screens/reducers/idPropertiesReducer";
+import {capturedReducer} from "./screens/reducers/capturedReducer";
 
 export default {
     config: configReducer,
     processedData: processedDataReducer,
-    idProperties: idPropertiesReducer
+    idProperties: idPropertiesReducer,
+    captureProperties: capturedReducer
 }

ReactApp/public/AcuantImageProcessingService.js.mem

@@ -1,39 +1,99 @@
 import React, { Component } from 'react';
-import {connect} from "react-redux";
+import { connect } from "react-redux";
+import Processing from "./Processing";
+import {setCaptured} from "./actions/capturedActions";
+import {bindActionCreators} from "redux";
 
 class AcuantReactCamera extends Component {
-    constructor(props){
-        super(props);
-        this.detectedCount = 0;
+  constructor(props) {
+    super(props);
+    this.detectedCount = 0;
+    this.state = {
+      processing: false
     }
-    componentDidMount() {
-        if(window.AcuantCameraUI){
-            window.AcuantCameraUI.start((response) => {
-              this.props.history.push('/photo/confirm', {
-                blurry: response.sharpness < 50,
-                hasGlare: response.glare < 50,
-                cardImage: response.image.data
-              });           
-            }, (error) => {
-                console.log("error occured", error);
-            });
-        }
+  }
+
+  setProcessing(value) {
+    this.setState({
+      processing: value
+    })
+  }
+
+  onCaptured(response) {
+    //document captured
+    //this is not the final result of processed image
+    //show a loading screen until onCropped is called
+    this.setProcessing(true);
+  }
+
+  onCropped(response) {
+    this.setProcessing(false);
+    if (response) {
+      //use response
+      this.props.setCaptured(response);
+      this.props.history.push('/photo/confirm')
     }
+    else {
+      //cropping error
+      //restart capture
+      this.startCamera()
+    }
+  }
+
+  onFrameAvailable(response) {
+
+  }
 
-    componentWillUnmount(){
-      window.AcuantCameraUI.end();
+  startCamera(){
+    if (window.AcuantCameraUI) {
+      if (window.AcuantCamera.isCameraSupported) {
+        window.AcuantCameraUI.start({
+          onCaptured: this.onCaptured.bind(this), 
+          onCropped: this.onCropped.bind(this), 
+          onFrameAvailable: this.onFrameAvailable.bind(this)
+        }, this.onError.bind(this));
+      }
+      else {
+        window.AcuantCamera.startManualCapture({
+          onCaptured: this.onCaptured.bind(this), 
+          onCropped: this.onCropped.bind(this)
+        }, this.onError.bind(this));
+      }
     }
+  }
 
-    render() {
-      return(
+  onError(err){
+    window.AcuantCamera.isCameraSupported = false
+    alert("This device does not support Live Capture. Manual Capture will be started. Please try again.")
+    this.props.history.replace("/capture/photo")
+  }
+
+  componentDidMount() {
+    this.startCamera()
+  }
+  componentWillUnmount() {
+  }
+
+  render() {
+    if (this.state.processing) {
+      return <Processing />
+    }
+    else {
+      return (
         <div>
-            <video id="acuant-player" controls autoPlay playsInline style={{display:'none' }}></video>
-            <div style={{ textAlign:'center' }}>
-                <canvas id="acuant-video-canvas" width="100%" height="auto"></canvas>
-            </div>
+          <video id="acuant-player" controls autoPlay playsInline style={{ display: 'none' }}></video>
+          <div style={{ textAlign: 'center' }}>
+            <canvas id="acuant-video-canvas" width="100%" height="auto"></canvas>
+          </div>
         </div>
       )
     }
+
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ setCaptured }, dispatch);
 }
 
-export default connect()(AcuantReactCamera);
+export default connect(null, mapDispatchToProps)(AcuantReactCamera);

ReactApp/public/AcuantImageProcessingService.wasm

@@ -16,22 +16,18 @@ class ProcessedImageResult extends Component {
     }
 
     proceedToNextStep() {
-        let processedData = this.props.location.state;
-
-        this.sendImageToAPI(this.dataURLToBlob(processedData.cardImage));
+        this.sendImageToAPI(this.dataURLToBlob(this.props.cardImage));
     }
 
     processClassification(classificationData) {
-        let processedData = this.props.location.state;
-        processedData.classificationData = classificationData;
         this.setProcessing(false);
 
-        if (processedData.classificationData && processedData.classificationData.PresentationChanged) {
+        if (classificationData && classificationData.PresentationChanged) {
             this.props.setCardOrientation(0);
         } else {
             this.props.setCardOrientation(1);
         }
-        if (processedData.classificationData && processedData.classificationData.Type.Size !== 3 || this.props.cardType === 2) {
+        if (classificationData && classificationData.Type.Size !== 3 || this.props.cardType === 2) {
             this.props.decrementSidesLeft();
 
             if (this.props.sidesLeft === 1) {
@@ -135,15 +131,13 @@ class ProcessedImageResult extends Component {
     }
 
     renderTitleText() {
-        let processedData = this.props.location.state;
-        if (processedData.blurry) return "Image appears blurry. Please retry.";
-        if (processedData.hasGlare) return "Image has glare. Please retry.";
+        if (this.props.blurry) return "Image appears blurry. Please retry.";
+        if (this.props.hasGlare) return "Image has glare. Please retry.";
         return "Ensure all texts are visible."
     }
 
 
     render() {
-        let processedData = this.props.location.state;
         if (this.state.processing) {
             return <Processing />
         }
@@ -154,31 +148,30 @@ class ProcessedImageResult extends Component {
 
                 <div className='body column capture_photo'>
 
-                    {processedData.blurry &&
+                    {this.props.blurry &&
 
                         <div className='column description_container'>
                             <img alt='idscango' className='icon' src={require('../assets/images/icon_attention@2x.png')} />
                             <p className={'description error'}>{this.renderTitleText()}</p>
                         </div>
-
                     }
 
                     <div className='row wrapper description_container'>
-                        {!processedData.blurry && <p className={'description'}>{this.renderTitleText()}</p>}
+                        {!this.props.blurry && <p className={'description'}>{this.renderTitleText()}</p>}
                     </div>
 
                     <div className="capture_group">
 
                         <div className='row wrapper capture_container'>
-                            {processedData.cardImage && <img alt={'idscango'} src={processedData.cardImage} className='capture'/>}
+                            {this.props.cardImage && <img alt={'idscango'} src={this.props.cardImage} className='capture'/>}
                         </div>
 
                         <div className="wrapper column capture_controls">
 
                             <a className={'btn'} onClick={() => this.proceedToNextStep()}>
                                 <p className={'buttonBgText'}>Continue with this image</p>
                             </a>
-                            {!processedData.orientation && <div className={'btn outline'} onClick={() => this.retryPhoto()}>
+                            {<div className={'btn outline'} onClick={() => this.retryPhoto()}>
                                 <p className={'buttonBdText'}>Retry</p>
                             </div>}
 
@@ -200,7 +193,10 @@ function mapStateToProps(state) {
         cardType: state.idProperties.cardType,
         sidesLeft: state.idProperties.sidesLeft,
         frontSubmitted: state.config.frontSubmitted,
-        backSubmitted: state.config.backSubmitted
+        backSubmitted: state.config.backSubmitted,
+        cardImage: state.captureProperties.image.data,
+        blurry: state.captureProperties.sharpness < 50,
+        hasGlare: state.captureProperties.glare < 50
     };
 }
 

ReactApp/public/AcuantImageProcessingWorker.min.js

@@ -0,0 +1,8 @@
+
+export function setCaptured(payload) {
+    return {
+        type: "@@acuant/ADD_CAPTURED_IMAGE",
+        data: payload
+
+    }
+}