idmission-web-sdk 1.0.13 → 1.0.15

package/dist/components/fallback_flows/SelfieCapture.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
+import { LoaderButtonColors } from '../common/LoaderButton';
+export type SelfieCaptureFallbackColors = {
+    captureBtn?: LoaderButtonColors;
+    doneBtn?: LoaderButtonColors;
+};
+export type SelfieCaptureFallbackVerbiage = {
+    headingText?: CustomerSuppliedVerbiage;
+    descriptionText?: CustomerSuppliedVerbiage;
+    captureBtnText?: CustomerSuppliedVerbiage;
+    doneBtnText?: CustomerSuppliedVerbiage;
+    doneBtnLoadingText?: CustomerSuppliedVerbiage;
+};
+export type SelfieCaptureFallbackProps = {
+    onFinished?: (imageData: string) => void;
+    onCapture?: (imageData: string) => void;
+    colors?: SelfieCaptureFallbackColors;
+    verbiage?: SelfieCaptureFallbackVerbiage;
+};
+export declare const SelfieCaptureFallback: ({ onFinished, onCapture, colors, verbiage: rawVerbiage, }: SelfieCaptureFallbackProps) => ReactElement;

package/dist/components/id_capture/IdCapture.d.ts

@@ -12,12 +12,20 @@ export type IdCaptureAssets = {
 export type IdCaptureColors = {
     guideBoxUnsatisfiedColor?: string;
     guideBoxSatisfiedColor?: string;
+    guidanceMessagesSatisfiedBackgroundColor?: string;
+    guidanceMessagesUnsatisfiedBackgroundColor?: string;
+    guidanceMessagesSatisfiedTextColor?: string;
+    guidanceMessagesUnsatisfiedTextColor?: string;
 };
 export type IdCaptureVerbiage = {
     instructionText?: CustomerSuppliedVerbiage;
     processingIdCardText?: CustomerSuppliedVerbiage;
     capturingText?: CustomerSuppliedVerbiage;
     captureFailedText?: CustomerSuppliedVerbiage;
+    guidanceSatisfiedText?: CustomerSuppliedVerbiage;
+    guidanceTooBlurryText?: CustomerSuppliedVerbiage;
+    guidanceNotCenteredText?: CustomerSuppliedVerbiage;
+    guidanceNotDetectedText?: CustomerSuppliedVerbiage;
 };
 export type IdCaptureProps = {
     requiredDocumentType?: DocumentType;
@@ -31,6 +39,8 @@ export type IdCaptureProps = {
     barcodeScanningEnabled?: boolean;
     maxBarcodeScanAttempts?: number;
     focusScoreThreshold?: number;
+    guidanceMessage?: string;
+    guidanceSatisfied?: boolean;
     onPrediction?: (prediction: IdCapturePrediction) => void;
     onBarcodeScanned?: (result: PDF417DetectionResult) => void;
     onCapture?: (frame: string, width: number, height: number, metadata: CaptureAttemptMetadata) => void;
@@ -42,4 +52,4 @@ export type IdCaptureProps = {
     verbiage?: IdCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, assets, colors, verbiage: rawVerbiage, debugMode, }: IdCaptureProps) => React.ReactElement;
+export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, guidanceMessage, guidanceSatisfied, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, assets, colors, verbiage: rawVerbiage, debugMode, }: IdCaptureProps) => React.ReactElement;

package/dist/components/id_capture/IdCaptureWizard.d.ts

@@ -3,6 +3,7 @@ import { IdCaptureAssets, IdCaptureColors, IdCaptureVerbiage } from './IdCapture
 import { IdCaptureLoadingOverlayAssets, IdCaptureLoadingOverlayColors, IdCaptureLoadingOverlayVerbiage } from './IdCaptureLoadingOverlay';
 import { FlipIdPromptAssets, FlipIdPromptVerbiage } from './FlipIdPrompt';
 import { IdCaptureSuccessColors, IdCaptureSuccessVerbiage } from './IdCaptureSuccess';
+import { IdCaptureFallbackColors, IdCaptureFallbackVerbiage } from '../fallback_flows/IdCapture';
 export type IdCaptureWizardAssets = {
     documentDetectionModelUrl?: string;
     focusModelUrl?: string;
@@ -15,6 +16,7 @@ export type IdCaptureWizardAssets = {
 export type IdCaptureWizardColors = IdCaptureColors & {
     loadingOverlay?: IdCaptureLoadingOverlayColors;
     success?: IdCaptureSuccessColors;
+    fallback?: IdCaptureFallbackColors;
 };
 export type IdCaptureWizardVerbiage = {
     loadingOverlay?: IdCaptureLoadingOverlayVerbiage;
@@ -23,6 +25,7 @@ export type IdCaptureWizardVerbiage = {
     passport?: IdCaptureVerbiage;
     flipIdPrompt?: FlipIdPromptVerbiage;
     success?: IdCaptureSuccessVerbiage;
+    fallback?: IdCaptureFallbackVerbiage;
 };
 export type IdCaptureSubmission = {
     idFrontImage: string | null;

package/dist/components/selfie_capture/HighPerformanceSelfieGuidanceModelsProvider.d.ts

@@ -25,6 +25,7 @@ type HighPerformanceSelfieGuidanceModelsState = {
     onPredictionMade: (handler: PredictionHandler) => void;
     canvasRef: MutableRefObject<HTMLCanvasElement | null>;
     ready: boolean;
+    error: Error | null;
 };
 export declare const HighPerformanceSelfieGuidanceModelsContext: React.Context<HighPerformanceSelfieGuidanceModelsState>;
 export declare const HighPerformanceSelfieGuidanceModelsProvider: ({ autoStart, children, throttleMs, }: {

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObs
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var webSdkVersion = '1.0.13';
+var webSdkVersion = '1.0.15';
 
 function getPlatform() {
   return window.platform;
@@ -9181,6 +9181,19 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+  var $top = _a.$top;
+  return $top !== null && $top !== void 0 ? $top : '10vh';
+});
+var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
+  var $background = _a.$background;
+  return $background !== null && $background !== void 0 ? $background : '#ccc';
+}, function (_a) {
+  var $textColor = _a.$textColor;
+  return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
+});
+var templateObject_1$3, templateObject_2$1;
+
 var initialState$5 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -9258,6 +9271,7 @@ var reducer$5 = function reducer(state, action) {
       }
       var documentInBounds = false;
       if (bestDocumentOrPassport) {
+        var boundaryPx = 20;
         var _b = bestDocumentOrPassport.bbox,
           boundaryX = _b[0],
           boundaryY = _b[1],
@@ -9267,7 +9281,7 @@ var reducer$5 = function reducer(state, action) {
         boundaryWidth *= frameWidth;
         boundaryY *= frameHeight;
         boundaryHeight *= frameHeight;
-        documentInBounds = boundaryY > 5 && boundaryY + boundaryHeight + 5 < frameHeight && (boundaryX > 5 || boundaryX < 5 && boundaryX + boundaryWidth > frameWidth * 0.8) && boundaryX + boundaryWidth + 5 < frameWidth;
+        documentInBounds = boundaryY > boundaryPx && boundaryY + boundaryHeight + boundaryPx < frameHeight && (boundaryX > boundaryPx || boundaryX < boundaryPx && boundaryX + boundaryWidth > frameWidth * 0.8) && boundaryX + boundaryWidth + boundaryPx < frameWidth;
       }
       var barcodeScanRequired = state.autoCaptureBarcodeRequired === true || state.autoCaptureBarcodeRequired === 'mobile' && isMobile();
       var shouldScanBarcode = state.barcodeScanningEnabled && pdf417DetectionThresholdMet && barcodeScanRequired;
@@ -9368,6 +9382,8 @@ var IdCapture = function IdCapture(_a) {
     barcodeScanningEnabled = _o === void 0 ? true : _o,
     _p = _a.maxBarcodeScanAttempts,
     maxBarcodeScanAttempts = _p === void 0 ? 10 : _p,
+    guidanceMessage = _a.guidanceMessage,
+    guidanceSatisfied = _a.guidanceSatisfied,
     onPrediction = _a.onPrediction,
     onBarcodeScanned = _a.onBarcodeScanned,
     onCapture = _a.onCapture,
@@ -9602,11 +9618,17 @@ var IdCapture = function IdCapture(_a) {
   }, [getBestFrame, onCapture, processingDelay, shouldCapture, state.barcodeResult]);
   colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = 'white');
   colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = 'green');
+  colors.guidanceMessagesSatisfiedBackgroundColor || (colors.guidanceMessagesSatisfiedBackgroundColor = 'green');
+  colors.guidanceMessagesSatisfiedTextColor || (colors.guidanceMessagesSatisfiedTextColor = 'white');
   var verbiage = useTranslations(rawVerbiage, {
     instructionText: 'Scan the front of ID',
     processingIdCardText: 'ID card front captured.',
     capturingText: 'Capturing...',
-    captureFailedText: 'Capture failed!'
+    captureFailedText: 'Capture failed!',
+    guidanceSatisfiedText: 'Document detected, hold still...',
+    guidanceTooBlurryText: 'Document out of focus – try improving the lighting',
+    guidanceNotCenteredText: 'Document is not centered',
+    guidanceNotDetectedText: 'Document not detected'
   });
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
@@ -9615,6 +9637,9 @@ var IdCapture = function IdCapture(_a) {
     videoWidth: state.videoWidth,
     videoHeight: state.videoHeight
   });
+  var satisfied = state.isGoodFrame;
+  if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.documentDetectionThresholdMet ? verbiage.guidanceNotDetectedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : '');
   if (processingFrame) {
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, processingScreen, imageURL && /*#__PURE__*/React__default['default'].createElement(IdCaptureImagePreview, {
       text: verbiage.processingIdCardText,
@@ -9642,7 +9667,12 @@ var IdCapture = function IdCapture(_a) {
     landscapeGuidesImageUrl: assets.landscapeGuidesImageUrl,
     isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
     borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor
-  }), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+  }), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+    "$top": "82.5vh"
+  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": satisfied ? colors.guidanceMessagesSatisfiedBackgroundColor : colors.guidanceMessagesUnsatisfiedBackgroundColor,
+    "$textColor": satisfied ? colors.guidanceMessagesSatisfiedTextColor : colors.guidanceMessagesUnsatisfiedTextColor
+  }, guidanceMessage)), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.isRearFacing)
   }, state.detectedObjects.map(function (obj, i) {
     var _a;
@@ -10083,10 +10113,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$3;
+var templateObject_1$2;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -10451,7 +10481,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
             imageData: imageData
           }
         });
-      }
+      },
+      colors: colors.fallback,
+      verbiage: verbiage.fallback
     });
   }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
@@ -10570,23 +10602,6 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
   }));
 };
 
-var ModelLoadingErrorOverlay = function ModelLoadingErrorOverlay(_a) {
-  var error = _a.error;
-  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
-    style: {
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("h3", {
-    style: {
-      marginBottom: 8
-    }
-  }, "We're sorry, an unexpected error has occurred."), /*#__PURE__*/React__default['default'].createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.message))));
-};
-
 var NUM_KEYPOINTS = 6;
 var GREEN = '#32EEDB';
 var RED = '#FF2C35';
@@ -10663,7 +10678,8 @@ var HighPerformanceSelfieGuidanceModelsContext = /*#__PURE__*/React.createContex
   canvasRef: {
     current: null
   },
-  ready: false
+  ready: false,
+  error: null
 });
 var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfieGuidanceModelsProvider(_a) {
   var _b = _a.autoStart,
@@ -10686,8 +10702,8 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   var rafId = React.useRef(0);
   var loopId = React.useRef(0);
   var _f = React.useState(null),
-    loadingError = _f[0],
-    setLoadingError = _f[1];
+    error = _f[0],
+    setError = _f[1];
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -10706,7 +10722,7 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
               return [3, 4];
             case 3:
               e_1 = _b.sent();
-              setLoadingError(e_1);
+              setError(e_1);
               return [3, 4];
             case 4:
               setReady(true);
@@ -10839,29 +10855,15 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
       stop: stop,
       ready: ready,
       canvasRef: canvasRef,
-      onPredictionMade: onPredictionMade
+      onPredictionMade: onPredictionMade,
+      error: error
     };
-  }, [onPredictionMade, ready, start, stop]);
+  }, [error, onPredictionMade, ready, start, stop]);
   return /*#__PURE__*/React__namespace.createElement(HighPerformanceSelfieGuidanceModelsContext.Provider, {
     value: value
-  }, loadingError ? /*#__PURE__*/React__namespace.createElement(ModelLoadingErrorOverlay, {
-    error: loadingError
-  }) : children);
+  }, children);
 };
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
-  var $top = _a.$top;
-  return $top !== null && $top !== void 0 ? $top : '10vh';
-});
-var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
-  var $background = _a.$background;
-  return $background !== null && $background !== void 0 ? $background : '#ccc';
-}, function (_a) {
-  var $textColor = _a.$textColor;
-  return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
-});
-var templateObject_1$2, templateObject_2$1;
-
 var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger) {
   var _a = React.useState(false),
     timedOut = _a[0],
@@ -10898,6 +10900,86 @@ var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shou
   };
 };
 
+var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
+  var onFinished = _a.onFinished,
+    onCapture = _a.onCapture,
+    _b = _a.colors,
+    colors = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    rawVerbiage = _c === void 0 ? {} : _c;
+  var _d = React.useState(null),
+    image = _d[0],
+    setImage = _d[1];
+  var fileInput = React.useRef(null);
+  var _e = React.useState(false),
+    loading = _e[0],
+    setLoading = _e[1];
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: "We're having some trouble.",
+    descriptionText: 'On-device capture guidance failed, please capture a selfie manually.',
+    captureBtnText: 'Capture',
+    doneBtnText: 'Done',
+    doneBtnLoadingText: 'Verifying...'
+  });
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, verbiage.descriptionText), image && /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, {
+    style: {
+      marginTop: 32
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: image,
+    alt: ""
+  })), /*#__PURE__*/React__default['default'].createElement("input", {
+    ref: fileInput,
+    type: "file",
+    accept: "image/*",
+    hidden: true,
+    onChange: function onChange(e) {
+      var _a;
+      var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+      if (!file) return;
+      var reader = new FileReader();
+      reader.addEventListener('load', function (e) {
+        var _a;
+        var imageData = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+        setImage(imageData);
+        onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
+      });
+      reader.readAsDataURL(file);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, !image && /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    colors: colors.captureBtn,
+    finished: true,
+    onClick: function onClick() {
+      var _a;
+      (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }, verbiage.captureBtnText), image && /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    key: loading ? 'loading-btn' : 'ready-btn',
+    colors: colors.doneBtn,
+    finished: !loading,
+    onClick: function onClick() {
+      setLoading(true);
+      onFinished === null || onFinished === void 0 ? void 0 : onFinished(image);
+    }
+  }, loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText))));
+};
+
 var initialState$3 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -11022,7 +11104,9 @@ var SelfieCapture = function SelfieCapture(_a) {
     cameraRef = _l.cameraRef,
     cameraReady = _l.cameraReady,
     videoRef = _l.videoRef;
-  var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
+  var _m = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
+    onPredictionMade = _m.onPredictionMade,
+    guidanceError = _m.error;
   React.useEffect(function () {
     if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
       dispatch({
@@ -11044,9 +11128,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     });
   }, [onPredictionMade]);
-  var _m = React.useState(false),
-    captureReady = _m[0],
-    setCaptureReady = _m[1];
+  var _o = React.useState(false),
+    captureReady = _o[0],
+    setCaptureReady = _o[1];
   React.useEffect(function () {
     var timer;
     if (state.faceReady) {
@@ -11079,9 +11163,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     })();
   }, [captureReady, onSelfieCaptured, state.faces, videoRef]);
-  var _o = useTimeout(timeoutDurationMs, onTimeout),
-    timedOut = _o.timedOut,
-    timeoutStartedAt = _o.timeoutStartedAt;
+  var _p = useTimeout(timeoutDurationMs, onTimeout),
+    timedOut = _p.timedOut,
+    timeoutStartedAt = _p.timeoutStartedAt;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -11102,9 +11186,12 @@ var SelfieCapture = function SelfieCapture(_a) {
     guidanceMoveForwardText: 'Move forward...',
     guidanceMoveToCenterText: 'Move to the center...'
   });
-  guidanceMessage || (guidanceMessage = state.faceReady ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
   var satisfied = state.faceReady;
   if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
+  if (guidanceError) {
+    return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFallback, null);
+  }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
@@ -11145,6 +11232,7 @@ var initialState$2 = {
   timesLivenessCheckFailed: 0
 };
 var reducer$2 = function reducer(state, action) {
+  var _a, _b;
   switch (action.type) {
     case 'livenessReady':
       {
@@ -11165,12 +11253,12 @@ var reducer$2 = function reducer(state, action) {
       });
     case 'livenessChecked':
       {
-        var _a = action.payload.response,
-          _b = _a.status,
-          statusCode = _b.statusCode,
-          statusMessage = _b.statusMessage,
-          errorData = _b.errorData,
-          resultData = _a.resultData;
+        var _c = action.payload.response,
+          _d = _c.status,
+          statusCode = _d.statusCode,
+          statusMessage = _d.statusMessage,
+          errorData = _d.errorData,
+          resultData = _c.resultData;
         if (statusCode !== '000') {
           return tslib.__assign(tslib.__assign({}, state), {
             requestState: 'ERROR',
@@ -11191,8 +11279,8 @@ var reducer$2 = function reducer(state, action) {
           timesLivenessCheckFailed += 1;
         }
         return tslib.__assign(tslib.__assign({}, state), {
-          frame: action.payload.frame,
-          face: action.payload.face,
+          frame: (_a = action.payload.frame) !== null && _a !== void 0 ? _a : null,
+          face: (_b = action.payload.face) !== null && _b !== void 0 ? _b : null,
           imageUrl: action.payload.imageUrl,
           requestState: requestState,
           faceLive: faceLive,
@@ -11227,6 +11315,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   var _e = React.useContext(SubmissionContext),
     checkLiveness = _e.checkLiveness,
     submissionError = _e.submissionError;
+  var modelsError = React.useContext(HighPerformanceSelfieGuidanceModelsContext).error;
   var _f = React.useReducer(reducer$2, initialState$2),
     state = _f[0],
     dispatch = _f[1];
@@ -11295,21 +11384,68 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
       });
     })();
   }, [checkLiveness, face, frame, isReady, submissionError]);
+  var onFallbackImageCaptured = React.useCallback(function (imageUrl) {
+    return tslib.__awaiter(void 0, void 0, void 0, function () {
+      var response, _a, e_2;
+      return tslib.__generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            dispatch({
+              type: 'livenessChecking'
+            });
+            _b.label = 1;
+          case 1:
+            _b.trys.push([1, 4,, 5]);
+            _a = checkLiveness;
+            return [4, dataUrlToBase64(imageUrl)];
+          case 2:
+            return [4, _a.apply(void 0, [_b.sent()])];
+          case 3:
+            response = _b.sent();
+            dispatch({
+              type: 'livenessChecked',
+              payload: {
+                imageUrl: imageUrl,
+                response: response
+              }
+            });
+            return [3, 5];
+          case 4:
+            e_2 = _b.sent();
+            dispatch({
+              type: 'livenessCheckFailed',
+              payload: {
+                error: e_2
+              }
+            });
+            return [3, 5];
+          case 5:
+            return [2];
+        }
+      });
+    });
+  }, [checkLiveness]);
   React.useEffect(function () {
     if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
   }, [onSuccess, state.imageUrl, isPassed]);
   React.useEffect(function () {
-    if (state.timesLivenessCheckFailed >= 2) {
+    var allowedFailures = modelsError ? 1 : 2;
+    if (state.timesLivenessCheckFailed >= allowedFailures) {
       onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
     }
-  }, [onTimeout, state.timesLivenessCheckFailed]);
-  useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED', state.requestState === 'IN_PROGRESS');
+  }, [modelsError, onTimeout, state.timesLivenessCheckFailed]);
+  useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelsError, state.requestState === 'IN_PROGRESS');
   var verbiage = useTranslations(rawVerbiage, {
     guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
     guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
     guidanceRemoveMaskText: 'Please remove your mask...'
   });
   var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
+  if (modelsError) {
+    return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFallback, {
+      onFinished: onFallbackImageCaptured
+    });
+  }
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: rawCanvas
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {