idmission-web-sdk 2.1.61 → 2.1.63

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MutableRefObject, ReactElement, ReactNode } from 'react';
-import { DocumentDetectionPrediction, DocumentDetectionThresholds } from '../../lib/models/DocumentDetection';
+import { DocumentDetectionBoundaries, DocumentDetectionPrediction, DocumentDetectionThresholds } from '../../lib/models/DocumentDetection';
 type PredictionHandler = (prediction: DocumentDetectionPrediction) => Promise<void>;
 type DocumentDetectionModelState = {
     startDocumentDetection: () => void;
@@ -12,6 +12,8 @@ type DocumentDetectionModelState = {
     detectionTime: number;
     documentDetectionThresholds: DocumentDetectionThresholds;
     setDocumentDetectionThresholds: (value: DocumentDetectionThresholds) => void;
+    documentDetectionBoundaries: DocumentDetectionBoundaries;
+    setDocumentDetectionBoundaries: (value: DocumentDetectionBoundaries) => void;
     documentDetectionLastPredictionCanvas: MutableRefObject<HTMLCanvasElement | null>;
     clearDocumentDetectionLastPredictionCanvas: () => void;
 };

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

@@ -1,5 +1,5 @@
 import React, { MutableRefObject, ReactElement, ReactNode } from 'react';
-import { DetectedObjectBox, DocumentDetectionPrediction, DocumentDetectionThresholds, DocumentType } from '../../lib/models/DocumentDetection';
+import { DetectedObjectBox, DocumentDetectionBoundaries, DocumentDetectionPrediction, DocumentDetectionThresholds, DocumentType } from '../../lib/models/DocumentDetection';
 import { DocumentDetectionModelProviderProps } from './DocumentDetectionModelProvider';
 import { FocusModelProviderProps } from './FocusModelProvider';
 import { FocusThresholds } from '../../lib/models/Focus';
@@ -30,6 +30,8 @@ export type IdCaptureModelsState = {
     modelError: Error | null;
     thresholds: IdCaptureThresholds;
     setThresholds: (value: IdCaptureThresholds) => void;
+    documentDetectionBoundaries: DocumentDetectionBoundaries;
+    setDocumentDetectionBoundaries: (value: DocumentDetectionBoundaries) => void;
     onPredictionMade: (handler: (prediction: IdCapturePrediction) => void) => void;
     detectionTime: number;
     focusPredictionTime: number;

package/dist/components/video_signature_capture/VideoSignatureCapture.d.ts

@@ -2,12 +2,14 @@ import React, { ComponentType } from 'react';
 import { SignatureData } from '../signature_capture/data';
 import { CustomerSuppliedVerbiage } from '../../lib/locales';
 import { FaceCaptureGuideOverlayProps } from '../face_liveness/FaceCaptureGuideOverlay';
+import { VideoSignatureGuidesClassNames } from './VideoSignatureGuides';
 export type VideoSignatureCaptureClassNames = {
     container?: string;
     cameraFeed?: string;
     guidanceMessageContainer?: string;
     guidanceMessage?: string;
     exitCaptureBtn?: string;
+    videoSignatureGuidesClassNames?: VideoSignatureGuidesClassNames;
 };
 export type VideoSignatureCaptureColors = {
     guidanceMessageBackgroundColor?: string;

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

@@ -68,4 +68,11 @@ export type ObjectDetectorPrediction = ObjectDetectorResult & {
     frameHeight: number;
 };
 export declare function makeDocumentDetectorPrediction(detector: ObjectDetector, frame: HTMLCanvasElement): Promise<ObjectDetectorPrediction | null>;
-export declare function processDocumentDetectorPrediction(prediction: ObjectDetectorPrediction, thresholds: DocumentDetectionThresholds): DocumentDetectionPrediction;
+export type DocumentDetectionBoundaries = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export declare const defaultDocumentDetectionBoundaries: DocumentDetectionBoundaries;
+export declare function processDocumentDetectorPrediction(prediction: ObjectDetectorPrediction, thresholds: DocumentDetectionThresholds, boundaries?: DocumentDetectionBoundaries): DocumentDetectionPrediction;

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.61';
+var webSdkVersion = '2.1.63';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -5581,8 +5581,17 @@ function makeDocumentDetectorPrediction(detector, frame) {
     });
   });
 }
-function processDocumentDetectorPrediction(prediction, thresholds) {
-  var _a, _b, _c, _d, _e, _f, _g;
+var defaultDocumentDetectionBoundaries = {
+  top: 20,
+  bottom: 20,
+  left: 20,
+  right: 20
+};
+function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  if (boundaries === void 0) {
+    boundaries = defaultDocumentDetectionBoundaries;
+  }
   var detections = prediction.detections,
     frameWidth = prediction.frameWidth,
     frameHeight = prediction.frameHeight,
@@ -5631,25 +5640,28 @@ function processDocumentDetectorPrediction(prediction, thresholds) {
   }
   var documentInBounds = false;
   if (bestDocument) {
-    var boundaryPx = 20;
-    var _h = bestDocument.box,
-      boundaryX = _h.xMin,
-      boundaryY = _h.yMin,
-      boundaryWidth = _h.width,
-      boundaryHeight = _h.height;
-    documentInBounds = boundaryY > boundaryPx &&
+    var boundaryTop = (_h = boundaries.top) !== null && _h !== void 0 ? _h : 20;
+    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;
+    documentInBounds = yMin > boundaryTop &&
     // Is it valid top edge of ID detected?
-    boundaryY + boundaryHeight + boundaryPx < frameHeight && (
+    yMin + height + boundaryBottom < frameHeight && (
     // Is it valid bottom edge less than max video height
-    boundaryX > boundaryPx || boundaryX < boundaryPx && boundaryX + boundaryWidth > frameWidth * 0.8) &&
+    xMin > boundaryLeft || xMin < boundaryLeft && xMin + width > frameWidth * 0.8) &&
     // If either the left side visible or if not, right edge of ID should be more than 80% of width.
-    boundaryX + boundaryWidth + boundaryPx < frameWidth; // Valid right edge if it's less than video width.
+    xMin + width + boundaryRight < frameWidth; // Valid right edge if it's less than video width.
   }
   var documentTooClose = false;
   if (bestDocument) {
-    var _j = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
-      docWidth = _j[0],
-      docHeight = _j[1];
+    var _o = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
+      docWidth = _o[0],
+      docHeight = _o[1];
     documentTooClose = docWidth > 0.85 || docHeight > 0.85;
   }
   return {
@@ -5762,6 +5774,10 @@ var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
   setDocumentDetectionThresholds: function setDocumentDetectionThresholds() {
     return null;
   },
+  documentDetectionBoundaries: defaultDocumentDetectionBoundaries,
+  setDocumentDetectionBoundaries: function setDocumentDetectionBoundaries() {
+    return null;
+  },
   documentDetectionLastPredictionCanvas: {
     current: null
   },
@@ -5791,28 +5807,31 @@ function DocumentDetectionModelProvider(_a) {
   var _g = React.useState({}),
     documentDetectionThresholds = _g[0],
     setDocumentDetectionThresholds = _g[1];
-  var _h = React.useState(0),
-    detectionTime = _h[0],
-    setDetectionTime = _h[1];
+  var _h = React.useState(defaultDocumentDetectionBoundaries),
+    documentDetectionBoundaries = _h[0],
+    setDocumentDetectionBoundaries = _h[1];
   var _j = React.useState(0),
-    timesAllZero = _j[0],
-    setTimesAllZero = _j[1];
+    detectionTime = _j[0],
+    setDetectionTime = _j[1];
   var _k = React.useState(0),
-    canvasKey = _k[0],
-    setCanvasKey = _k[1];
+    timesAllZero = _k[0],
+    setTimesAllZero = _k[1];
+  var _l = React.useState(0),
+    canvasKey = _l[0],
+    setCanvasKey = _l[1];
   var stopDetection = React.useRef(0);
-  var _l = useLoadDocumentDetector({
+  var _m = useLoadDocumentDetector({
       modelPath: documentDetectionModelPath,
       modelLoadTimeoutMs: documentDetectionModelLoadTimeoutMs,
       scoreThreshold: documentDetectionModelScoreThreshold,
       onModelError: onDocumentDetectionModelError
     }),
-    detector = _l.detector,
-    ready = _l.ready,
-    modelDownloadProgress = _l.modelDownloadProgress,
-    modelError = _l.modelError,
-    setModelError = _l.setModelError;
-  var _m = useFrameLoop(React.useCallback(function (frameId) {
+    detector = _m.detector,
+    ready = _m.ready,
+    modelDownloadProgress = _m.modelDownloadProgress,
+    modelError = _m.modelError,
+    setModelError = _m.setModelError;
+  var _o = useFrameLoop(React.useCallback(function (frameId) {
       return __awaiter(_this, void 0, void 0, function () {
         var stopDetectionAtStart, vw, vh, ctx, prediction, processedPrediction;
         var _a;
@@ -5833,7 +5852,7 @@ function DocumentDetectionModelProvider(_a) {
             case 1:
               prediction = _b.sent();
               if (!prediction) return [3 /*break*/, 3];
-              processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds);
+              processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds, documentDetectionBoundaries);
               processedPrediction.frameId = frameId;
               setDetectionTime(prediction.time);
               debug(processedPrediction);
@@ -5850,12 +5869,12 @@ function DocumentDetectionModelProvider(_a) {
           }
         });
       });
-    }, [cameraReady, detector, documentDetectionThresholds, ready, videoLoaded, videoRef]), {
+    }, [cameraReady, detector, documentDetectionBoundaries, documentDetectionThresholds, ready, videoLoaded, videoRef]), {
       throttleMs: throttleMs,
       autoStart: autoStart
     }),
-    start = _m.start,
-    stop = _m.stop;
+    start = _o.start,
+    stop = _o.stop;
   React.useEffect(function setErrorIfAllZero() {
     if (timesAllZero >= 2) {
       setModelError(new Error('model is returning all zeroes'));
@@ -5881,10 +5900,12 @@ function DocumentDetectionModelProvider(_a) {
       detectionTime: detectionTime,
       documentDetectionThresholds: documentDetectionThresholds,
       setDocumentDetectionThresholds: setDocumentDetectionThresholds,
+      documentDetectionBoundaries: documentDetectionBoundaries,
+      setDocumentDetectionBoundaries: setDocumentDetectionBoundaries,
       documentDetectionLastPredictionCanvas: lastPredictionCanvas,
       clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
     };
-  }, [start, stop, ready, modelError, modelDownloadProgress, onDocumentDetected, detectionTime, documentDetectionThresholds, clearDocumentDetectionLastPredictionCanvas]);
+  }, [start, stop, ready, modelError, modelDownloadProgress, onDocumentDetected, detectionTime, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
   return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -6011,6 +6032,10 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   setThresholds: function setThresholds() {
     return null;
   },
+  documentDetectionBoundaries: defaultDocumentDetectionBoundaries,
+  setDocumentDetectionBoundaries: function setDocumentDetectionBoundaries() {
+    return null;
+  },
   onPredictionMade: function onPredictionMade() {
     return null;
   },
@@ -6044,6 +6069,8 @@ function IdCaptureModelsProviderInner(_a) {
     detectionTime = _b.detectionTime,
     documentDetectionThresholds = _b.documentDetectionThresholds,
     setDocumentDetectionThresholds = _b.setDocumentDetectionThresholds,
+    documentDetectionBoundaries = _b.documentDetectionBoundaries,
+    setDocumentDetectionBoundaries = _b.setDocumentDetectionBoundaries,
     documentDetectionModelError = _b.documentDetectionModelError;
   var _c = React.useContext(FocusModelContext),
     focusModelReady = _c.focusModelReady,
@@ -6152,6 +6179,8 @@ function IdCaptureModelsProviderInner(_a) {
       stop: stopDocumentDetection,
       thresholds: thresholds,
       setThresholds: setThresholds,
+      documentDetectionBoundaries: documentDetectionBoundaries,
+      setDocumentDetectionBoundaries: setDocumentDetectionBoundaries,
       onPredictionMade: onPredictionMade,
       detectionTime: detectionTime,
       focusPredictionTime: focusPredictionTime,
@@ -6161,7 +6190,7 @@ function IdCaptureModelsProviderInner(_a) {
       requiredDocumentType: requiredDocumentType,
       setRequiredDocumentType: setRequiredDocumentType
     };
-  }, [detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
+  }, [detectionTime, documentDetectionBoundaries, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setDocumentDetectionBoundaries, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
   return /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
@@ -13372,6 +13401,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     "$background": colors.guidanceMessageBackgroundColor,
     "$textColor": colors.guidanceMessageTextColor
   }, verbiage.guidanceMessageText))), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
+    classNames: classNames.videoSignatureGuidesClassNames,
     status: "success"
   }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height)), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
     onClick: onExit,
@@ -13565,10 +13595,11 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   var guidesComponent = React.useCallback(function (_a) {
     var status = _a.status;
     return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureGuides, {
+      classNames: classNames === null || classNames === void 0 ? void 0 : classNames.videoSignatureGuidesClassNames,
       faceGuideStatus: status,
       requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS'
     });
-  }, []);
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.videoSignatureGuidesClassNames]);
   return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureContextProvider, null, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     className: "flex ".concat((_b = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _b !== void 0 ? _b : '')
   }, /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
@@ -13737,8 +13768,8 @@ var Container = styled__default.default.div(templateObject_1$7 || (templateObjec
   return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
 });
 var Inner = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  max-height: 1280px;\n  display: flex;\n  margin: auto;\n  align-items: center;\n  flex-direction: column;\n"], ["\n  width: 100%;\n  height: 100%;\n  max-height: 1280px;\n  display: flex;\n  margin: auto;\n  align-items: center;\n  flex-direction: column;\n"])));
-var FaceGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: relative;\n  height: 70%;\n"], ["\n  position: relative;\n  height: 70%;\n"])));
-var IdCardGuideContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n  max-width: 100%;\n  height: 30%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n  max-width: 100%;\n  height: 30%;\n"])));
+var FaceGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: relative;\n  height: 65%;\n"], ["\n  position: relative;\n  height: 65%;\n"])));
+var IdCardGuideContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n  max-width: 100%;\n  height: 35%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  margin: 0 auto;\n  position: relative;\n  max-width: 100%;\n  height: 35%;\n"])));
 var IdCardGuideInner = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n"], ["\n  position: relative;\n  height: 100%;\n"])));
 var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  padding: 0 40px;\n  position: fixed;\n  bottom: 14px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n"], ["\n  width: 100%;\n  text-align: center;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  padding: 0 40px;\n  position: fixed;\n  bottom: 14px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n"])));
 var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-content: center;\n  margin: 12px auto;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"], ["\n  align-content: center;\n  margin: 12px auto;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"])));
@@ -13849,8 +13880,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
 var edgeBoundary = 0.05;
 var defaultVideoIdCaptureThresholds = {
   detection: {
-    idCardFront: 0.5,
-    idCardBack: 0.6,
+    idCardFront: 0.4,
+    idCardBack: 0.4,
     passport: 1
   },
   focus: {
@@ -13937,6 +13968,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     stopIdModels = _19.stop,
     onIdPredictionMade = _19.onPredictionMade,
     setThresholds = _19.setThresholds,
+    setDocumentDetectionBoundaries = _19.setDocumentDetectionBoundaries,
     bestFrameDetails = _19.bestFrameDetails,
     resetBestFrame = _19.resetBestFrame,
     idModelError = _19.modelError;
@@ -13998,6 +14030,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     setThresholds(videoIdCaptureThresholds);
   }, [requestedAction, setThresholds, videoIdCaptureThresholds]);
+  React.useEffect(function () {
+    setDocumentDetectionBoundaries({
+      top: 20,
+      left: 20,
+      right: 20,
+      bottom: 1
+    });
+  }, [setDocumentDetectionBoundaries]);
   var _26 = React.useState(0),
     currentDetectionScore = _26[0],
     setCurrentDetectionScore = _26[1];