idmission-web-sdk 1.0.183 → 1.0.184

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

@@ -20,6 +20,7 @@ export type IdVideoCaptureColors = {
 export type IdVideoCaptureVerbiage = {
     guides?: IdVideoCaptureGuidesVerbiage;
     readTextPrompt?: ReadTextPromptVerbiage;
+    faceNotCenteredText?: CustomerSuppliedVerbiage;
 };
 export type IdVideoCaptureProps = {
     onComplete?: (videoUrl: string) => void;

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

@@ -65,6 +65,7 @@ declare const _default: {
     'Upload succeeded!': string;
     'Display the front of your ID card...': string;
     'Display the back of your ID card...': string;
+    'Please move your face to the center...': string;
     'Please read the following text aloud': string;
     'Video ID has been successfully captured!': string;
 };

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

@@ -73,6 +73,7 @@ export declare const resources: {
             'Upload succeeded!': string;
             'Display the front of your ID card...': string;
             'Display the back of your ID card...': string;
+            'Please move your face to the center...': string;
             'Please read the following text aloud': string;
             'Video ID has been successfully captured!': string;
         };

package/dist/sdk2.cjs.development.js

@@ -48,7 +48,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.183';
+var webSdkVersion = '1.0.184';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -9666,6 +9666,7 @@ var esTranslation = {
   'Upload succeeded!': 'Proceso completo!',
   'Display the front of your ID card...': 'Hay que mostrar el frente de la identificación...',
   'Display the back of your ID card...': 'Hay que mostrar el reverso de la identificación...',
+  'Please move your face to the center...': 'Por favor, hay que mover la cabeza hacia el centro...',
   'Please read the following text aloud': 'Hay que leer el siguiente texto en voz alta',
   'Video ID has been successfully captured!': 'Video ID capturado exitosamente!'
 };
@@ -14013,71 +14014,75 @@ var ReadTextPromptTimeRemaining = styled__default['default'].div(templateObject_
 var DoneButton = styled__default['default'](LoaderButton)(templateObject_6$1 || (templateObject_6$1 = tslib.__makeTemplateObject(["\n  margin: auto 0;\n"], ["\n  margin: auto 0;\n"])));
 var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
+var edgeBoundary = 0.05;
 var IdVideoCapture = function IdVideoCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
   var onComplete = _a.onComplete,
     onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
-    _j = _a.idCardFrontDetectionThreshold,
-    idCardFrontDetectionThreshold = _j === void 0 ? 0.6 : _j,
-    _k = _a.idCardFrontFocusThreshold,
-    idCardFrontFocusThreshold = _k === void 0 ? 0 : _k,
-    _l = _a.goodIdCardFrontFramesThreshold,
-    goodIdCardFrontFramesThreshold = _l === void 0 ? 3 : _l,
-    _m = _a.idCardBackDetectionThreshold,
-    idCardBackDetectionThreshold = _m === void 0 ? 0.6 : _m,
-    _o = _a.idCardBackFocusThreshold,
-    idCardBackFocusThreshold = _o === void 0 ? 0 : _o,
-    _p = _a.goodIdCardBackFramesThreshold,
-    goodIdCardBackFramesThreshold = _p === void 0 ? 3 : _p,
-    _q = _a.skipShowIdCardBack,
-    skipShowIdCardBack = _q === void 0 ? false : _q,
+    _u = _a.idCardFrontDetectionThreshold,
+    idCardFrontDetectionThreshold = _u === void 0 ? 0.6 : _u,
+    _v = _a.idCardFrontFocusThreshold,
+    idCardFrontFocusThreshold = _v === void 0 ? 0 : _v,
+    _w = _a.goodIdCardFrontFramesThreshold,
+    goodIdCardFrontFramesThreshold = _w === void 0 ? 3 : _w,
+    _x = _a.idCardBackDetectionThreshold,
+    idCardBackDetectionThreshold = _x === void 0 ? 0.6 : _x,
+    _y = _a.idCardBackFocusThreshold,
+    idCardBackFocusThreshold = _y === void 0 ? 0 : _y,
+    _z = _a.goodIdCardBackFramesThreshold,
+    goodIdCardBackFramesThreshold = _z === void 0 ? 3 : _z,
+    _0 = _a.skipShowIdCardBack,
+    skipShowIdCardBack = _0 === void 0 ? false : _0,
     readTextPrompt = _a.readTextPrompt,
-    _r = _a.readTextTimeoutDurationMs,
-    readTextTimeoutDurationMs = _r === void 0 ? 15000 : _r,
-    _s = _a.assets,
-    assets = _s === void 0 ? {} : _s,
-    _t = _a.classNames,
-    classNames = _t === void 0 ? {} : _t,
-    _u = _a.colors,
-    colors = _u === void 0 ? {} : _u,
-    _v = _a.verbiage,
-    rawVerbiage = _v === void 0 ? {} : _v,
-    _w = _a.debugMode,
-    debugMode = _w === void 0 ? false : _w;
-  var _x = useResizeObserver__default['default'](),
-    ref = _x.ref,
-    _y = _x.width,
-    width = _y === void 0 ? 1 : _y,
-    _z = _x.height,
-    height = _z === void 0 ? 1 : _z;
-  var _0 = React.useContext(CameraStateContext),
-    cameraRef = _0.cameraRef,
-    videoRef = _0.videoRef,
-    videoLoaded = _0.videoLoaded,
-    cameraReady = _0.cameraReady;
-  var _1 = React.useState([]),
-    detectedObjects = _1[0],
-    setDetectedObjects = _1[1];
-  var _2 = React.useState([]),
-    faces = _2[0],
-    setFaces = _2[1];
-  var _3 = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _3.ready,
-    idModelsWorking = _3.working,
-    makeIdPrediction = _3.makePrediction,
-    onIdPredictionMade = _3.onPredictionMade,
-    setThresholds = _3.setThresholds,
-    bestFrameDetectionScore = _3.bestFrameDetectionScore,
-    bestFrameFocusScore = _3.bestFrameFocusScore,
-    resetBestFrame = _3.resetBestFrame;
+    _1 = _a.readTextTimeoutDurationMs,
+    readTextTimeoutDurationMs = _1 === void 0 ? 15000 : _1,
+    _2 = _a.assets,
+    assets = _2 === void 0 ? {} : _2,
+    _3 = _a.classNames,
+    classNames = _3 === void 0 ? {} : _3,
+    _4 = _a.colors,
+    colors = _4 === void 0 ? {} : _4,
+    _5 = _a.verbiage,
+    rawVerbiage = _5 === void 0 ? {} : _5,
+    _6 = _a.debugMode,
+    debugMode = _6 === void 0 ? false : _6;
+  var _7 = useResizeObserver__default['default'](),
+    ref = _7.ref,
+    _8 = _7.width,
+    width = _8 === void 0 ? 1 : _8,
+    _9 = _7.height,
+    height = _9 === void 0 ? 1 : _9;
+  var _10 = React.useContext(CameraStateContext),
+    cameraRef = _10.cameraRef,
+    videoRef = _10.videoRef,
+    videoLoaded = _10.videoLoaded,
+    cameraReady = _10.cameraReady;
+  var _11 = React.useState([]),
+    detectedObjects = _11[0],
+    setDetectedObjects = _11[1];
+  var _12 = React.useState([]),
+    faces = _12[0],
+    setFaces = _12[1];
+  var _13 = React.useState(true),
+    faceCentered = _13[0],
+    setFaceCentered = _13[1];
+  var _14 = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _14.ready,
+    idModelsWorking = _14.working,
+    makeIdPrediction = _14.makePrediction,
+    onIdPredictionMade = _14.onPredictionMade,
+    setThresholds = _14.setThresholds,
+    bestFrameDetectionScore = _14.bestFrameDetectionScore,
+    bestFrameFocusScore = _14.bestFrameFocusScore,
+    resetBestFrame = _14.resetBestFrame;
   var onSelfiePredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
-  var _4 = useVideoRecorder(cameraRef.current),
-    isRecording = _4.isRecording,
-    startRecording = _4.startRecording,
-    stopRecording = _4.stopRecording,
-    videoUrl = _4.videoUrl;
+  var _15 = useVideoRecorder(cameraRef.current),
+    isRecording = _15.isRecording,
+    startRecording = _15.startRecording,
+    stopRecording = _15.stopRecording,
+    videoUrl = _15.videoUrl;
   React.useEffect(function () {
     if (!isRecording && !videoUrl) startRecording();
     if (videoUrl) onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl);
@@ -14087,9 +14092,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady;
   }, [cameraReady, idModelsReady, videoLoaded]);
-  var _5 = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _5[0],
-    setRequestedAction = _5[1];
+  var _16 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _16[0],
+    setRequestedAction = _16[1];
   React.useEffect(function () {
     if (requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
     if (!idModelsReady || !cameraReady || !videoLoaded) return;
@@ -14117,15 +14122,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
-  var _6 = React.useState(0),
-    currentDetectionScore = _6[0],
-    setCurrentDetectionScore = _6[1];
-  var _7 = React.useState(0),
-    currentFocusScore = _7[0],
-    setCurrentFocusScore = _7[1];
-  var _8 = React.useState(0),
-    goodFramesCount = _8[0],
-    setGoodFramesCount = _8[1];
+  var _17 = React.useState(0),
+    currentDetectionScore = _17[0],
+    setCurrentDetectionScore = _17[1];
+  var _18 = React.useState(0),
+    currentFocusScore = _18[0],
+    setCurrentFocusScore = _18[1];
+  var _19 = React.useState(0),
+    goodFramesCount = _19[0],
+    setGoodFramesCount = _19[1];
   var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
   var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
@@ -14210,17 +14215,25 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     stopRecording();
   }, [stopRecording]);
   var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, onReadTextTimeout, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
-  var _9 = React.useState(0),
-    numFramesWithoutFaces = _9[0],
-    setNumFramesWithoutFaces = _9[1];
+  var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
+  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
+  var _20 = React.useState(0),
+    numFramesWithoutFaces = _20[0],
+    setNumFramesWithoutFaces = _20[1];
   React.useEffect(function () {
     onSelfiePredictionMade(function (faces) {
       setFaces(faces);
       setNumFramesWithoutFaces(function (n) {
         return faces.length === 0 ? n + 1 : 0;
       });
+      if (faces.length > 0) {
+        var box = faces[0].box;
+        setFaceCentered(box.xMin > frameWidth * edgeBoundary && box.yMin > frameHeight * edgeBoundary && box.xMax < frameWidth * (1 - edgeBoundary) && box.yMax < frameWidth * (1 - edgeBoundary));
+      } else {
+        setFaceCentered(false);
+      }
     });
-  }, [onSelfiePredictionMade]);
+  }, [frameHeight, frameWidth, onSelfiePredictionMade]);
   React.useEffect(function () {
     if (numFramesWithoutFaces >= 2) {
       onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
@@ -14228,17 +14241,21 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   }, [numFramesWithoutFaces, onFaceNotDetected]);
   colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
   colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
+  var theme = styled.useTheme();
+  var faceNotCenteredText = useTranslations(rawVerbiage, {
+    faceNotCenteredText: 'Please move your face to the center...'
+  }).faceNotCenteredText;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
     pageHeight: height,
-    videoWidth: (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0,
-    videoHeight: (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0
+    videoWidth: (_g = (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.videoWidth) !== null && _g !== void 0 ? _g : 0,
+    videoHeight: (_j = (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.videoHeight) !== null && _j !== void 0 ? _j : 0
   });
-  var satisfied = goodFramesCount > 0;
+  var satisfied = goodFramesCount > 0 && faceCentered;
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
-    className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
+    className: "flex ".concat((_k = classNames.container) !== null && _k !== void 0 ? _k : '')
   }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, {
     className: classNames.cameraFeed
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
@@ -14255,8 +14272,11 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     verbiage: rawVerbiage.guides,
     requestedAction: requestedAction,
     borderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
-  }), debugMode && ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction) && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
-    "$flipX": !((_g = cameraRef.current) === null || _g === void 0 ? void 0 : _g.isRearFacing)
+  }), !faceCentered && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": (_o = (_m = (_l = theme.guidanceMessages) === null || _l === void 0 ? void 0 : _l.negative) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : 'red',
+    "$textColor": (_r = (_q = (_p = theme.guidanceMessages) === null || _p === void 0 ? void 0 : _p.negative) === null || _q === void 0 ? void 0 : _q.textColor) !== null && _r !== void 0 ? _r : 'white'
+  }, faceNotCenteredText))), debugMode && ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction) && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
+    "$flipX": !((_s = cameraRef.current) === null || _s === void 0 ? void 0 : _s.isRearFacing)
   }, detectedObjects.map(function (obj, i) {
     var _a;
     return /*#__PURE__*/React__default['default'].createElement(IdCaptureDetectedObjectDebugBox, {
@@ -14267,7 +14287,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
   })), /*#__PURE__*/React__default['default'].createElement(DebugBoundingBoxOverlay, {
-    "$flipX": !((_h = cameraRef.current) === null || _h === void 0 ? void 0 : _h.isRearFacing)
+    "$flipX": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing)
   }, faces.map(function (face, i) {
     var _a;
     return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFaceDebugBox, {