idmission-web-sdk 2.1.73 → 2.1.74

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

@@ -34,6 +34,7 @@ export type IdCaptureVerbiage = {
     guidanceTooBlurryText?: CustomerSuppliedVerbiage;
     guidanceNotCenteredText?: CustomerSuppliedVerbiage;
     guidanceTooCloseText?: CustomerSuppliedVerbiage;
+    guidanceNotStableText?: CustomerSuppliedVerbiage;
     guidanceNotDetectedText?: CustomerSuppliedVerbiage;
     guidanceIdCardNotAllowedText?: CustomerSuppliedVerbiage;
     guidancePassportNotAllowedText?: CustomerSuppliedVerbiage;

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

@@ -25,6 +25,7 @@ export type IdCaptureState = {
     detectionThresholdMet: boolean;
     documentInBounds: boolean;
     documentTooClose: boolean;
+    documentIsStable: boolean;
     flipRequired: boolean;
     backDetectedFirst: boolean;
     idCardDetectedButNotAllowed: boolean;

package/dist/lib/locales/es/translation.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
     'Document not detected': string;
     'Document is not centered': string;
     'Document too close, please back up': string;
+    'Please hold your ID document steady': string;
     'Document out of focus \u2013 try improving the lighting': string;
     'ID card front detected - please flip your ID card': string;
     'ID card back detected - please flip your ID card': string;

package/dist/lib/locales/index.d.ts

@@ -31,6 +31,7 @@ export declare const resources: {
             'Document not detected': string;
             'Document is not centered': string;
             'Document too close, please back up': string;
+            'Please hold your ID document steady': string;
             'Document out of focus \u2013 try improving the lighting': string;
             'ID card front detected - please flip your ID card': string;
             'ID card back detected - please flip your ID card': string;

package/dist/lib/models/DocumentDetection.d.ts

@@ -28,6 +28,7 @@ export type DocumentDetectionThresholds = {
     idCardFront?: number;
     idCardBack?: number;
     passport?: number;
+    stability?: number;
 };
 export declare function loadDocumentDetector(modelAssetPath?: string, scoreThreshold?: number): Promise<ObjectDetector>;
 export declare function useLoadDocumentDetector({ modelPath, modelLoadTimeoutMs, scoreThreshold, onModelError, }: {
@@ -57,6 +58,7 @@ export type DocumentDetectionPrediction = {
     bestDocument: DetectedObject | undefined;
     documentInBounds: boolean;
     documentTooClose: boolean;
+    documentIsStable: boolean;
     frameWidth: number;
     frameHeight: number;
     allZero: boolean;
@@ -68,6 +70,9 @@ export type ObjectDetectorPrediction = ObjectDetectorResult & {
     frameHeight: number;
 };
 export declare function makeDocumentDetectorPrediction(detector: ObjectDetector, frame: HTMLCanvasElement): Promise<ObjectDetectorPrediction | null>;
+export declare let lastDetectionAt: number;
+export declare let lastDetectionTime: number;
+export declare function setLastDetectionAt(time: number): void;
 export type DocumentDetectionBoundaries = {
     top: number;
     bottom: number;

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.1.73';
+var webSdkVersion = '2.1.74';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -5439,7 +5439,8 @@ var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
 var defaultDocumentDetectionThresholds = {
   idCardFront: 0.6,
   idCardBack: 0.6,
-  passport: 0.4
+  passport: 0.4,
+  stability: 0.9
 };
 var documentTypeDisplayNames = {
   idCardFront: 'ID card front',
@@ -5581,6 +5582,13 @@ function makeDocumentDetectorPrediction(detector, frame) {
     });
   });
 }
+var lastNBoxes = [];
+var lastDetectionAt = 0;
+var lastDetectionTime = 0;
+function setLastDetectionAt(time) {
+  lastDetectionTime = time - lastDetectionAt;
+  lastDetectionAt = time;
+}
 var defaultDocumentDetectionBoundaries = {
   top: 20,
   bottom: 20,
@@ -5588,7 +5596,7 @@ var defaultDocumentDetectionBoundaries = {
   right: 20
 };
 function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   if (boundaries === void 0) {
     boundaries = defaultDocumentDetectionBoundaries;
   }
@@ -5644,11 +5652,11 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     var boundaryLeft = (_j = boundaries.left) !== null && _j !== void 0 ? _j : 20;
     var boundaryRight = (_k = boundaries.right) !== null && _k !== void 0 ? _k : 20;
     var boundaryBottom = (_l = boundaries.bottom) !== null && _l !== void 0 ? _l : 20;
-    var _m = bestDocument.box,
-      xMin = _m.xMin,
-      yMin = _m.yMin,
-      width = _m.width,
-      height = _m.height;
+    var _o = bestDocument.box,
+      xMin = _o.xMin,
+      yMin = _o.yMin,
+      width = _o.width,
+      height = _o.height;
     documentInBounds = yMin > boundaryTop &&
     // Is it valid top edge of ID detected?
     yMin + height + boundaryBottom < frameHeight && (
@@ -5657,12 +5665,23 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     // If either the left side visible or if not, right edge of ID should be more than 80% of width.
     xMin + width + boundaryRight < frameWidth; // Valid right edge if it's less than video width.
   }
+  var documentIsStable = false;
   var documentTooClose = false;
   if (bestDocument) {
-    var _o = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
-      docWidth = _o[0],
-      docHeight = _o[1];
+    var _p = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
+      docWidth = _p[0],
+      docHeight = _p[1];
     documentTooClose = docWidth > 0.85 || docHeight > 0.85;
+    if (detectionThresholdMet) {
+      var threshold_1 = (_m = thresholds.stability) !== null && _m !== void 0 ? _m : defaultDocumentDetectionThresholds.stability;
+      var framesNeeded = Math.ceil(Math.min(1000 / lastDetectionTime, 12));
+      lastNBoxes = __spreadArray([bestDocument.box], lastNBoxes, true).slice(0, framesNeeded);
+      documentIsStable = lastNBoxes.length >= framesNeeded && !createPairs(lastNBoxes).some(function (_a) {
+        var a = _a[0],
+          b = _a[1];
+        return calculateIoU(a, b) < threshold_1;
+      });
+    }
   }
   return {
     detectedObjects: detectedObjects,
@@ -5679,6 +5698,7 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     bestDocument: bestDocument,
     documentInBounds: documentInBounds,
     documentTooClose: documentTooClose,
+    documentIsStable: documentIsStable,
     frameWidth: frameWidth,
     frameHeight: frameHeight,
     allZero: allZero
@@ -5698,6 +5718,27 @@ function applyNonMaxSuppression(detectedObjects) {
     return !!obj;
   });
 }
+function createPairs(arr) {
+  var pairs = [];
+  for (var i = 0; i < arr.length - 1; i++) {
+    pairs.push([arr[i], arr[i + 1]]);
+  }
+  return pairs;
+}
+function calculateIoU(boxA, boxB) {
+  var xA = Math.max(boxA.xMin, boxB.xMin);
+  var yA = Math.max(boxA.yMin, boxB.yMin);
+  var xB = Math.min(boxA.xMax, boxB.xMax);
+  var yB = Math.min(boxA.yMax, boxB.yMax);
+  var intersectWidth = Math.max(0, xB - xA);
+  var intersectHeight = Math.max(0, yB - yA);
+  var intersectionArea = intersectWidth * intersectHeight;
+  var boxAArea = (boxA.xMax - boxA.xMin) * (boxA.yMax - boxA.yMin);
+  var boxBArea = (boxB.xMax - boxB.xMin) * (boxB.yMax - boxB.yMin);
+  var unionArea = boxAArea + boxBArea - intersectionArea;
+  if (unionArea === 0) return 0;
+  return intersectionArea / unionArea;
+}
 
 function useFrameLoop(fn, _a) {
   var _b = _a.throttleMs,
@@ -5715,16 +5756,20 @@ function useFrameLoop(fn, _a) {
     var currentLoopId = loopId.current;
     function renderPrediction() {
       return __awaiter(this, void 0, void 0, function () {
+        var start, took, amountToThrottle;
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
               if (currentLoopId !== loopId.current) return [2 /*return*/];
+              start = new Date().getTime();
               return [4 /*yield*/, fn(frameId.current)];
             case 1:
               _a.sent();
+              took = new Date().getTime() - start;
+              amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
               timer = setTimeout(function () {
                 frameId.current = requestAnimationFrame(renderPrediction);
-              }, throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0);
+              }, amountToThrottle);
               return [2 /*return*/];
           }
         });
@@ -5790,29 +5835,27 @@ function DocumentDetectionModelProvider(_a) {
   var _b = _a.autoStart,
     autoStart = _b === void 0 ? true : _b,
     children = _a.children,
-    throttleMs = _a.throttleMs,
-    _c = _a.documentDetectionModelPath,
-    documentDetectionModelPath = _c === void 0 ? defaultDocumentDetectorModelPath : _c,
-    _d = _a.documentDetectionModelScoreThreshold,
-    documentDetectionModelScoreThreshold = _d === void 0 ? defaultDocumentDetectionScoreThreshold : _d,
-    _e = _a.documentDetectionModelLoadTimeoutMs,
-    documentDetectionModelLoadTimeoutMs = _e === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _e,
+    _c = _a.throttleMs,
+    throttleMs = _c === void 0 ? 16 : _c,
+    _d = _a.documentDetectionModelPath,
+    documentDetectionModelPath = _d === void 0 ? defaultDocumentDetectorModelPath : _d,
+    _e = _a.documentDetectionModelScoreThreshold,
+    documentDetectionModelScoreThreshold = _e === void 0 ? defaultDocumentDetectionScoreThreshold : _e,
+    _f = _a.documentDetectionModelLoadTimeoutMs,
+    documentDetectionModelLoadTimeoutMs = _f === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _f,
     onDocumentDetectionModelError = _a.onDocumentDetectionModelError;
-  var _f = React.useContext(CameraStateContext),
-    videoRef = _f.videoRef,
-    videoLoaded = _f.videoLoaded,
-    cameraReady = _f.cameraReady;
+  var _g = React.useContext(CameraStateContext),
+    videoRef = _g.videoRef,
+    videoLoaded = _g.videoLoaded,
+    cameraReady = _g.cameraReady;
   var lastPredictionCanvas = React.useRef(null);
   var onPredictionHandler = React.useRef();
-  var _g = React.useState({}),
-    documentDetectionThresholds = _g[0],
-    setDocumentDetectionThresholds = _g[1];
-  var _h = React.useState(defaultDocumentDetectionBoundaries),
-    documentDetectionBoundaries = _h[0],
-    setDocumentDetectionBoundaries = _h[1];
-  var _j = React.useState(0),
-    detectionTime = _j[0],
-    setDetectionTime = _j[1];
+  var _h = React.useState({}),
+    documentDetectionThresholds = _h[0],
+    setDocumentDetectionThresholds = _h[1];
+  var _j = React.useState(defaultDocumentDetectionBoundaries),
+    documentDetectionBoundaries = _j[0],
+    setDocumentDetectionBoundaries = _j[1];
   var _k = React.useState(0),
     timesAllZero = _k[0],
     setTimesAllZero = _k[1];
@@ -5854,7 +5897,7 @@ function DocumentDetectionModelProvider(_a) {
               if (!prediction) return [3 /*break*/, 3];
               processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds, documentDetectionBoundaries);
               processedPrediction.frameId = frameId;
-              setDetectionTime(prediction.time);
+              setLastDetectionAt(new Date().getTime());
               debug(processedPrediction);
               if (processedPrediction.allZero) setTimesAllZero(function (n) {
                 return n + 1;
@@ -5897,7 +5940,7 @@ function DocumentDetectionModelProvider(_a) {
       documentDetectionModelError: modelError,
       documentDetectionModelDownloadProgress: modelDownloadProgress,
       onDocumentDetected: onDocumentDetected,
-      detectionTime: detectionTime,
+      detectionTime: lastDetectionTime,
       documentDetectionThresholds: documentDetectionThresholds,
       setDocumentDetectionThresholds: setDocumentDetectionThresholds,
       documentDetectionBoundaries: documentDetectionBoundaries,
@@ -5905,7 +5948,7 @@ function DocumentDetectionModelProvider(_a) {
       documentDetectionLastPredictionCanvas: lastPredictionCanvas,
       clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
     };
-  }, [start, stop, ready, modelError, modelDownloadProgress, onDocumentDetected, detectionTime, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
+  }, [start, stop, ready, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
   return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -6243,6 +6286,7 @@ var initialState$4 = {
   detectionThresholdMet: false,
   documentInBounds: false,
   documentTooClose: false,
+  documentIsStable: false,
   flipRequired: false,
   backDetectedFirst: false,
   idCardDetectedButNotAllowed: false,
@@ -6361,6 +6405,7 @@ var _reducer = function reducer(state, action) {
         bestDocument = _d.bestDocument,
         documentInBounds = _d.documentInBounds,
         documentTooClose = _d.documentTooClose,
+        documentIsStable = _d.documentIsStable,
         focusScore = _d.focusScore,
         focusThresholdMet = _d.focusThresholdMet,
         frameWidth = _d.frameWidth,
@@ -6382,7 +6427,7 @@ var _reducer = function reducer(state, action) {
       if (state.captureState === 'capturing' && (flipRequired || backDetectedFirst)) {
         wrongDocumentTypePredictions += 1;
       }
-      var isGoodFrame = detectionThresholdMet && documentInBounds && !documentTooClose && !flipRequired && !backDetectedFirst && focusThresholdMet;
+      var isGoodFrame = detectionThresholdMet && documentInBounds && !documentTooClose && !flipRequired && !backDetectedFirst && focusThresholdMet && documentIsStable;
       var goodFramesCount = state.goodFramesCount;
       if (isGoodFrame) {
         goodFramesCount += 1;
@@ -6417,6 +6462,7 @@ var _reducer = function reducer(state, action) {
         detectionThresholdMet: detectionThresholdMet,
         documentInBounds: documentInBounds,
         documentTooClose: documentTooClose,
+        documentIsStable: documentIsStable,
         flipRequired: flipRequired,
         backDetectedFirst: backDetectedFirst,
         idCardDetectedButNotAllowed: idCardDetectedButNotAllowed,
@@ -6836,6 +6882,7 @@ var esTranslation = {
   'Document not detected': 'No se ha detectado el documento',
   'Document is not centered': 'Documento no centrado',
   'Document too close, please back up': 'Documento muy cerca, favor de alejarse',
+  'Please hold your ID document steady': 'Por favor, mantenga firme su documento de identidad',
   'Document out of focus – try improving the lighting': 'Documento no enfocado - hay que tratar de mejorar la iluminación',
   'ID card front detected - please flip your ID card': 'Anverso de ID detectado, por favor voltea tu identificación',
   'ID card back detected - please flip your ID card': 'Reverso de ID detectado, por favor voltea tu identificación',
@@ -7157,7 +7204,8 @@ var IdCapture = function IdCapture(_a) {
     guidanceTooCloseText: 'Document too close, please back up',
     guidanceNotDetectedText: 'Document not detected',
     guidanceIdCardNotAllowedText: 'ID card detected, please scan a passport instead',
-    guidancePassportNotAllowedText: 'Passport detected, please scan an ID card instead'
+    guidancePassportNotAllowedText: 'Passport detected, please scan an ID card instead',
+    guidanceNotStableText: 'Please hold your ID document steady'
   });
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
@@ -7168,7 +7216,7 @@ var IdCapture = function IdCapture(_a) {
   });
   var satisfied = state.isGoodFrame;
   if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
-  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.detectionThresholdMet ? verbiage.guidanceNotDetectedText : state.backDetectedFirst ? verbiage.guidanceBackDetectedFirstText : state.flipRequired ? verbiage.guidancePleaseFlipText : state.idCardDetectedButNotAllowed ? verbiage.guidanceIdCardNotAllowedText : state.passportDetectedButNotAllowed ? verbiage.guidancePassportNotAllowedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : state.documentTooClose ? verbiage.guidanceTooCloseText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : '');
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.detectionThresholdMet ? verbiage.guidanceNotDetectedText : state.backDetectedFirst ? verbiage.guidanceBackDetectedFirstText : state.flipRequired ? verbiage.guidancePleaseFlipText : state.idCardDetectedButNotAllowed ? verbiage.guidanceIdCardNotAllowedText : state.passportDetectedButNotAllowed ? verbiage.guidancePassportNotAllowedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : state.documentTooClose ? verbiage.guidanceTooCloseText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : !state.documentIsStable ? verbiage.guidanceNotStableText : '');
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     ref: ref,
     className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
@@ -7193,7 +7241,7 @@ var IdCapture = function IdCapture(_a) {
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
+  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
 };
 var timeSince = function timeSince(t) {
   if (!t) return 0;