idmission-web-sdk 2.1.73 → 2.1.74

package/dist/sdk2.umd.development.js

@@ -215,7 +215,7 @@
     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
@@ -11400,7 +11400,8 @@
   var defaultDocumentDetectionThresholds = {
     idCardFront: 0.6,
     idCardBack: 0.6,
-    passport: 0.4
+    passport: 0.4,
+    stability: 0.9
   };
   var documentTypeDisplayNames = {
     idCardFront: 'ID card front',
@@ -11542,6 +11543,13 @@
       });
     });
   }
+  var lastNBoxes = [];
+  var lastDetectionAt = 0;
+  var lastDetectionTime = 0;
+  function setLastDetectionAt(time) {
+    lastDetectionTime = time - lastDetectionAt;
+    lastDetectionAt = time;
+  }
   var defaultDocumentDetectionBoundaries = {
     top: 20,
     bottom: 20,
@@ -11549,7 +11557,7 @@
     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;
     }
@@ -11605,11 +11613,11 @@
       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 && (
@@ -11618,12 +11626,23 @@
       // 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,
@@ -11640,6 +11659,7 @@
       bestDocument: bestDocument,
       documentInBounds: documentInBounds,
       documentTooClose: documentTooClose,
+      documentIsStable: documentIsStable,
       frameWidth: frameWidth,
       frameHeight: frameHeight,
       allZero: allZero
@@ -11659,6 +11679,27 @@
       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,
@@ -11676,16 +11717,20 @@
       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*/];
             }
           });
@@ -11751,29 +11796,27 @@
     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];
@@ -11815,7 +11858,7 @@
                 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;
@@ -11858,7 +11901,7 @@
         documentDetectionModelError: modelError,
         documentDetectionModelDownloadProgress: modelDownloadProgress,
         onDocumentDetected: onDocumentDetected,
-        detectionTime: detectionTime,
+        detectionTime: lastDetectionTime,
         documentDetectionThresholds: documentDetectionThresholds,
         setDocumentDetectionThresholds: setDocumentDetectionThresholds,
         documentDetectionBoundaries: documentDetectionBoundaries,
@@ -11866,7 +11909,7 @@
         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, {
@@ -12287,6 +12330,7 @@
     detectionThresholdMet: false,
     documentInBounds: false,
     documentTooClose: false,
+    documentIsStable: false,
     flipRequired: false,
     backDetectedFirst: false,
     idCardDetectedButNotAllowed: false,
@@ -12405,6 +12449,7 @@
           bestDocument = _d.bestDocument,
           documentInBounds = _d.documentInBounds,
           documentTooClose = _d.documentTooClose,
+          documentIsStable = _d.documentIsStable,
           focusScore = _d.focusScore,
           focusThresholdMet = _d.focusThresholdMet,
           frameWidth = _d.frameWidth,
@@ -12426,7 +12471,7 @@
         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;
@@ -12461,6 +12506,7 @@
           detectionThresholdMet: detectionThresholdMet,
           documentInBounds: documentInBounds,
           documentTooClose: documentTooClose,
+          documentIsStable: documentIsStable,
           flipRequired: flipRequired,
           backDetectedFirst: backDetectedFirst,
           idCardDetectedButNotAllowed: idCardDetectedButNotAllowed,
@@ -12880,6 +12926,7 @@
     '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',
@@ -15991,7 +16038,8 @@
       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,
@@ -16002,7 +16050,7 @@
     });
     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.createElement(PageContainer, {
       ref: ref,
       className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
@@ -16027,7 +16075,7 @@
         scaling: debugScalingDetails,
         flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
       });
-    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.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.createElement("br", null), modelsReady ? ( /*#__PURE__*/React.createElement(React.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u274C Models not ready")))));
+    }))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.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.createElement("br", null), modelsReady ? ( /*#__PURE__*/React.createElement(React.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u274C Models not ready")))));
   };
   var timeSince = function timeSince(t) {
     if (!t) return 0;