idmission-web-sdk 2.1.6 → 2.1.8

package/dist/sdk2.esm.js

@@ -8,13 +8,13 @@ import { useTranslation, initReactI18next } from 'react-i18next';
 import { Upload } from 'tus-js-client';
 import useResizeObserver from 'use-resize-observer';
 import { ImageSegmenter, FilesetResolver, ImageClassifier, FaceDetector, ObjectDetector } from '@mediapipe/tasks-vision';
-import { useDebouncedCallback } from 'use-debounce';
+import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
 import { createPortal } from 'react-dom';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import i18n from 'i18next';
 import SignatureCanvas from 'react-signature-canvas';
 
-var webSdkVersion = '2.1.6';
+var webSdkVersion = '2.1.8';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -2243,39 +2243,15 @@ function preloadVisionRuntime() {
   });
 }
 
-function _isNavigatorDefined() {
-  return typeof navigator !== 'undefined' && navigator != null;
-}
-function isMobile(nav) {
-  if (nav || _isNavigatorDefined()) {
-    if (!nav) {
-      nav = navigator;
-    }
-    if (nav.product === 'ReactNative') {
-      return true;
-    }
-    var a = nav.userAgent || nav.vendor || (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    typeof window !== 'undefined' ? window.opera : '');
-    if (!a) {
-      var navAny = nav;
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      return navAny.userAgentData && navAny.userAgentData.mobile;
-    }
-    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) ||
-    // tslint:disable-next-line:max-line-length
-    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4));
+function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
+  if (quality === void 0) {
+    quality = 0.92;
   }
-  return false;
-}
-
-function cropToShoulders(rawCanvas, cropCanvas, frame, face) {
-  if (!rawCanvas || !cropCanvas) return '';
+  if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
   var rawCtx = rawCanvas.getContext('2d');
   var cropCtx = cropCanvas.getContext('2d');
-  if (!rawCtx || !cropCtx) throw new Error('could not get 2d context');
+  var resizeCtx = resizeCanvas.getContext('2d');
+  if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
   rawCanvas.width = frame.width;
   rawCanvas.height = frame.height;
   rawCtx.putImageData(frame, 0, 0);
@@ -2285,7 +2261,7 @@ function cropToShoulders(rawCanvas, cropCanvas, frame, face) {
   var frameHeight = frame.height;
   var xPadding = frameHeight * 0.6 - width;
   var xPos = Math.max(0, xMin - xPadding / 2);
-  if (isMobile()) {
+  if (frame.height > frame.width) {
     cropCanvas.width = frame.width;
     cropCanvas.height = frame.height;
     cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
@@ -2294,9 +2270,14 @@ function cropToShoulders(rawCanvas, cropCanvas, frame, face) {
     cropCanvas.height = frame.height;
     cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
   }
-  var dataURL = cropCanvas.toDataURL('image/jpeg', 0.92);
+  resizeCanvas.height = maxHeight !== null && maxHeight !== void 0 ? maxHeight : cropCanvas.height;
+  resizeCanvas.width = cropCanvas.width * (resizeCanvas.height / cropCanvas.height);
+  resizeCtx === null || resizeCtx === void 0 ? void 0 : resizeCtx.drawImage(cropCanvas, 0, 0, resizeCanvas.width, resizeCanvas.height);
+  var dataURL = resizeCanvas.toDataURL('image/jpeg', quality);
+  log('cropToShoulders size', new TextEncoder().encode(dataURL).length);
   clearCanvas(rawCanvas);
   clearCanvas(cropCanvas);
+  clearCanvas(resizeCanvas);
   return dataURL;
 }
 function cropToDetectedObjectBox(frame, box, canvas) {
@@ -2458,11 +2439,11 @@ function waitForVideoReady(videoRef, checkEveryMs) {
     checkEveryMs = 100;
   }
   return new Promise(function (resolve) {
-    var _a;
-    if (((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) === 4) return resolve();
+    var _a, _b;
+    if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) return resolve();
     var interval = setInterval(function () {
-      var _a;
-      if (((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) === 4) {
+      var _a, _b;
+      if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) {
         clearInterval(interval);
         resolve();
       }
@@ -3629,6 +3610,34 @@ function FocusModelProvider(_a) {
   }), children);
 }
 
+function _isNavigatorDefined() {
+  return typeof navigator !== 'undefined' && navigator != null;
+}
+function isMobile(nav) {
+  if (nav || _isNavigatorDefined()) {
+    if (!nav) {
+      nav = navigator;
+    }
+    if (nav.product === 'ReactNative') {
+      return true;
+    }
+    var a = nav.userAgent || nav.vendor || (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    typeof window !== 'undefined' ? window.opera : '');
+    if (!a) {
+      var navAny = nav;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return navAny.userAgentData && navAny.userAgentData.mobile;
+    }
+    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) ||
+    // tslint:disable-next-line:max-line-length
+    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4));
+  }
+  return false;
+}
+
 var onMobile = isMobile();
 var defaultIdCaptureThresholds = {
   detection: defaultDocumentDetectionThresholds,
@@ -7280,6 +7289,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     dispatch = _8[1];
   var _9 = useContext(CameraStateContext),
     cameraAccessDenied = _9.cameraAccessDenied,
+    requestCameraAccess = _9.requestCameraAccess,
     releaseCameraAccess = _9.releaseCameraAccess;
   var _10 = useState(false),
     overlayDismissed = _10[0],
@@ -7390,6 +7400,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     attempt = _13[0],
     setAttempt = _13[1];
   var onExit = useCallback(function () {
+    releaseCameraAccess();
     setOverlayDismissed(false);
     setAttempt(function (n) {
       return n + 1;
@@ -7398,7 +7409,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       type: 'resetWizard'
     });
     onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
-  }, [dispatch, onExitCapture]);
+    requestCameraAccess();
+  }, [dispatch, onExitCapture, releaseCameraAccess]);
   useEffect(function () {
     if (submissionStatus !== SubmissionStatus.READY) {
       releaseCameraAccessOnExit && releaseCameraAccess();
@@ -7905,9 +7917,6 @@ var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4
 var initialState$3 = {
   videoWidth: 0,
   videoHeight: 0,
-  capturing: false,
-  captured: false,
-  captureFailed: false,
   frame: null,
   faces: [],
   faceNotCentered: false,
@@ -7915,36 +7924,12 @@ var initialState$3 = {
   faceTooClose: false,
   faceTooFar: false,
   faceReady: false,
-  faceReadyAt: null,
-  goodFramesCount: 0,
-  goodFramesThreshold: 1,
-  goodFramesThresholdMet: false
+  faceReadyAt: null
 };
 var reducer$3 = function reducer(state, action) {
   switch (action.type) {
     case 'configure':
-      return __assign(__assign({}, state), {
-        videoWidth: action.payload.videoWidth,
-        videoHeight: action.payload.videoHeight
-      });
-    case 'capturing':
-      return __assign(__assign({}, state), {
-        capturing: true,
-        captured: false,
-        captureFailed: false
-      });
-    case 'captured':
-      return __assign(__assign({}, state), {
-        capturing: false,
-        captured: true,
-        captureFailed: false
-      });
-    case 'captureFailed':
-      return __assign(__assign({}, state), {
-        capturing: false,
-        captured: false,
-        captureFailed: true
-      });
+      return __assign(__assign({}, state), action.payload);
     case 'facesDetected':
       {
         var faces = action.payload.faces;
@@ -7953,8 +7938,7 @@ var reducer$3 = function reducer(state, action) {
           faceLookingAway = false,
           faceTooClose = false,
           faceTooFar = false,
-          faceReadyAt = state.faceReadyAt,
-          goodFramesCount = state.goodFramesCount;
+          faceReadyAt = state.faceReadyAt;
         if (face) {
           // calculate centroids
           var vCX = state.videoWidth / 2;
@@ -7980,7 +7964,6 @@ var reducer$3 = function reducer(state, action) {
         var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
         if (!faceReady) {
           faceReadyAt = null;
-          goodFramesCount = 0;
         } else if (!state.faceReady) {
           faceReadyAt = new Date();
         }
@@ -7991,8 +7974,7 @@ var reducer$3 = function reducer(state, action) {
           faceTooClose: faceTooClose,
           faceTooFar: faceTooFar,
           faceReady: faceReady,
-          faceReadyAt: faceReadyAt,
-          goodFramesCount: goodFramesCount
+          faceReadyAt: faceReadyAt
         });
       }
   }
@@ -8044,16 +8026,14 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     }
   }, [cameraReady, videoRef]);
-  useEffect(function () {
-    onPredictionMade(function (prediction) {
-      dispatch({
-        type: 'facesDetected',
-        payload: {
-          faces: prediction
-        }
-      });
+  onPredictionMade(useThrottledCallback(function (prediction) {
+    dispatch({
+      type: 'facesDetected',
+      payload: {
+        faces: prediction
+      }
     });
-  }, [onPredictionMade]);
+  }, 16));
   var _p = useState(false),
     captureReady = _p[0],
     setCaptureReady = _p[1];
@@ -8072,22 +8052,14 @@ var SelfieCapture = function SelfieCapture(_a) {
     };
   }, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
   useEffect(function () {
-    (function () {
-      return __awaiter(void 0, void 0, void 0, function () {
-        var ctx, imageData;
-        return __generator(this, function (_a) {
-          if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
-            drawToCanvas(lastPredictionCanvas.current, videoRef.current);
-            ctx = lastPredictionCanvas.current.getContext('2d');
-            if (!ctx) return [2 /*return*/];
-            imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
-            onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
-            clearCanvas(lastPredictionCanvas.current);
-          }
-          return [2 /*return*/];
-        });
-      });
-    })();
+    if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
+      drawToCanvas(lastPredictionCanvas.current, videoRef.current);
+      var ctx = lastPredictionCanvas.current.getContext('2d');
+      if (!ctx) return;
+      var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
+      onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
+      clearCanvas(lastPredictionCanvas.current);
+    }
   }, [captureReady, onSelfieCaptured, state.faces, videoRef]);
   var _q = useTimeout(timeoutDurationMs, onTimeout),
     timedOut = _q.timedOut,
@@ -8136,7 +8108,7 @@ var SelfieCapture = function SelfieCapture(_a) {
       scaling: debugScalingDetails,
       color: satisfied ? 'green' : 'red'
     });
-  }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default.createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default.createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " ", state.goodFramesCount, ' ', "Good Frames", /*#__PURE__*/React__default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
+  }))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default.createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default.createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: classNames.exitCaptureBtn
   }));
@@ -8256,6 +8228,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     setImageUrl = _m[1];
   var rawCanvas = useRef(null);
   var cropCanvas = useRef(null);
+  var resizeCanvas = useRef(null);
   var theme = useTheme();
   var onSelfieCaptured = useCallback(function (frame, face) {
     onCapture === null || onCapture === void 0 ? void 0 : onCapture();
@@ -8284,7 +8257,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
           switch (_b.label) {
             case 0:
               _b.trys.push([0, 3,, 4]);
-              imageUrl_1 = cropToShoulders(rawCanvas.current, cropCanvas.current, frame, face);
+              imageUrl_1 = cropToShoulders(rawCanvas.current, cropCanvas.current, resizeCanvas.current, frame, face, 0.92, 500);
               setImageUrl(imageUrl_1);
               _a = checkLiveness;
               return [4 /*yield*/, dataUrlToBase64(imageUrl_1)];
@@ -8397,6 +8370,8 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     ref: rawCanvas
   }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
     ref: cropCanvas
+  }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
+    ref: resizeCanvas
   }), /*#__PURE__*/React__default.createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
     onExit: onExit,
@@ -9115,6 +9090,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
   var _t = useContext(CameraStateContext),
     cameraAccessDenied = _t.cameraAccessDenied,
+    requestCameraAccess = _t.requestCameraAccess,
     releaseCameraAccess = _t.releaseCameraAccess;
   var _u = useState(''),
     faceCropImageUrl = _u[0],
@@ -9186,8 +9162,22 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
       return n + 1;
     });
     setCaptureState('LOADING');
+    releaseCameraAccess();
     onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
-  }, [onExitCapture]);
+    requestCameraAccess();
+  }, [onExitCapture, releaseCameraAccess, requestCameraAccess]);
+  var onRetryCallback = useCallback(function () {
+    logCaptureMetadata();
+    setAttempt(function (n) {
+      return n + 1;
+    });
+    setRetryCount(function (n) {
+      return n + 1;
+    });
+    setCaptureState('LOADING');
+    releaseCameraAccess();
+    requestCameraAccess();
+  }, [logCaptureMetadata, releaseCameraAccess, requestCameraAccess]);
   var onDoneCallback = useCallback(function () {
     logCaptureMetadata();
     releaseCameraAccessOnExit && releaseCameraAccess();
@@ -9233,10 +9223,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
           colors: colors.success,
           verbiage: verbiage.success,
           onDoneClick: onDoneCallback,
-          onRetryClick: function onRetryClick() {
-            logCaptureMetadata();
-            setCaptureState('CAPTURING');
-          }
+          onRetryClick: onRetryCallback
         });
       case 'FAILED':
         return /*#__PURE__*/React__default.createElement(FaceLivenessFailure, {
@@ -9246,13 +9233,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
           colors: colors.failure,
           verbiage: verbiage.failure,
           canRetry: maxRetries > -1 && retryCount < maxRetries,
-          onRetryClick: function onRetryClick() {
-            logCaptureMetadata();
-            setRetryCount(function (c) {
-              return c + 1;
-            });
-            setCaptureState('CAPTURING');
-          },
+          onRetryClick: onRetryCallback,
           onExitClick: function onExitClick() {
             releaseCameraAccessOnExit && releaseCameraAccess();
             setTimeout(function () {
@@ -10021,16 +10002,19 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     setSignatureData = _k.setSignatureData,
     setSignatureVideoUrl = _k.setSignatureVideoUrl,
     logSelfieCaptureAttempt = _k.logSelfieCaptureAttempt;
-  var cameraAccessDenied = useContext(CameraStateContext).cameraAccessDenied;
-  var _l = useState('LOADING'),
-    captureState = _l[0],
-    setCaptureState = _l[1];
+  var _l = useContext(CameraStateContext),
+    cameraAccessDenied = _l.cameraAccessDenied,
+    requestCameraAccess = _l.requestCameraAccess,
+    releaseCameraAccess = _l.releaseCameraAccess;
+  var _m = useState('LOADING'),
+    captureState = _m[0],
+    setCaptureState = _m[1];
   var operationStartedAt = useRef();
   var captureStartedAt = useRef();
   var captureEndedAt = useRef();
-  var _m = useContext(SelfieGuidanceModelsContext),
-    start = _m.start,
-    stop = _m.stop;
+  var _o = useContext(SelfieGuidanceModelsContext),
+    start = _o.start,
+    stop = _o.stop;
   useEffect(function () {
     operationStartedAt.current = new Date();
   }, []);
@@ -10087,16 +10071,18 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   var onSignatureCaptureFacesNotDetected = useCallback(function () {
     setCaptureState('CHECKING_LIVENESS');
   }, []);
-  var _o = useState(0),
-    attempt = _o[0],
-    setAttempt = _o[1];
+  var _p = useState(0),
+    attempt = _p[0],
+    setAttempt = _p[1];
   var onExit = useCallback(function () {
+    releaseCameraAccess();
     setAttempt(function (n) {
       return n + 1;
     });
     setCaptureState('LOADING');
     onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
-  }, [onExitCapture]);
+    requestCameraAccess();
+  }, [onExitCapture, releaseCameraAccess, requestCameraAccess]);
   var onRetry = useCallback(function () {
     onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
     onExit();
@@ -10471,6 +10457,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     onRecordingFailed = _a.onRecordingFailed,
+    onExitCapture = _a.onExitCapture,
     _w = _a.idCaptureModelsEnabled,
     idCaptureModelsEnabled = _w === void 0 ? true : _w,
     _x = _a.idCardFrontDelay,
@@ -10851,7 +10838,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     },
     disabled: !!countdownStartedAt || frameLock.current,
     className: classNames.captureBtn
-  }, captureBtnText))));
+  }, captureBtnText))), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
+    onClick: onExitCapture,
+    className: classNames.exitCaptureBtn
+  }));
 };
 var CountdownContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100dvw;\n  height: 100dvh;\n  z-index: 99999;\n  display: flex;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100dvw;\n  height: 100dvh;\n  z-index: 99999;\n  display: flex;\n"])));
 var Countdown = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  color: white;\n  font-size: 64px;\n  font-weight: bold;\n  margin: auto;\n"], ["\n  color: white;\n  font-size: 64px;\n  font-weight: bold;\n  margin: auto;\n"])));
@@ -11104,13 +11094,19 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     });
     setCaptureState('CHECKING_LIVENESS');
   }, []);
+  var handleExitCapture = useCallback(function () {
+    setAttempt(function (n) {
+      return n + 1;
+    });
+    onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
+  }, [onExitCapture]);
   if (submissionStatus === SubmissionStatus.SUBMITTING) {
     return /*#__PURE__*/React__default.createElement(PageContainer, {
       className: "flex"
     }, /*#__PURE__*/React__default.createElement(Spinner, null));
   }
   return /*#__PURE__*/React__default.createElement(CameraProvider, {
-    key: isCapturingId ? 'id-camera' : 'selfie-camera',
+    key: "".concat(isCapturingId ? 'id' : 'selfie', "-camera-").concat(attempt),
     preferContinuityCamera: isCapturingId,
     preferFrontFacingCamera: !isCapturingId,
     requireMicrophoneAccess: !isCapturingId && !!readTextPrompt,
@@ -11146,7 +11142,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           colors: colors.idCapture,
           verbiage: verbiage.idCapture,
           onSuccess: onIdCaptureSuccess,
-          onExitCapture: onExitCapture,
+          onExitCapture: handleExitCapture,
           onUserCancel: onUserCancel,
           skipSuccessScreen: true,
           releaseCameraAccessOnExit: false,
@@ -11162,7 +11158,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           silentFallback: silentFallback
         }, faceLivenessProps, {
           onComplete: onFaceCaptureSuccess,
-          onExitCapture: onExitCapture,
+          onExitCapture: handleExitCapture,
           onExitAfterFailure: onFaceCaptureExitAfterFailure,
           onUserCancel: onUserCancel,
           skipSuccessScreen: true,
@@ -11182,6 +11178,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           onIdBackImageCaptured: setIdCaptureVideoIdBackImage,
           onFaceNotDetected: onVideoCaptureFaceNotDetected,
           onRecordingFailed: onRecordingFailed,
+          onExitCapture: handleExitCapture,
           idCaptureModelsEnabled: idCaptureModelsEnabled,
           videoIdCaptureThresholds: videoIdCaptureThresholds,
           skipShowIdCardBack: skipShowIdCardBack,
@@ -12469,6 +12466,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     setImageUrl = _k[1];
   var rawCanvas = useRef(null);
   var cropCanvas = useRef(null);
+  var resizeCanvas = useRef(null);
   var onSelfieCaptured = useCallback(function (frame, face) {
     dispatch({
       type: 'verificationReady',
@@ -12481,7 +12479,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
   var isReady = state.requestState === 'CAPTURED';
   useEffect(function () {
     if (!frame || !face || submissionError) return;
-    var imageUrl = cropToShoulders(rawCanvas.current, cropCanvas.current, frame, face);
+    var imageUrl = cropToShoulders(rawCanvas.current, cropCanvas.current, resizeCanvas.current, frame, face);
     setImageUrl(imageUrl);
     dataUrlToBase64(imageUrl).then(function (img) {
       setSelfieImage(img);
@@ -12544,6 +12542,8 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     ref: rawCanvas
   }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
     ref: cropCanvas
+  }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
+    ref: resizeCanvas
   }), /*#__PURE__*/React__default.createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
     onExit: onExit,
@@ -13022,6 +13022,7 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     setImageUrl = _k[1];
   var rawCanvas = useRef(null);
   var cropCanvas = useRef(null);
+  var resizeCanvas = useRef(null);
   var onSelfieCaptured = useCallback(function (frame, face) {
     dispatch({
       type: 'identificationReady',
@@ -13036,7 +13037,7 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
   var isReady = state.requestState === 'CAPTURED';
   useEffect(function () {
     if (!frame || !face || submissionError) return;
-    var imageUrl = cropToShoulders(rawCanvas.current, cropCanvas.current, frame, face);
+    var imageUrl = cropToShoulders(rawCanvas.current, cropCanvas.current, resizeCanvas.current, frame, face);
     setImageUrl(imageUrl);
     dataUrlToBase64(imageUrl).then(function (img) {
       setSelfieImage(img);
@@ -13099,6 +13100,8 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     ref: rawCanvas
   }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
     ref: cropCanvas
+  }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
+    ref: resizeCanvas
   }), /*#__PURE__*/React__default.createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
     onExit: onExit,