idmission-web-sdk 1.0.29 → 1.0.30

package/dist/components/video_id/IdVideoCapture.d.ts

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
+import { IdVideoCaptureGuidesAssets, IdVideoCaptureGuidesVerbiage } from './IdVideoCaptureGuides';
 import { CustomerSuppliedVerbiage } from '../../lib/locales';
 import { LoaderButtonColors } from '../common/LoaderButton';
-export type Action = 'SHOW_ID_FRONT' | 'SHOW_ID_BACK' | 'READ_TEXT';
+export type Action = 'SHOW_ID_FRONT' | 'FLIP_ID' | 'SHOW_ID_BACK' | 'READ_TEXT';
 export type IdVideoCaptureAssets = {
-    idCardFrontGuidesImageUrl?: string;
-    idCardBackGuidesImageUrl?: string;
+    guides?: IdVideoCaptureGuidesAssets;
 };
 export type IdVideoCaptureColors = {
     guidesSatisfiedColor?: string;
@@ -12,17 +12,17 @@ export type IdVideoCaptureColors = {
     readTextDoneBtn?: LoaderButtonColors;
 };
 export type IdVideoCaptureVerbiage = {
-    idFrontInstructionText?: CustomerSuppliedVerbiage;
-    idBackInstructionText?: CustomerSuppliedVerbiage;
+    guides?: IdVideoCaptureGuidesVerbiage;
     readTextHeading?: CustomerSuppliedVerbiage;
     readTextDoneBtnText?: CustomerSuppliedVerbiage;
 };
 export type IdVideoCaptureProps = {
     onComplete?: (videoUrl: string) => void;
     onFaceNotDetected?: () => void;
-    idDetectionThreshold?: number;
-    idFocusThreshold?: number;
-    goodFramesThreshold?: number;
+    idCardFrontDetectionThreshold?: number;
+    idCardFrontFocusThreshold?: number;
+    goodIdCardFrontFramesThreshold?: number;
+    showIdCardBackDurationMs?: number;
     readTextPrompt?: CustomerSuppliedVerbiage;
     readTextTimeoutDurationMs?: number;
     assets?: IdVideoCaptureAssets;
@@ -30,4 +30,4 @@ export type IdVideoCaptureProps = {
     verbiage?: IdVideoCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdVideoCapture: ({ onComplete, onFaceNotDetected, idDetectionThreshold, idFocusThreshold, goodFramesThreshold, readTextPrompt, readTextTimeoutDurationMs, assets, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;
+export declare const IdVideoCapture: ({ onComplete, onFaceNotDetected, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, readTextPrompt, readTextTimeoutDurationMs, assets, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;

package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts

@@ -8,8 +8,10 @@ export type IdVideoCaptureFlipIdPromptVerbiage = {
     instructionText?: CustomerSuppliedVerbiage;
 };
 export type IdVideoCaptureFlipIdPromptProps = {
+    imageWidth?: number;
+    imageHeight?: number;
     style?: CSSProperties;
     assets?: IdVideoCaptureFlipIdPromptAssets;
     verbiage?: IdVideoCaptureFlipIdPromptVerbiage;
 };
-export declare const IdVideoCaptureFlipIdPrompt: ({ style, assets, verbiage, }: IdVideoCaptureFlipIdPromptProps) => ReactElement;
+export declare const IdVideoCaptureFlipIdPrompt: ({ imageWidth, imageHeight, style, assets, verbiage, }: IdVideoCaptureFlipIdPromptProps) => ReactElement;

package/dist/components/video_id/IdVideoCaptureGuides.d.ts

@@ -1,9 +1,20 @@
 import { ReactElement } from 'react';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
+export type Action = 'SHOW_ID_FRONT' | 'FLIP_ID' | 'SHOW_ID_BACK' | 'READ_TEXT';
+export type IdVideoCaptureGuidesAssets = {
+    frontImageUrl?: string;
+    backImageUrl?: string;
+};
+export type IdVideoCaptureGuidesVerbiage = {
+    idFrontInstructionText?: CustomerSuppliedVerbiage;
+    idBackInstructionText?: CustomerSuppliedVerbiage;
+    flipIdInstructionText?: CustomerSuppliedVerbiage;
+};
 export type IdVideoCaptureGuidesProps = {
-    instructionText?: string;
     borderWidth?: number;
     borderColor?: string;
-    guideImageUrl?: string;
-    flipping?: boolean;
+    requestedAction?: Action;
+    assets?: IdVideoCaptureGuidesAssets;
+    verbiage?: IdVideoCaptureGuidesVerbiage;
 };
-export declare const IdVideoCaptureGuides: ({ instructionText, borderWidth, borderColor, guideImageUrl, flipping, }: IdVideoCaptureGuidesProps) => ReactElement;
+export declare const IdVideoCaptureGuides: ({ requestedAction, borderWidth, borderColor, assets, verbiage: rawVerbiage, }: IdVideoCaptureGuidesProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var tf__namespace = /*#__PURE__*/_interopNamespace(tf);
 var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.29';
+var webSdkVersion = '1.0.30';
 
 function getPlatform() {
   return window.platform;
@@ -14140,7 +14140,9 @@ var SignatureKYC = function SignatureKYC(_a) {
 
 var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
   var _b;
-  var _c = _a.style,
+  var imageWidth = _a.imageWidth,
+    imageHeight = _a.imageHeight,
+    _c = _a.style,
     style = _c === void 0 ? {} : _c,
     _d = _a.assets,
     assets = _d === void 0 ? {} : _d,
@@ -14250,6 +14252,8 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     src: assets.frontImageUrl,
     alt: "",
+    width: imageWidth,
+    height: imageHeight,
     onLoad: onImageLoaded,
     style: tslib.__assign({
       backfaceVisibility: 'hidden',
@@ -14303,15 +14307,30 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
 };
 
 var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
-  var instructionText = _a.instructionText,
-    _b = _a.borderWidth,
-    borderWidth = _b === void 0 ? 3 : _b,
-    _c = _a.borderColor,
-    borderColor = _c === void 0 ? 'white' : _c,
-    _d = _a.guideImageUrl,
-    guideImageUrl = _d === void 0 ? "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg") : _d,
-    _e = _a.flipping,
-    flipping = _e === void 0 ? false : _e;
+  var _b = _a.requestedAction,
+    requestedAction = _b === void 0 ? 'SHOW_ID_FRONT' : _b,
+    _c = _a.borderWidth,
+    borderWidth = _c === void 0 ? 3 : _c,
+    _d = _a.borderColor,
+    borderColor = _d === void 0 ? 'white' : _d,
+    _e = _a.assets,
+    assets = _e === void 0 ? {} : _e,
+    _f = _a.verbiage,
+    rawVerbiage = _f === void 0 ? {} : _f;
+  var imageRef = React.useRef(null);
+  var _g = React.useState(0),
+    imageWidth = _g[0],
+    setImageWidth = _g[1];
+  var _h = React.useState(0),
+    imageHeight = _h[0],
+    setImageHeight = _h[1];
+  assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
+  assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
+  var verbiage = useTranslations(rawVerbiage, {
+    idFrontInstructionText: 'Display the front of your ID card...',
+    idBackInstructionText: 'Display the back of your ID card...'
+  });
+  var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : verbiage.idBackInstructionText;
   var idGuideWidth = window.innerWidth > window.innerHeight ? '30%' : '75%';
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
@@ -14332,7 +14351,13 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
       height: '100%',
       margin: '4% auto auto'
     }
-  }), flipping ? /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureFlipIdPrompt, {
+  }), requestedAction === 'FLIP_ID' ? /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureFlipIdPrompt, {
+    assets: assets,
+    verbiage: {
+      instructionText: verbiage.flipIdInstructionText
+    },
+    imageWidth: imageWidth,
+    imageHeight: imageHeight,
     style: {
       width: idGuideWidth,
       margin: '2% auto 2%'
@@ -14366,10 +14391,16 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
       border: "4px solid ".concat(borderColor)
     }
   }, /*#__PURE__*/React__default['default'].createElement("img", {
-    src: guideImageUrl,
+    ref: imageRef,
+    src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
     alt: "",
     style: {
       width: '100%'
+    },
+    onLoad: function onLoad() {
+      var _a, _b, _c, _d;
+      if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
+      if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
     }
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
@@ -14396,52 +14427,54 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   var _b, _c, _d, _e, _f, _g;
   var onComplete = _a.onComplete,
     onFaceNotDetected = _a.onFaceNotDetected,
-    _h = _a.idDetectionThreshold,
-    idDetectionThreshold = _h === void 0 ? 0.48 : _h,
-    _j = _a.idFocusThreshold,
-    idFocusThreshold = _j === void 0 ? 0.15 : _j,
-    _k = _a.goodFramesThreshold,
-    goodFramesThreshold = _k === void 0 ? 3 : _k,
+    _h = _a.idCardFrontDetectionThreshold,
+    idCardFrontDetectionThreshold = _h === void 0 ? 0.48 : _h,
+    _j = _a.idCardFrontFocusThreshold,
+    idCardFrontFocusThreshold = _j === void 0 ? 0.15 : _j,
+    _k = _a.goodIdCardFrontFramesThreshold,
+    goodIdCardFrontFramesThreshold = _k === void 0 ? 3 : _k,
+    _l = _a.showIdCardBackDurationMs,
+    showIdCardBackDurationMs = _l === void 0 ? 3000 : _l,
     readTextPrompt = _a.readTextPrompt,
-    _l = _a.readTextTimeoutDurationMs,
-    readTextTimeoutDurationMs = _l === void 0 ? 15000 : _l,
-    _m = _a.assets,
-    assets = _m === void 0 ? {} : _m,
-    _o = _a.colors,
-    colors = _o === void 0 ? {} : _o,
-    _p = _a.verbiage,
-    rawVerbiage = _p === void 0 ? {} : _p,
-    _q = _a.debugMode,
-    debugMode = _q === void 0 ? false : _q;
-  var _r = useResizeObserver__default['default'](),
-    ref = _r.ref,
-    _s = _r.width,
-    width = _s === void 0 ? 1 : _s,
-    _t = _r.height,
-    height = _t === void 0 ? 1 : _t;
-  var _u = React.useContext(CameraStateContext),
-    cameraRef = _u.cameraRef,
-    videoRef = _u.videoRef,
-    videoLoaded = _u.videoLoaded,
-    cameraReady = _u.cameraReady;
-  var _v = React.useState([]),
-    detectedObjects = _v[0],
-    setDetectedObjects = _v[1];
+    _m = _a.readTextTimeoutDurationMs,
+    readTextTimeoutDurationMs = _m === void 0 ? 15000 : _m,
+    _o = _a.assets,
+    assets = _o === void 0 ? {} : _o,
+    _p = _a.colors,
+    colors = _p === void 0 ? {} : _p,
+    _q = _a.verbiage,
+    rawVerbiage = _q === void 0 ? {} : _q,
+    _r = _a.debugMode,
+    debugMode = _r === void 0 ? false : _r;
+  var _s = useResizeObserver__default['default'](),
+    ref = _s.ref,
+    _t = _s.width,
+    width = _t === void 0 ? 1 : _t,
+    _u = _s.height,
+    height = _u === void 0 ? 1 : _u;
+  var _v = React.useContext(CameraStateContext),
+    cameraRef = _v.cameraRef,
+    videoRef = _v.videoRef,
+    videoLoaded = _v.videoLoaded,
+    cameraReady = _v.cameraReady;
   var _w = React.useState([]),
-    faces = _w[0],
-    setFaces = _w[1];
-  var _x = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _x.ready,
-    idModelsWorking = _x.working,
-    makeIdPrediction = _x.makePrediction,
-    onIdPredictionMade = _x.onPredictionMade,
-    setThresholds = _x.setThresholds;
+    detectedObjects = _w[0],
+    setDetectedObjects = _w[1];
+  var _x = React.useState([]),
+    faces = _x[0],
+    setFaces = _x[1];
+  var _y = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _y.ready,
+    idModelsWorking = _y.working,
+    makeIdPrediction = _y.makePrediction,
+    onIdPredictionMade = _y.onPredictionMade,
+    setThresholds = _y.setThresholds;
   var onSelfiePredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
-  var _y = useVideoRecorder(cameraRef.current),
-    isRecording = _y.isRecording,
-    startRecording = _y.startRecording,
-    stopRecording = _y.stopRecording,
-    videoUrl = _y.videoUrl;
+  var _z = useVideoRecorder(cameraRef.current),
+    isRecording = _z.isRecording,
+    startRecording = _z.startRecording,
+    stopRecording = _z.stopRecording,
+    videoUrl = _z.videoUrl;
   React.useEffect(function () {
     if (!isRecording && !videoUrl) startRecording();
     if (videoUrl) onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl);
@@ -14451,11 +14484,11 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady;
   }, [cameraReady, idModelsReady, videoLoaded]);
-  var _z = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _z[0],
-    setRequestedAction = _z[1];
+  var _0 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _0[0],
+    setRequestedAction = _0[1];
   React.useEffect(function () {
-    if (requestedAction === 'READ_TEXT') return;
+    if (requestedAction !== 'SHOW_ID_FRONT') return;
     if (!idModelsReady || !cameraReady || !videoLoaded) return;
     animationFrame.current = requestAnimationFrame(function runFrame() {
       return tslib.__awaiter(this, void 0, void 0, function () {
@@ -14474,18 +14507,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   }, [cameraReady, idModelsReady, idModelsWorking, makeIdPrediction, requestedAction, videoLoaded, videoRef]);
   React.useEffect(function () {
     setThresholds({
-      document: idDetectionThreshold,
+      document: idCardFrontDetectionThreshold,
       passport: 1,
-      focus: idFocusThreshold
+      focus: idCardFrontFocusThreshold
     });
-  }, [idDetectionThreshold, idFocusThreshold, setThresholds]);
-  var _0 = React.useState(false),
-    flippingIdCard = _0[0],
-    setFlippingIdCard = _0[1];
+  }, [idCardFrontDetectionThreshold, idCardFrontFocusThreshold, setThresholds]);
   var _1 = React.useState(0),
-    goodFramesCount = _1[0],
+    goodIdCardFrontFramesCount = _1[0],
     setGoodFramesCount = _1[1];
-  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
+  var goodFramesThresholdMet = goodIdCardFrontFramesCount >= goodIdCardFrontFramesThreshold;
   React.useEffect(function () {
     onIdPredictionMade(function (prediction) {
       setDetectedObjects(prediction.detectedObjects);
@@ -14497,24 +14527,25 @@ var IdVideoCapture = function IdVideoCapture(_a) {
         setGoodFramesCount(0);
       }
     });
-  }, [idDetectionThreshold, onIdPredictionMade]);
+  }, [idCardFrontDetectionThreshold, onIdPredictionMade]);
   React.useEffect(function () {
     if (goodFramesThresholdMet) {
       if (requestedAction == 'SHOW_ID_FRONT') {
-        setFlippingIdCard(true);
+        setRequestedAction('FLIP_ID');
         setTimeout(function () {
-          setFlippingIdCard(false);
           setRequestedAction('SHOW_ID_BACK');
         }, 3500);
-      } else if (requestedAction === 'SHOW_ID_BACK') {
-        if (readTextPrompt) {
-          setRequestedAction('READ_TEXT');
-        } else {
-          stopRecording();
-        }
       }
     }
-  }, [goodFramesThresholdMet, onComplete, readTextPrompt, requestedAction, stopRecording]);
+  }, [goodFramesThresholdMet, requestedAction]);
+  var onIdBackCaptureComplete = React.useCallback(function () {
+    if (readTextPrompt) {
+      setRequestedAction('READ_TEXT');
+    } else {
+      stopRecording();
+    }
+  }, [readTextPrompt, stopRecording]);
+  useTimeout(showIdCardBackDurationMs, onIdBackCaptureComplete, requestedAction !== 'SHOW_ID_BACK', false, requestedAction === 'SHOW_ID_BACK');
   var onReadTextTimeout = React.useCallback(function () {
     stopRecording();
   }, [stopRecording]);
@@ -14535,13 +14566,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
     }
   }, [numFramesWithoutFaces, onFaceNotDetected]);
-  assets.idCardFrontGuidesImageUrl || (assets.idCardFrontGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
-  assets.idCardBackGuidesImageUrl || (assets.idCardBackGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
   colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
   colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
   var verbiage = useTranslations(rawVerbiage, {
-    idFrontInstructionText: 'Display the front of your ID card...',
-    idBackInstructionText: 'Display the back of your ID card...',
     readTextHeading: 'Please read the following text aloud',
     readTextDoneBtnText: 'Done'
   });
@@ -14554,6 +14581,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     videoHeight: (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0
   });
   var timeRemaining = msToTime(Math.max(0, readTextTimeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())));
+  var satisfied = requestedAction === 'SHOW_ID_BACK' || goodIdCardFrontFramesCount > 0;
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
@@ -14602,11 +14630,11 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     onClick: stopRecording,
     colors: colors.readTextDoneBtn
   }, verbiage.readTextDoneBtnText))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureGuides, {
-    instructionText: requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : verbiage.idBackInstructionText,
-    guideImageUrl: requestedAction === 'SHOW_ID_FRONT' ? assets.idCardFrontGuidesImageUrl : assets.idCardBackGuidesImageUrl,
-    borderColor: goodFramesCount > 0 ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
-    flipping: flippingIdCard
-  }), debugMode && detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+    assets: assets.guides,
+    verbiage: rawVerbiage.guides,
+    requestedAction: requestedAction,
+    borderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
+  }), debugMode && requestedAction === 'SHOW_ID_FRONT' && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_f = cameraRef.current) === null || _f === void 0 ? void 0 : _f.isRearFacing)
   }, detectedObjects.map(function (obj, i) {
     var _a;
@@ -14617,7 +14645,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       color: "blue",
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  })), debugMode && faces.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+  })), /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_g = cameraRef.current) === null || _g === void 0 ? void 0 : _g.isRearFacing)
   }, faces.map(function (face, i) {
     var _a;
@@ -14627,7 +14655,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  }))), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")") : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold));
+  })))), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")") : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodIdCardFrontFramesCount, "/", goodIdCardFrontFramesThreshold));
 };
 function msToTime(s) {
   var ms = s % 1000;