idmission-web-sdk 2.3.67 → 2.3.68

package/dist/sdk2.cjs.development.js

@@ -236,7 +236,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.67';
+var webSdkVersion = '2.3.68';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -497,27 +497,27 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
   if (!portalLocation) return element;
   return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
 };
-var GuidanceMessage = styled__default.default.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
+var GuidanceMessage = styled__default.default.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
   var _a, _b, _c, _d, _e, _f;
   return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : 'white';
 }, function (props) {
   var _a, _b, _c, _d, _e, _f;
   return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
 });
-var templateObject_1$Q, templateObject_2$I;
+var templateObject_1$Q, templateObject_2$J;
 
 var wavesAnimation = styled.keyframes(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
-var progressBarAnimation = styled.keyframes(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
+var progressBarAnimation = styled.keyframes(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
 var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
 var progressBorderAnimation = styled.keyframes(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
-var templateObject_1$P, templateObject_2$H, templateObject_3$u, templateObject_4$n;
+var templateObject_1$P, templateObject_2$I, templateObject_3$u, templateObject_4$n;
 
 var OverlayContainer = styled__default.default.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"])), function (props) {
   return props.theme.background ? "".concat(props.theme.background) : "white";
 }, function (props) {
   return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
 });
-var OverlayInner$2 = styled__default.default.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
+var OverlayInner$2 = styled__default.default.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
   var _a;
   return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
 }, function (props) {
@@ -565,7 +565,7 @@ var LoadingOverlayLoadingListItem = styled__default.default.li(templateObject_19
 var LoadingOverlayProgressContainer = styled__default.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
 var LoadingOverlayCustomLoadingGraphic = styled__default.default.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
 var LoadingOverlayContinueButtonContainer = styled__default.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var templateObject_1$O, templateObject_2$G, templateObject_3$t, templateObject_4$m, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+var templateObject_1$O, templateObject_2$H, templateObject_3$t, templateObject_4$m, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
 
 var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -1134,6 +1134,11 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   idFrontImage: null,
   idBackImage: null,
   passportImage: null,
+  idFrontIrImage: null,
+  idBackIrImage: null,
+  idFrontUvImage: null,
+  idBackUvImage: null,
+  idBarcodeImage: null,
   selfieImage: null,
   signatureData: null,
   signatureVideoUrl: null,
@@ -1164,6 +1169,9 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   setIdBackUvImage: function setIdBackUvImage() {
     return null;
   },
+  setIdBarcodeImage: function setIdBarcodeImage() {
+    return null;
+  },
   setSelfieImage: function setSelfieImage() {
     return null;
   },
@@ -1331,53 +1339,56 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     passportImage = _13[0],
     setPassportImage = _13[1];
   var _14 = React.useState(null),
-    selfieImage = _14[0],
-    setSelfieImage = _14[1];
+    idBarcodeImage = _14[0],
+    setIdBarcodeImage = _14[1];
   var _15 = React.useState(null),
-    signatureData = _15[0],
-    setSignatureData = _15[1];
+    selfieImage = _15[0],
+    setSelfieImage = _15[1];
   var _16 = React.useState(null),
-    signatureVideoUrl = _16[0],
-    setSignatureVideoUrl = _16[1];
+    signatureData = _16[0],
+    setSignatureData = _16[1];
   var _17 = React.useState(null),
-    idCaptureVideoUrl = _17[0],
-    setIdCaptureVideoUrl = _17[1];
+    signatureVideoUrl = _17[0],
+    setSignatureVideoUrl = _17[1];
   var _18 = React.useState(null),
-    idCaptureVideoIdFrontImage = _18[0],
-    setIdCaptureVideoIdFrontImage = _18[1];
+    idCaptureVideoUrl = _18[0],
+    setIdCaptureVideoUrl = _18[1];
   var _19 = React.useState(null),
-    idCaptureVideoIdBackImage = _19[0],
-    setIdCaptureVideoIdBackImage = _19[1];
+    idCaptureVideoIdFrontImage = _19[0],
+    setIdCaptureVideoIdFrontImage = _19[1];
   var _20 = React.useState(null),
-    idCaptureVideoAudioUrl = _20[0],
-    setIdCaptureVideoAudioUrl = _20[1];
+    idCaptureVideoIdBackImage = _20[0],
+    setIdCaptureVideoIdBackImage = _20[1];
   var _21 = React.useState(null),
-    idCaptureVideoAudioStartsAt = _21[0],
-    setIdCaptureVideoAudioStartsAt = _21[1];
+    idCaptureVideoAudioUrl = _21[0],
+    setIdCaptureVideoAudioUrl = _21[1];
   var _22 = React.useState(null),
-    expectedAudioText = _22[0],
-    setExpectedAudioText = _22[1];
+    idCaptureVideoAudioStartsAt = _22[0],
+    setIdCaptureVideoAudioStartsAt = _22[1];
   var _23 = React.useState(null),
-    additionalDocuments = _23[0],
-    setAdditionalDocuments = _23[1];
+    expectedAudioText = _23[0],
+    setExpectedAudioText = _23[1];
   var _24 = React.useState(null),
-    geolocationResult = _24[0],
-    setGeolocationResult = _24[1];
-  var _25 = React.useState(0),
-    geolocationAttempts = _25[0],
-    setGeolocationAttempts = _25[1];
-  var _26 = React.useState(false),
-    geolocationBlocked = _26[0],
-    setGeolocationBlocked = _26[1];
-  var _27 = React.useState([]),
-    idFrontCaptureAttempts = _27[0],
-    setIdFrontCaptureAttempts = _27[1];
+    additionalDocuments = _24[0],
+    setAdditionalDocuments = _24[1];
+  var _25 = React.useState(null),
+    geolocationResult = _25[0],
+    setGeolocationResult = _25[1];
+  var _26 = React.useState(0),
+    geolocationAttempts = _26[0],
+    setGeolocationAttempts = _26[1];
+  var _27 = React.useState(false),
+    geolocationBlocked = _27[0],
+    setGeolocationBlocked = _27[1];
   var _28 = React.useState([]),
-    idBackCaptureAttempts = _28[0],
-    setIdBackCaptureAttempts = _28[1];
+    idFrontCaptureAttempts = _28[0],
+    setIdFrontCaptureAttempts = _28[1];
   var _29 = React.useState([]),
-    selfieCaptureAttempts = _29[0],
-    setSelfieCaptureAttempts = _29[1];
+    idBackCaptureAttempts = _29[0],
+    setIdBackCaptureAttempts = _29[1];
+  var _30 = React.useState([]),
+    selfieCaptureAttempts = _30[0],
+    setSelfieCaptureAttempts = _30[1];
   var logIdFrontCaptureAttempt = React.useCallback(function (attempt) {
     setIdFrontCaptureAttempts(function (attempts) {
       return __spreadArray(__spreadArray([], attempts, true), [attempt], false);
@@ -1503,6 +1514,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               idFrontImage: idFrontImage,
               idBackImage: idBackImage,
               passportImage: passportImage,
+              idBarcodeImage: idBarcodeImage,
               selfieImage: selfieImage
             };
             _a = signatureVideoUrl;
@@ -1608,6 +1620,9 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             if (documents.passportImage) {
               submissionRequest.customerData.idData.idImageFront = documents.passportImage;
             }
+            if (documents.idBarcodeImage) {
+              submissionRequest.customerData.idData.idBarcodeImage = documents.idBarcodeImage;
+            }
             if (documents.idFrontIrImage) {
               submissionRequest.customerData.idData.idFrontIrImage = documents.idFrontIrImage;
             }
@@ -1696,7 +1711,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
         }
       });
     });
-  }, [additionalDocuments, bypassAgeValidation, bypassNameMatching, cardData, clientRequestID, companyId, customerDataMatchConfig, deduplicationEnabled, deduplicationSynchronous, documentServiceUrl, enrollmentId, expectedAudioText, geolocationResult, idBackCaptureAttempts, idBackImage, idBackImageRequired, idBackIrImage, idBackUvImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idCardForFaceMatch, idData, idFrontCaptureAttempts, idFrontImage, idFrontIrImage, idFrontUvImage, idImageResolutionCheck, jobId, manualReviewRequired, needImmediateResponse, passportImage, personalData, selfieCaptureAttempts, selfieImage, signatureData, signatureVideoUrl, uploadDocument, verifyIdWithExternalDatabases, webhooksClientTraceId, webhooksEnabled, webhooksFireOnReview, webhooksFireOnReviewURL, webhooksSendInputImages, webhooksSendProcessedImages, webhooksStripSpecialCharacters, webhooksURL]);
+  }, [additionalDocuments, bypassAgeValidation, bypassNameMatching, cardData, clientRequestID, companyId, customerDataMatchConfig, deduplicationEnabled, deduplicationSynchronous, documentServiceUrl, enrollmentId, expectedAudioText, geolocationResult, idBackCaptureAttempts, idBackImage, idBackImageRequired, idBackIrImage, idBackUvImage, idBarcodeImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idCardForFaceMatch, idData, idFrontCaptureAttempts, idFrontImage, idFrontIrImage, idFrontUvImage, idImageResolutionCheck, jobId, manualReviewRequired, needImmediateResponse, passportImage, personalData, selfieCaptureAttempts, selfieImage, signatureData, signatureVideoUrl, uploadDocument, verifyIdWithExternalDatabases, webhooksClientTraceId, webhooksEnabled, webhooksFireOnReview, webhooksFireOnReviewURL, webhooksSendInputImages, webhooksSendProcessedImages, webhooksStripSpecialCharacters, webhooksURL]);
   var defaultOnSubmit = React.useCallback(function () {
     return __awaiter(void 0, void 0, void 0, function () {
       var submissionResponse_1, payload, host, endpoint, response, statusMessage, submissionResponse_2, e_1, err;
@@ -1974,6 +1989,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       idFrontUvImage: idFrontUvImage,
       idBackUvImage: idBackUvImage,
       passportImage: passportImage,
+      idBarcodeImage: idBarcodeImage,
       selfieImage: selfieImage,
       signatureData: signatureData,
       signatureVideoUrl: signatureVideoUrl,
@@ -1990,6 +2006,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       setIdBackIrImage: setIdBackIrImage,
       setIdFrontUvImage: setIdFrontUvImage,
       setIdBackUvImage: setIdBackUvImage,
+      setIdBarcodeImage: setIdBarcodeImage,
       setSelfieImage: setSelfieImage,
       setSignatureData: setSignatureData,
       setSignatureVideoUrl: setSignatureVideoUrl,
@@ -2008,7 +2025,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       checkLiveness: checkLiveness,
       retryLocationAccess: retryLocationAccess
     };
-  }, [additionalDocuments, checkLiveness, environment, idBackImage, idBackIrImage, idBackUvImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idFrontImage, idFrontIrImage, idFrontUvImage, livenessCheckRequest, logIdBackCaptureAttempt, logIdFrontCaptureAttempt, logSelfieCaptureAttempt, passportImage, retryLocationAccess, selfieImage, signatureData, signatureVideoUrl, submissionError, submissionRequest, submissionResponse, submissionStatus, submit, uploadDocument]);
+  }, [additionalDocuments, checkLiveness, environment, idBackImage, idBackIrImage, idBackUvImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idFrontImage, idFrontIrImage, idFrontUvImage, livenessCheckRequest, logIdBackCaptureAttempt, logIdFrontCaptureAttempt, logSelfieCaptureAttempt, idBarcodeImage, passportImage, retryLocationAccess, selfieImage, signatureData, signatureVideoUrl, submissionError, submissionRequest, submissionResponse, submissionStatus, submit, uploadDocument]);
   return /*#__PURE__*/React__namespace.default.createElement(SubmissionContext.Provider, {
     value: value
   }, geolocationRequired && geolocationBlocked ? ( /*#__PURE__*/React__namespace.default.createElement(GeolocationAccessDeniedOverlay, null)) : children, submissionError && ( /*#__PURE__*/React__namespace.default.createElement(SubmissionErrorOverlay, {
@@ -2202,97 +2219,6 @@ function preloadVisionRuntime() {
   });
 }
 
-function getFrameDimensions(frame) {
-  var frameWidth = frame.width,
-    frameHeight = frame.height;
-  if (frame instanceof HTMLImageElement) {
-    frameWidth = frame.naturalWidth;
-    frameHeight = frame.naturalHeight;
-  }
-  if (frame instanceof HTMLVideoElement) {
-    frameWidth = frame.videoWidth;
-    frameHeight = frame.videoHeight;
-  }
-  return [frameWidth, frameHeight];
-}
-
-var InvisibleCanvas = styled__default.default.canvas(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-function drawToCanvas(canvas, frame, width, height) {
-  if (!canvas) return;
-  var ctx = canvas.getContext('2d');
-  if (!ctx) return;
-  if (!width || !height) {
-    var _a = getFrameDimensions(frame),
-      frameWidth = _a[0],
-      frameHeight = _a[1];
-    width || (width = frameWidth);
-    height || (height = frameHeight);
-  }
-  canvas.width = width;
-  canvas.height = height;
-  ctx.drawImage(frame, 0, 0, width, height);
-}
-function clearCanvas(canvas) {
-  var _a;
-  (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
-}
-var templateObject_1$N;
-
-function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
-  var _a;
-  if (quality === void 0) {
-    quality = 0.92;
-  }
-  if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
-  var rawCtx = rawCanvas.getContext('2d');
-  var cropCtx = cropCanvas.getContext('2d');
-  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);
-  if (frame.height > frame.width) {
-    cropCanvas.width = frame.width;
-    cropCanvas.height = frame.height;
-    cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
-  } else {
-    var _b = (_a = face === null || face === void 0 ? void 0 : face.box) !== null && _a !== void 0 ? _a : {
-        xMin: 0,
-        width: frame.width
-      },
-      xMin = _b.xMin,
-      width = _b.width;
-    var desiredWidth = frame.height * 0.6;
-    var faceCenterX = xMin + width / 2;
-    var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
-    cropCanvas.width = desiredWidth;
-    cropCanvas.height = frame.height;
-    cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
-  }
-  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) {
-  canvas || (canvas = document.createElement('canvas'));
-  var ctx = canvas.getContext('2d');
-  if (!ctx) throw new Error('could not get 2d context');
-  var xMin = box.xMin,
-    yMin = box.yMin,
-    width = box.width,
-    height = box.height;
-  canvas.width = width;
-  canvas.height = height;
-  ctx.drawImage(frame, xMin, yMin, width, height, 0, 0, width, height);
-  return canvas;
-}
-
 var defaultImageSegmenterModelPath = 'https://websdk-cdn-dev.idmission.com/assets/models/selfiesegmenter20240524/selfie_segmenter.tflite';
 var imageSegmenterModelSizeInBytes = 256440.32;
 // The idea here is that we globally set a cache key based on the time at page load. That way our built-in speed test
@@ -2422,6 +2348,192 @@ function giveUpAfter(maxTime) {
   });
 }
 
+var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
+
+var defaultDocumentDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/DocumentDetector/DocumentDetector-20250815_115859.tflite");
+
+var defaultFocusModelPath = "".concat(DEFAULT_CDN_URL, "/models/Focus/Focus-20241008_102708.tflite");
+
+var defaultFaceDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/blazeface20240207/blaze_face_short_range.tflite");
+
+var defaultBarcodeReadabilityModelPath = "".concat(DEFAULT_CDN_URL, "/models/BarcodeReadability/BarcodeReadability-20250815_120417.tflite");
+
+var defaultModelPaths = {
+  documentDetector: defaultDocumentDetectorModelPath,
+  focus: defaultFocusModelPath,
+  faceDetection: defaultFaceDetectorModelPath,
+  barcodeReadability: defaultBarcodeReadabilityModelPath
+};
+
+var preloadModels = function preloadModels(_a) {
+  return __awaiter(void 0, [_a], void 0, function (_b) {
+    var preloadTasks;
+    var _c = _b.documentDetectionModel,
+      documentDetectionModel = _c === void 0 ? true : _c,
+      _d = _b.focusModel,
+      focusModel = _d === void 0 ? true : _d,
+      _e = _b.faceDetectionModel,
+      faceDetectionModel = _e === void 0 ? true : _e,
+      _f = _b.barcodeReadabilityModel,
+      barcodeReadabilityModel = _f === void 0 ? true : _f;
+    return __generator(this, function (_g) {
+      switch (_g.label) {
+        case 0:
+          return [4 /*yield*/, probeModelCapabilities()];
+        case 1:
+          _g.sent();
+          preloadTasks = [];
+          if (documentDetectionModel) {
+            preloadTasks.push(preloadDocumentDetectorDependencies);
+          }
+          if (focusModel) {
+            preloadTasks.push(preloadFocusModelDependencies);
+          }
+          if (faceDetectionModel) {
+            preloadTasks.push(preloadFaceDetectorDependencies);
+          }
+          if (barcodeReadabilityModel) {
+            preloadTasks.push(preloadBarcodeReadabilityModelDependencies);
+          }
+          return [4 /*yield*/, Promise.all(preloadTasks)];
+        case 2:
+          _g.sent();
+          return [2 /*return*/];
+      }
+    });
+  });
+};
+var progressByUrl = {};
+var progressByUseCase = {
+  visionRuntime: {
+    loaded: 0,
+    total: 0
+  },
+  documentDetector: {
+    loaded: 0,
+    total: 0
+  },
+  focus: {
+    loaded: 0,
+    total: 0
+  },
+  faceDetection: {
+    loaded: 0,
+    total: 0
+  },
+  barcodeReadability: {
+    loaded: 0,
+    total: 0
+  }
+};
+function preloadDependency(url) {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      return [2 /*return*/, new Promise(function (resolve, reject) {
+        var req = new XMLHttpRequest();
+        req.addEventListener('progress', function (event) {
+          if (!event.lengthComputable) return;
+          progressByUrl[url] = event;
+          document.dispatchEvent(new CustomEvent('idmission.preloadProgress', {
+            detail: {
+              url: url,
+              loaded: event.loaded,
+              total: event.total
+            }
+          }));
+        });
+        req.addEventListener('loadend', function () {
+          resolve(req.readyState === 4 && req.status === 200);
+        });
+        req.addEventListener('error', reject);
+        req.open('GET', url, true);
+        req.send();
+      })];
+    });
+  });
+}
+var modelsPreloading = {
+  documentDetector: false,
+  focus: false,
+  faceDetection: false,
+  barcodeReadability: false
+};
+var preloadDocumentDetectorDependencies = function preloadDocumentDetectorDependencies() {
+  return preloadModelDependencies('documentDetector');
+};
+var preloadFocusModelDependencies = function preloadFocusModelDependencies() {
+  return preloadModelDependencies('focus');
+};
+var preloadFaceDetectorDependencies = function preloadFaceDetectorDependencies() {
+  return preloadModelDependencies('faceDetection');
+};
+var preloadBarcodeReadabilityModelDependencies = function preloadBarcodeReadabilityModelDependencies() {
+  return preloadModelDependencies('barcodeReadability');
+};
+function preloadModelDependencies(model) {
+  return __awaiter(this, void 0, void 0, function () {
+    function handleModelDownloadProgress(event) {
+      var detail = event.detail;
+      if (!dependencies.includes(detail.url)) return;
+      progressByUseCase[model] = sumUpProgressForDependencies(dependencies);
+      document.dispatchEvent(new CustomEvent("idmission.preloadProgress.".concat(model), {
+        detail: progressByUseCase[model]
+      }));
+    }
+    var dependencies;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          if (modelsPreloading[model]) return [2 /*return*/, new Promise(function (resolve) {
+            var i = setInterval(function () {
+              if (!modelsPreloading[model]) {
+                clearInterval(i);
+                resolve();
+              }
+            }, 100);
+          })];
+          modelsPreloading[model] = true;
+          return [4 /*yield*/, probeModelCapabilities()];
+        case 1:
+          _a.sent();
+          if (modelCapabilities.delegate === 'NONE') {
+            throw new Error("No available delegate for ".concat(model, " model."));
+          }
+          dependencies = [defaultModelPaths[model]];
+          document.addEventListener('idmission.preloadProgress', handleModelDownloadProgress);
+          _a.label = 2;
+        case 2:
+          _a.trys.push([2,, 4, 5]);
+          return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
+        case 3:
+          _a.sent();
+          return [3 /*break*/, 5];
+        case 4:
+          document.removeEventListener('idmission.preloadProgress', handleModelDownloadProgress);
+          modelsPreloading[model] = false;
+          return [7 /*endfinally*/];
+        case 5:
+          return [2 /*return*/];
+      }
+    });
+  });
+}
+function progressToPercentage(progress) {
+  return progress.total > 0 ? Math.round(100.0 * progress.loaded / progress.total) : 0;
+}
+function sumUpProgressForDependencies(dependencies) {
+  return dependencies.reduce(function (result, dependency) {
+    var dependencyProgress = progressByUrl[dependency];
+    if (!dependencyProgress) return result;
+    result.loaded += dependencyProgress.loaded;
+    result.total += dependencyProgress.total;
+    return result;
+  }, {
+    loaded: 0,
+    total: 0
+  });
+}
+
 function convertBoundingBox(box) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   return {
@@ -2476,53 +2588,50 @@ function average(arr) {
   return sum / len;
 }
 
-var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
-
-var defaultDocumentDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/DocumentDetector/DocumentDetector-20250815_115859.tflite");
-
-var defaultFocusModelPath = "".concat(DEFAULT_CDN_URL, "/models/Focus/Focus-20241008_102708.tflite");
-
-var defaultFaceDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/blazeface20240207/blaze_face_short_range.tflite");
-
-var defaultFocusModelLoadTimeoutMs = 45000;
-var defaultFocusThresholds = {
-  idCardFront: {
-    desktop: 0,
-    mobile: 0.3
-  },
-  idCardBack: {
-    desktop: 0,
-    mobile: 0.3
-  },
-  passport: {
-    desktop: 0,
-    mobile: 0.3
-  },
-  singlePage: {
-    desktop: 0,
-    mobile: 0.3
+var defaultDocumentDetectionScoreThreshold = 0.1;
+var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
+var defaultDocumentDetectionThresholds = {
+  idCardFront: 0.6,
+  idCardBack: 0.6,
+  passport: 0.4,
+  singlePage: 0.4,
+  stability: {
+    idCardFront: 0.85,
+    idCardBack: 0.85,
+    passport: 0.5,
+    singlePage: 0.5
   }
 };
-var classifier = null;
-var classifierSettings = null;
-function loadFocusModel() {
-  return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+var documentTypeDisplayNames = {
+  idCardFront: 'ID card front',
+  idCardBack: 'ID card back',
+  passport: 'Passport',
+  singlePage: 'Single page',
+  none: 'None'
+};
+var detector$1 = null;
+var detectorSettings$1 = null;
+function loadDocumentDetector() {
+  return __awaiter(this, arguments, void 0, function (modelAssetPath, scoreThreshold) {
     var _a, _b;
     if (modelAssetPath === void 0) {
-      modelAssetPath = defaultFocusModelPath;
+      modelAssetPath = defaultDocumentDetectorModelPath;
+    }
+    if (scoreThreshold === void 0) {
+      scoreThreshold = defaultDocumentDetectionScoreThreshold;
     }
     return __generator(this, function (_c) {
       switch (_c.label) {
         case 0:
-          if (classifier && (classifierSettings === null || classifierSettings === void 0 ? void 0 : classifierSettings.modelAssetPath) === modelAssetPath) return [2 /*return*/, classifier];
-          closeFocusModel();
-          return [4 /*yield*/, preloadFocusModelDependencies()];
+          if (detector$1 && (detectorSettings$1 === null || detectorSettings$1 === void 0 ? void 0 : detectorSettings$1.modelAssetPath) === modelAssetPath && (detectorSettings$1 === null || detectorSettings$1 === void 0 ? void 0 : detectorSettings$1.scoreThreshold) === scoreThreshold) return [2 /*return*/, detector$1];
+          closeDocumentDetector();
+          return [4 /*yield*/, preloadDocumentDetectorDependencies()];
         case 1:
           _c.sent();
           if (modelCapabilities.delegate === 'NONE') {
-            throw new Error('No available delegate for focus detector.');
+            throw new Error('No available delegate for document detector.');
           }
-          _b = (_a = tasksVision.ImageClassifier).createFromOptions;
+          _b = (_a = tasksVision.ObjectDetector).createFromOptions;
           return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
         case 2:
           return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
@@ -2531,44 +2640,48 @@ function loadFocusModel() {
               delegate: modelCapabilities.delegate
             },
             // canvas: document.createElement('canvas'),
+            scoreThreshold: scoreThreshold,
             runningMode: 'VIDEO'
           }])];
         case 3:
-          classifier = _c.sent();
-          classifierSettings = {
-            modelAssetPath: modelAssetPath
+          detector$1 = _c.sent();
+          detectorSettings$1 = {
+            modelAssetPath: modelAssetPath,
+            scoreThreshold: scoreThreshold
           };
-          return [2 /*return*/, classifier];
+          return [2 /*return*/, detector$1];
       }
     });
   });
 }
-function closeFocusModel() {
-  classifier === null || classifier === void 0 ? void 0 : classifier.close();
-  classifier = null;
-  classifierSettings = null;
+function closeDocumentDetector() {
+  detector$1 === null || detector$1 === void 0 ? void 0 : detector$1.close();
+  detector$1 = null;
+  detectorSettings$1 = null;
 }
-function useLoadFocusModel(_a) {
-  var _b = _a.modelPath,
-    modelPath = _b === void 0 ? defaultFocusModelPath : _b,
-    _c = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
+function useLoadDocumentDetector(_a) {
+  var _b = _a.shouldLoadModels,
+    shouldLoadModels = _b === void 0 ? true : _b,
+    _c = _a.modelPath,
+    modelPath = _c === void 0 ? defaultDocumentDetectorModelPath : _c,
+    _d = _a.modelLoadTimeoutMs,
+    modelLoadTimeoutMs = _d === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _d,
+    _e = _a.scoreThreshold,
+    scoreThreshold = _e === void 0 ? defaultDocumentDetectionScoreThreshold : _e,
     onModelError = _a.onModelError,
-    videoRef = _a.videoRef,
-    _d = _a.shouldLoadModels,
-    shouldLoadModels = _d === void 0 ? true : _d;
-  var _e = React.useState('not-started'),
-    modelLoadState = _e[0],
-    setModelLoadState = _e[1];
-  var _f = React.useState(0),
-    modelDownloadProgress = _f[0],
-    setModelDownloadProgress = _f[1];
+    videoRef = _a.videoRef;
+  var _f = React.useState('not-started'),
+    modelLoadState = _f[0],
+    setModelLoadState = _f[1];
   var _g = React.useState(null),
     modelWarmingStartedAt = _g[0],
     setModelWarmingStartedAt = _g[1];
-  var _h = React.useState(null),
-    modelError = _h[0],
-    setModelError = _h[1];
+  var _h = React.useState(0),
+    modelDownloadProgress = _h[0],
+    setModelDownloadProgress = _h[1];
+  var _j = React.useState(null),
+    modelError = _j[0],
+    setModelError = _j[1];
   React.useEffect(function loadModel() {
     var _this = this;
     if (!shouldLoadModels) return;
@@ -2577,21 +2690,24 @@ function useLoadFocusModel(_a) {
     function handleDownloadProgress(event) {
       setModelDownloadProgress(progressToPercentage(event.detail));
     }
-    document.addEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
+    document.addEventListener('idmission.preloadProgress.documentDetector', handleDownloadProgress);
     var modelLoadTimeout = setTimeout(function () {
       setModelError(new Error('Model loading time limit exceeded.'));
     }, modelLoadTimeoutMs);
     var cancelVideoReady = function cancelVideoReady() {};
-    loadFocusModel(modelPath).then(function (loadedModel) {
+    loadDocumentDetector(modelPath, scoreThreshold).then(function (model) {
       return __awaiter(_this, void 0, void 0, function () {
         var _a, videoReady, cancel, cancelled;
         return __generator(this, function (_b) {
           switch (_b.label) {
             case 0:
               setModelDownloadProgress(100);
-              clearTimeout(modelLoadTimeout);
               setModelLoadState('warming');
-              setModelWarmingStartedAt(new Date().getTime());
+              setModelWarmingStartedAt(performance.now());
+              clearTimeout(modelLoadTimeout);
+              return [4 /*yield*/, testDocumentDetectionAgainstKnownImage(model)];
+            case 1:
+              _b.sent();
               _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
               cancelled = false;
               cancelVideoReady = function cancelVideoReady() {
@@ -2599,11 +2715,11 @@ function useLoadFocusModel(_a) {
                 cancel();
               };
               return [4 /*yield*/, videoReady];
-            case 1:
+            case 2:
               _b.sent();
               setTimeout(function () {
                 if (cancelled) return;
-                loadedModel.classifyForVideo(videoRef.current, performance.now());
+                model.detectForVideo(videoRef.current, performance.now());
                 setModelLoadState('ready');
               }, 500);
               return [2 /*return*/];
@@ -2617,13 +2733,13 @@ function useLoadFocusModel(_a) {
       clearTimeout(modelLoadTimeout);
     });
     return function () {
-      log('unloading focus model');
+      log('unloading document detection model');
       cancelVideoReady();
-      closeFocusModel();
+      closeDocumentDetector();
       clearTimeout(modelLoadTimeout);
-      document.removeEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
+      document.removeEventListener('idmission.preloadProgress.documentDetector', handleDownloadProgress);
     };
-  }, [modelPath, modelLoadTimeoutMs, videoRef, shouldLoadModels]);
+  }, [shouldLoadModels, modelLoadTimeoutMs, modelPath, scoreThreshold, videoRef]);
   React.useEffect(function handleModelError() {
     if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
   }, [modelError, onModelError]);
@@ -2633,185 +2749,41 @@ function useLoadFocusModel(_a) {
       modelLoadState: modelLoadState,
       modelDownloadProgress: modelDownloadProgress,
       modelWarmingStartedAt: modelWarmingStartedAt,
-      modelError: modelError
+      modelError: modelError,
+      setModelError: setModelError
     };
   }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
 }
-var lastFocusPredictionAt = 0;
-var lastFocusPredictionTime = 0;
-function setLastFocusPredictionAt(time) {
-  lastFocusPredictionTime = time - lastFocusPredictionAt;
-  lastFocusPredictionAt = time;
-}
-function makeFocusModelPrediction(imageData, cropCanvas, rotateCanvas, box) {
-  var _a, _b, _c, _d, _e;
-  if (!classifier) return null;
-  var startedAt = new Date();
-  var image = cropIfNecessary(imageData, cropCanvas, rotateCanvas, box);
-  var result = classifier.classifyForVideo(image, performance.now());
-  var score = (_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.classifications) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.find(function (c) {
-    return c.categoryName === 'focused';
-  })) === null || _d === void 0 ? void 0 : _d.score) !== null && _e !== void 0 ? _e : 0;
-  var predictionTime = new Date().getTime() - startedAt.getTime();
-  return {
-    score: score,
-    predictionTime: predictionTime
-  };
-}
-function cropIfNecessary(imageData, cropCanvas, rotateCanvas, box) {
-  if (!box) return imageData;
-  var cropped = cropToDetectedObjectBox(imageData, box, cropCanvas);
-  var _a = [box.width, box.height],
-    bw = _a[0],
-    bh = _a[1];
-  if (bh <= bw) return cropped;
-  var ctx = rotateCanvas.getContext('2d');
-  if (!ctx) return cropped;
-  rotateCanvas.width = bh;
-  rotateCanvas.height = bw;
-  ctx.clearRect(0, 0, rotateCanvas.width, rotateCanvas.height);
-  ctx.translate(rotateCanvas.width / 2, rotateCanvas.height / 2);
-  ctx.rotate(1.5708); // 90 deg in radians
-  ctx.drawImage(cropped, -bw / 2, -bh / 2);
-  return rotateCanvas;
-}
-
-var defaultSelfieCaptureModelLoadTimeoutMs = 45000;
-var detector$1 = null;
-var detectorSettings$1 = null;
-function loadFaceDetector() {
-  return __awaiter(this, arguments, void 0, function (modelAssetPath) {
-    var _a, _b;
-    if (modelAssetPath === void 0) {
-      modelAssetPath = defaultFaceDetectorModelPath;
-    }
-    return __generator(this, function (_c) {
-      switch (_c.label) {
-        case 0:
-          if (detector$1 && (detectorSettings$1 === null || detectorSettings$1 === void 0 ? void 0 : detectorSettings$1.modelAssetPath) === modelAssetPath) return [2 /*return*/, detector$1];
-          closeFaceDetector();
-          return [4 /*yield*/, preloadFaceDetectorDependencies()];
-        case 1:
-          _c.sent();
-          if (modelCapabilities.delegate === 'NONE') {
-            throw new Error('No available delegate for face detector.');
-          }
-          _b = (_a = tasksVision.FaceDetector).createFromOptions;
-          return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
-        case 2:
-          return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
-            // canvas: document.createElement('canvas'),
-            baseOptions: {
-              modelAssetPath: modelAssetPath,
-              delegate: modelCapabilities.delegate
-            },
-            runningMode: 'VIDEO'
-          }])];
-        case 3:
-          detector$1 = _c.sent();
-          detectorSettings$1 = {
-            modelAssetPath: modelAssetPath
-          };
-          return [2 /*return*/, detector$1];
+function makeDocumentDetectorPrediction(frame) {
+  return __awaiter(this, void 0, void 0, function () {
+    var startedAt, prediction, time, frameWidth, frameHeight;
+    return __generator(this, function (_a) {
+      if (!detector$1) return [2 /*return*/, null];
+      startedAt = performance.now();
+      // Detectors can throw errors, for example when using custom URLs that
+      // contain a model that doesn't provide the expected output.
+      try {
+        prediction = detector$1.detectForVideo(frame, performance.now());
+        time = performance.now() - startedAt;
+        frameWidth = frame.width;
+        frameHeight = frame.height;
+        return [2 /*return*/, _assign(_assign({}, prediction), {
+          time: time,
+          frameWidth: frameWidth,
+          frameHeight: frameHeight
+        })];
+      } catch (e) {
+        error('caught object detection error', e);
       }
+      return [2 /*return*/, null];
     });
   });
 }
-function closeFaceDetector() {
-  detector$1 === null || detector$1 === void 0 ? void 0 : detector$1.close();
-  detector$1 = null;
-  detectorSettings$1 = null;
-}
-function useLoadFaceDetector(_a) {
-  var onModelError = _a.onModelError,
-    _b = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
-    videoRef = _a.videoRef;
-  var _c = React.useState('not-started'),
-    modelLoadState = _c[0],
-    setModelLoadState = _c[1];
-  var _d = React.useState(0),
-    modelDownloadProgress = _d[0],
-    setModelDownloadProgress = _d[1];
-  var _e = React.useState(null),
-    modelWarmingStartedAt = _e[0],
-    setModelWarmingStartedAt = _e[1];
-  var _f = React.useState(null),
-    modelError = _f[0],
-    setModelError = _f[1];
-  React.useEffect(function loadModel() {
-    var _this = this;
-    setModelLoadState('downloading');
-    setModelWarmingStartedAt(null);
-    var modelLoadTimeout = setTimeout(function () {
-      setModelError(new Error('Model loading time limit exceeded.'));
-    }, modelLoadTimeoutMs);
-    function handleDownloadProgress(event) {
-      setModelDownloadProgress(progressToPercentage(event.detail));
-    }
-    document.addEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
-    var cancelVideoReady = function cancelVideoReady() {};
-    loadFaceDetector().then(function (model) {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, videoReady, cancel, cancelled;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              setModelDownloadProgress(100);
-              clearTimeout(modelLoadTimeout);
-              setModelLoadState('warming');
-              setModelWarmingStartedAt(new Date().getTime());
-              return [4 /*yield*/, testFaceDetectionAgainstKnownImage(model)];
-            case 1:
-              _b.sent();
-              _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
-              cancelled = false;
-              cancelVideoReady = function cancelVideoReady() {
-                cancelled = true;
-                cancel();
-              };
-              return [4 /*yield*/, videoReady];
-            case 2:
-              _b.sent();
-              if (cancelled) return [2 /*return*/];
-              model.detectForVideo(videoRef.current, performance.now());
-              setModelLoadState('ready');
-              return [2 /*return*/];
-          }
-        });
-      });
-    })["catch"](function (e) {
-      setModelError(e);
-      setModelLoadState('error');
-    })["finally"](function () {
-      clearTimeout(modelLoadTimeout);
-    });
-    return function () {
-      log('unloading face detection model');
-      cancelVideoReady();
-      closeFaceDetector();
-      clearTimeout(modelLoadTimeout);
-      document.removeEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
-    };
-  }, [modelLoadTimeoutMs, videoRef]);
-  React.useEffect(function handleModelError() {
-    if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
-  }, [modelError, onModelError]);
-  return React.useMemo(function () {
-    return {
-      ready: modelLoadState === 'ready',
-      modelLoadState: modelLoadState,
-      modelDownloadProgress: modelDownloadProgress,
-      modelWarmingStartedAt: modelWarmingStartedAt,
-      modelError: modelError
-    };
-  }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
-}
-var lastFaceDetectionAt = 0;
-var lastFaceDetectionTime = 0;
-function setLastFaceDetectionAt(time) {
-  lastFaceDetectionTime = time - lastFaceDetectionAt;
-  lastFaceDetectionAt = time;
+var lastDetectionAt = 0;
+var lastDetectionTime = 0;
+function setLastDetectionAt(time) {
+  lastDetectionTime = time - lastDetectionAt;
+  lastDetectionAt = time;
 }
 var framesNeededSamples$1 = [];
 function trackFramesNeeded$1(value, bufferLength) {
@@ -2821,922 +2793,397 @@ function trackFramesNeeded$1(value, bufferLength) {
   framesNeededSamples$1.unshift(value);
   if (framesNeededSamples$1.length > bufferLength) framesNeededSamples$1.length = bufferLength;
 }
-var lastNFaces = [];
+var lastNBoxes = [];
 var lastNPairs$1 = [];
-function trackFace(face, framesNeeded) {
+function trackBox(box, framesNeeded) {
   if (framesNeeded === void 0) {
     framesNeeded = 12;
   }
-  lastNFaces.unshift(face);
-  if (lastNFaces.length > framesNeeded) lastNFaces.length = framesNeeded;
-  if (lastNFaces.length > 1) {
-    var lastFace = lastNFaces[1];
-    var iou = calculateIoU(face.box, lastFace.box);
+  lastNBoxes.unshift(box);
+  if (lastNBoxes.length > framesNeeded) lastNBoxes.length = framesNeeded;
+  if (lastNBoxes.length > 1) {
+    var lastBox = lastNBoxes[1];
+    var iou = calculateIoU(box, lastBox);
     lastNPairs$1.unshift({
-      a: face,
-      b: lastFace,
+      a: box,
+      b: lastBox,
       iou: iou
     });
     if (lastNPairs$1.length > framesNeeded - 1) lastNPairs$1.length = framesNeeded - 1;
   }
 }
-function makeFaceDetectorPrediction(imageData) {
-  if (!detector$1) return null;
-  var prediction = detector$1.detectForVideo(imageData, performance.now());
-  var faces = prediction.detections.map(function (d) {
-    return {
-      box: convertBoundingBox(d.boundingBox),
-      keypoints: d.keypoints.map(function (k) {
-        var _a;
-        return _assign(_assign({}, k), {
-          x: k.x * imageData.width,
-          y: k.y * imageData.height,
-          name: (_a = k.label) !== null && _a !== void 0 ? _a : ''
-        });
-      })
-    };
+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, _m, _o, _p;
+  if (boundaries === void 0) {
+    boundaries = defaultDocumentDetectionBoundaries;
+  }
+  var detections = prediction.detections,
+    frameWidth = prediction.frameWidth,
+    frameHeight = prediction.frameHeight,
+    time = prediction.time;
+  var boundaryTop = (_a = boundaries.top) !== null && _a !== void 0 ? _a : 20;
+  var boundaryLeft = (_b = boundaries.left) !== null && _b !== void 0 ? _b : 20;
+  var boundaryRight = (_c = boundaries.right) !== null && _c !== void 0 ? _c : 20;
+  var boundaryBottom = (_d = boundaries.bottom) !== null && _d !== void 0 ? _d : 20;
+  var frameWidth80Pct = frameWidth * 0.8;
+  var detectedObjects = applyNonMaxSuppression(detections.flatMap(function (d) {
+    return d.categories.map(function (category) {
+      return {
+        label: category === null || category === void 0 ? void 0 : category.categoryName,
+        score: category === null || category === void 0 ? void 0 : category.score,
+        box: convertBoundingBox(d.boundingBox)
+      };
+    });
+  }), function (obj) {
+    var _a = obj.box,
+      xMin = _a.xMin,
+      yMin = _a.yMin,
+      width = _a.width,
+      height = _a.height;
+    return yMin > boundaryTop &&
+    // Is it valid top edge of ID detected?
+    yMin + height + boundaryBottom < frameHeight && (
+    // Is it valid bottom edge less than max video height
+    xMin > boundaryLeft || xMin + width > frameWidth80Pct) &&
+    // 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.
+    ;
   });
-  return _assign(_assign({}, prediction), {
-    faces: faces
+  var allZero = detections.length > 0 && !detections.some(function (_a) {
+    var boundingBox = _a.boundingBox;
+    return Object.values(boundingBox !== null && boundingBox !== void 0 ? boundingBox : {}).some(function (n) {
+      return n > 0;
+    });
   });
-}
-function processFaceDetectorPrediction(_a) {
-  var faces = _a.faces,
-    videoWidth = _a.videoWidth,
-    videoHeight = _a.videoHeight,
-    _b = _a.requireVerticalFaceCentering,
-    requireVerticalFaceCentering = _b === void 0 ? true : _b,
-    _c = _a.stabilityThreshold,
-    stabilityThreshold = _c === void 0 ? 0.7 : _c;
-  var face = faces[0];
-  var faceNotDetected = faces.length === 0;
-  var faceNotCentered = false,
-    faceLookingAway = false,
-    faceTooClose = false,
-    faceTooFar = false;
-  if (face) {
-    // calculate centroids
-    var vCX = videoWidth / 2;
-    var vCY = videoHeight / 2;
-    var fCX = (face.box.xMin + face.box.xMax) / 2;
-    var fCY = (face.box.yMin + face.box.yMax) / 2;
-    // calculate thresholds
-    var vTX = videoWidth * 0.125;
-    var vTY = videoHeight * 0.125;
-    var fTW = face.box.width * 0.2;
-    var fTH = face.box.height * 0.2;
-    var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
-    if (nose) {
-      faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
-      var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
-      var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
-      faceNotCentered = faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
-    }
-    var isMobile = videoWidth < videoHeight;
-    var tooCloseMultiple = 1.5;
-    var tooFarMultiple = isMobile ? 6 : 7;
-    faceTooClose = face.box.width > videoWidth / tooCloseMultiple;
-    faceTooFar = face.box.width < videoWidth / tooFarMultiple;
+  var bestIdCardFront = detectedObjects.find(function (obj) {
+    return obj.label === 'Document';
+  });
+  var bestIdCardBack = detectedObjects.find(function (obj) {
+    return obj.label === 'Document back';
+  });
+  var bestPassportPage = detectedObjects.find(function (obj) {
+    return obj.label === 'Passport page';
+  });
+  var bestSinglePage = detectedObjects.find(function (obj) {
+    return obj.label === 'Single page';
+  });
+  var idCardFrontDetectionScore = (_e = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _e !== void 0 ? _e : 0;
+  var idCardBackDetectionScore = (_f = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _f !== void 0 ? _f : 0;
+  var passportDetectionScore = (_g = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _g !== void 0 ? _g : 0;
+  var singlePageDetectionScore = (_h = bestSinglePage === null || bestSinglePage === void 0 ? void 0 : bestSinglePage.score) !== null && _h !== void 0 ? _h : 0;
+  var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_j = thresholds.idCardFront) !== null && _j !== void 0 ? _j : 0);
+  var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_k = thresholds.idCardBack) !== null && _k !== void 0 ? _k : 0);
+  var passportDetectionThresholdMet = passportDetectionScore >= ((_l = thresholds.passport) !== null && _l !== void 0 ? _l : 0);
+  var singlePageDetectionThresholdMet = singlePageDetectionScore >= ((_m = thresholds.singlePage) !== null && _m !== void 0 ? _m : 0);
+  var bestDocument = singlePageDetectionThresholdMet ? bestSinglePage : passportDetectionThresholdMet ? bestPassportPage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
+  var detectionThreshold = singlePageDetectionThresholdMet ? thresholds.singlePage : passportDetectionThresholdMet ? thresholds.passport : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
+  var detectionScore = (_o = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _o !== void 0 ? _o : 0;
+  var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
+  var detectedDocumentType = 'none';
+  if (singlePageDetectionThresholdMet) {
+    detectedDocumentType = 'singlePage';
+  } else if (passportDetectionThresholdMet) {
+    detectedDocumentType = 'passport';
+  } else if (idCardBackDetectionThresholdMet) {
+    detectedDocumentType = 'idCardBack';
+  } else if (detectionThresholdMet) {
+    detectedDocumentType = 'idCardFront';
   }
-  var faceInGuides = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
-  if (lastFaceDetectionTime > 0) {
-    trackFramesNeeded$1(500 / lastFaceDetectionTime);
+  var documentInBounds = !!bestDocument;
+  if (lastDetectionTime > 0) {
+    trackFramesNeeded$1(1000 / lastDetectionTime);
   }
-  var faceIsStable = false;
-  if (faceInGuides) {
-    var framesNeeded = Math.ceil(average(framesNeededSamples$1));
-    trackFace(face, framesNeeded);
-    faceIsStable = lastNFaces.length >= framesNeeded && !lastNPairs$1.some(function (pair) {
-      return pair.iou < stabilityThreshold;
+  var documentIsStable = false;
+  var documentTooClose = false;
+  if (bestDocument) {
+    var _q = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
+      docWidth = _q[0],
+      docHeight = _q[1];
+    documentTooClose = docWidth > 0.85 || docHeight > 0.85;
+    if (detectionThresholdMet && documentInBounds && !documentTooClose) {
+      var thresholdSet = (_p = thresholds.stability) !== null && _p !== void 0 ? _p : defaultDocumentDetectionThresholds.stability;
+      var threshold_1 = thresholdSet[detectedDocumentType];
+      var framesNeeded = Math.ceil(average(framesNeededSamples$1));
+      trackBox(bestDocument.box, framesNeeded);
+      documentIsStable = lastNBoxes.length >= framesNeeded && !lastNPairs$1.some(function (pair) {
+        return pair.iou < threshold_1;
+      });
+    }
+  }
+  var bestPDF417;
+  if (detectedObjects.length > 0) {
+    bestPDF417 = detectedObjects.find(function (obj) {
+      return obj.label === 'PDF417';
     });
   }
-  var faceReady = faceInGuides && faceIsStable;
   return {
-    face: face,
-    faceNotDetected: faceNotDetected,
-    faceNotCentered: faceNotCentered,
-    faceLookingAway: faceLookingAway,
-    faceTooClose: faceTooClose,
-    faceTooFar: faceTooFar,
-    faceReady: faceReady,
-    faceReadyAt: faceReady ? new Date() : null,
-    faceIsStable: faceIsStable
-  };
-}
-function testFaceDetectionAgainstKnownImage(detector) {
-  return new Promise(function (resolve, reject) {
-    var img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = function () {
-      var prediction = detector.detectForVideo(img, performance.now());
-      if (prediction.detections.length > 0) {
-        debug('face detection test result', prediction.detections);
-        resolve(void 0);
-      } else {
-        warn('face detection test failed');
-        reject(new Error('testFaceDetectionAgainstKnownImage failed to predict'));
-      }
-    };
-    img.onerror = function () {
-      return reject(new Error('testFaceDetectionAgainstKnownImage failed to load image'));
-    };
-    img.src = "".concat(DEFAULT_CDN_URL, "/head-test.jpg");
+    prediction: prediction,
+    detectedObjects: detectedObjects,
+    detectionScore: detectionScore,
+    detectionTime: time,
+    detectionThresholdMet: detectionThresholdMet,
+    detectedDocumentType: detectedDocumentType,
+    idCardFrontDetectionScore: idCardFrontDetectionScore,
+    idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
+    idCardBackDetectionScore: idCardBackDetectionScore,
+    idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
+    passportDetectionScore: passportDetectionScore,
+    passportDetectionThresholdMet: passportDetectionThresholdMet,
+    singlePageDetectionScore: singlePageDetectionScore,
+    singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
+    bestDocument: bestDocument,
+    bestPDF417: bestPDF417,
+    documentInBounds: documentInBounds,
+    documentTooClose: documentTooClose,
+    documentIsStable: documentIsStable,
+    frameWidth: frameWidth,
+    frameHeight: frameHeight,
+    allZero: allZero
+  };
+}
+function applyNonMaxSuppression(detectedObjects, isGoodBox) {
+  var maxes = {};
+  detectedObjects.forEach(function (obj, i) {
+    if (obj) {
+      if (!maxes[obj.label]) maxes[obj.label] = [0, -1];
+      if (obj.score > maxes[obj.label][0] && (isGoodBox === null || isGoodBox === void 0 ? void 0 : isGoodBox(obj))) maxes[obj.label] = [obj.score, i];
+    }
+  });
+  return Object.keys(maxes).map(function (label) {
+    return detectedObjects[maxes[label][1]];
+  }).filter(function (obj) {
+    return !!obj;
   });
 }
-
-var preloadModels = function preloadModels(_a) {
-  return __awaiter(void 0, [_a], void 0, function (_b) {
-    var preloadTasks;
-    var _c = _b.documentDetectionModel,
-      documentDetectionModel = _c === void 0 ? true : _c,
-      _d = _b.focusModel,
-      focusModel = _d === void 0 ? true : _d,
-      _e = _b.faceDetectionModel,
-      faceDetectionModel = _e === void 0 ? true : _e;
-    return __generator(this, function (_f) {
-      switch (_f.label) {
-        case 0:
-          return [4 /*yield*/, probeModelCapabilities()];
-        case 1:
-          _f.sent();
-          preloadTasks = [];
-          if (documentDetectionModel) {
-            preloadTasks.push(preloadDocumentDetectorDependencies);
-          }
-          if (focusModel) {
-            preloadTasks.push(preloadFocusModelDependencies);
-          }
-          if (faceDetectionModel) {
-            preloadTasks.push(preloadFaceDetectorDependencies);
-          }
-          return [4 /*yield*/, Promise.all(preloadTasks)];
-        case 2:
-          _f.sent();
-          return [2 /*return*/];
+function testDocumentDetectionAgainstKnownImage(detector) {
+  return new Promise(function (resolve, reject) {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = function () {
+      var prediction = detector.detectForVideo(img, performance.now());
+      if (prediction.detections.length > 0) {
+        debug('document detection test result', prediction.detections);
+        resolve(void 0);
+      } else {
+        warn('document detection test failed');
+        reject(new Error('testDocumentDetectionAgainstKnownImage failed to predict'));
       }
-    });
+    };
+    img.onerror = function () {
+      return reject(new Error('testDocumentDetectionAgainstKnownImage failed to load image'));
+    };
+    img.src = "".concat(DEFAULT_CDN_URL, "/id-card-test.jpg");
   });
-};
-var progressByUrl = {};
-var progressByUseCase = {
-  visionRuntime: {
-    loaded: 0,
-    total: 0
-  },
-  documentDetection: {
-    loaded: 0,
-    total: 0
-  },
-  focus: {
-    loaded: 0,
-    total: 0
-  },
-  faceDetection: {
-    loaded: 0,
-    total: 0
+}
+
+function getFrameDimensions(frame) {
+  var frameWidth = frame.width,
+    frameHeight = frame.height;
+  if (frame instanceof HTMLImageElement) {
+    frameWidth = frame.naturalWidth;
+    frameHeight = frame.naturalHeight;
   }
-};
-function preloadDependency(url) {
-  return __awaiter(this, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-      return [2 /*return*/, new Promise(function (resolve, reject) {
-        var req = new XMLHttpRequest();
-        req.addEventListener('progress', function (event) {
-          if (!event.lengthComputable) return;
-          progressByUrl[url] = event;
-          document.dispatchEvent(new CustomEvent('idmission.preloadProgress', {
-            detail: {
-              url: url,
-              loaded: event.loaded,
-              total: event.total
-            }
-          }));
-        });
-        req.addEventListener('loadend', function () {
-          resolve(req.readyState === 4 && req.status === 200);
+  if (frame instanceof HTMLVideoElement) {
+    frameWidth = frame.videoWidth;
+    frameHeight = frame.videoHeight;
+  }
+  return [frameWidth, frameHeight];
+}
+
+var InvisibleCanvasContainer = styled__default.default.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+var InvisibleCanvas = styled__default.default.canvas(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+function drawToCanvas(canvas, frame, width, height) {
+  if (!canvas) return;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  if (!width || !height) {
+    var _a = getFrameDimensions(frame),
+      frameWidth = _a[0],
+      frameHeight = _a[1];
+    width || (width = frameWidth);
+    height || (height = frameHeight);
+  }
+  canvas.width = width;
+  canvas.height = height;
+  ctx.drawImage(frame, 0, 0, width, height);
+}
+function clearCanvas(canvas) {
+  var _a;
+  (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
+}
+var templateObject_1$N, templateObject_2$G;
+
+function useFrameLoop(fn, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _a = React.useState(false),
+    running = _a[0],
+    setRunning = _a[1];
+  var startedAtRef = React.useRef(null);
+  var loopId = React.useRef(0);
+  var frameId = React.useRef(0);
+  React.useEffect(function runFrameLoop() {
+    if (!running) return;
+    var timer;
+    var currentLoopId = loopId.current;
+    function hotLoop() {
+      return __awaiter(this, void 0, void 0, function () {
+        var start, timeRunning, took, amountToThrottle;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+          switch (_d.label) {
+            case 0:
+              if (currentLoopId !== loopId.current) return [2 /*return*/];
+              start = new Date().getTime();
+              timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
+              return [4 /*yield*/, fn(frameId.current, timeRunning)];
+            case 1:
+              _d.sent();
+              took = new Date().getTime() - start;
+              amountToThrottle = Math.max(((_c = options.throttleMs) !== null && _c !== void 0 ? _c : 0) - took, 0);
+              timer = setTimeout(function () {
+                frameId.current = requestAnimationFrame(hotLoop);
+              }, amountToThrottle);
+              return [2 /*return*/];
+          }
         });
-        req.addEventListener('error', reject);
-        req.open('GET', url, true);
-        req.send();
-      })];
-    });
-  });
+      });
+    }
+    void hotLoop();
+    return function () {
+      loopId.current += 1;
+      if (frameId.current) cancelAnimationFrame(frameId.current);
+      if (timer) clearTimeout(timer);
+    };
+  }, [fn, running, options.throttleMs]);
+  var start = React.useCallback(function () {
+    startedAtRef.current = new Date();
+    setRunning(true);
+  }, []);
+  var stop = React.useCallback(function () {
+    loopId.current += 1; // force the loop to stop immediately.
+    setRunning(false);
+    startedAtRef.current = null;
+  }, []);
+  React.useEffect(function startAutomatically() {
+    if (options.autoStart) start();
+    return stop;
+  }, [options.autoStart, start, stop]);
+  return {
+    start: start,
+    stop: stop
+  };
 }
-var documentDetectorPreloading = false,
-  focusModelPreloading = false,
-  faceDetectorPreloading = false;
-function preloadDocumentDetectorDependencies() {
-  return __awaiter(this, void 0, void 0, function () {
-    function handleDownloadProgress(event) {
-      var detail = event.detail;
-      if (!dependencies.includes(detail.url)) return;
-      progressByUseCase.documentDetection = sumUpProgressForDependencies(dependencies);
-      document.dispatchEvent(new CustomEvent('idmission.preloadProgress.documentDetection', {
-        detail: progressByUseCase.documentDetection
-      }));
+
+function listAvailableCameras(facingMode_1) {
+  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
+    var cameraEnumerationStream, allDevices, allowedVideoDevices;
+    if (requestMicAccess === void 0) {
+      requestMicAccess = false;
     }
-    var dependencies;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
-          if (documentDetectorPreloading) return [2 /*return*/, new Promise(function (resolve) {
-            var i = setInterval(function () {
-              if (!documentDetectorPreloading) {
-                clearInterval(i);
-                resolve();
+          return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+            video: {
+              facingMode: {
+                exact: facingMode
               }
-            }, 100);
-          })];
-          documentDetectorPreloading = true;
-          return [4 /*yield*/, probeModelCapabilities()];
+            },
+            audio: requestMicAccess
+          })
+          // This lists all available cameras attached to the user's device.
+          ];
         case 1:
-          _a.sent();
-          if (modelCapabilities.delegate === 'NONE') {
-            throw new Error('No available delegate for document detector.');
-          }
-          dependencies = [defaultDocumentDetectorModelPath];
-          document.addEventListener('idmission.preloadProgress', handleDownloadProgress);
-          _a.label = 2;
+          cameraEnumerationStream = _a.sent();
+          return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
         case 2:
-          _a.trys.push([2,, 4, 5]);
-          return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
-        case 3:
-          _a.sent();
-          return [3 /*break*/, 5];
-        case 4:
-          document.removeEventListener('idmission.preloadProgress', handleDownloadProgress);
-          documentDetectorPreloading = false;
-          return [7 /*endfinally*/];
-        case 5:
-          return [2 /*return*/];
-      }
-    });
-  });
-}
-function preloadFocusModelDependencies() {
-  return __awaiter(this, void 0, void 0, function () {
-    function handleModelDownloadProgress(event) {
-      var detail = event.detail;
-      if (!dependencies.includes(detail.url)) return;
-      progressByUseCase.focus = sumUpProgressForDependencies(dependencies);
-      document.dispatchEvent(new CustomEvent('idmission.preloadProgress.focus', {
-        detail: progressByUseCase.focus
-      }));
-    }
-    var dependencies;
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          if (focusModelPreloading) return [2 /*return*/, new Promise(function (resolve) {
-            var i = setInterval(function () {
-              if (!focusModelPreloading) {
-                clearInterval(i);
-                resolve();
-              }
-            }, 100);
-          })];
-          focusModelPreloading = true;
-          return [4 /*yield*/, probeModelCapabilities()];
-        case 1:
-          _a.sent();
-          if (modelCapabilities.delegate === 'NONE') {
-            throw new Error('No available delegate for document detector.');
-          }
-          dependencies = [defaultFocusModelPath];
-          document.addEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-          _a.label = 2;
-        case 2:
-          _a.trys.push([2,, 4, 5]);
-          return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
-        case 3:
-          _a.sent();
-          return [3 /*break*/, 5];
-        case 4:
-          document.removeEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-          focusModelPreloading = false;
-          return [7 /*endfinally*/];
-        case 5:
-          return [2 /*return*/];
-      }
-    });
-  });
-}
-function preloadFaceDetectorDependencies() {
-  return __awaiter(this, void 0, void 0, function () {
-    function handleModelDownloadProgress(event) {
-      var detail = event.detail;
-      if (!dependencies.includes(detail.url)) return;
-      progressByUseCase.faceDetection = sumUpProgressForDependencies(dependencies);
-      document.dispatchEvent(new CustomEvent('idmission.preloadProgress.faceDetection', {
-        detail: progressByUseCase.faceDetection
-      }));
-    }
-    var dependencies;
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          if (faceDetectorPreloading) return [2 /*return*/, new Promise(function (resolve) {
-            var i = setInterval(function () {
-              if (!faceDetectorPreloading) {
-                clearInterval(i);
-                resolve();
-              }
-            }, 100);
-          })];
-          faceDetectorPreloading = true;
-          return [4 /*yield*/, probeModelCapabilities()];
-        case 1:
-          _a.sent();
-          if (modelCapabilities.delegate === 'NONE') {
-            throw new Error('No available delegate for document detector.');
-          }
-          dependencies = [defaultFaceDetectorModelPath];
-          document.addEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-          _a.label = 2;
-        case 2:
-          _a.trys.push([2,, 4, 5]);
-          return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
-        case 3:
-          _a.sent();
-          return [3 /*break*/, 5];
-        case 4:
-          document.removeEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-          faceDetectorPreloading = false;
-          return [7 /*endfinally*/];
-        case 5:
-          return [2 /*return*/];
+          allDevices = _a.sent();
+          allowedVideoDevices = allDevices.filter(function (_a) {
+            var kind = _a.kind,
+              label = _a.label;
+            return kind === 'videoinput' && !label.toLowerCase().includes('virtual');
+          });
+          // Release the access to the user's camera that we obtained for enumeration purposes.
+          cameraEnumerationStream.getVideoTracks().forEach(function (track) {
+            track.enabled = false;
+            track.stop();
+          });
+          cameraEnumerationStream = null;
+          return [2 /*return*/, allowedVideoDevices];
       }
     });
   });
 }
-function progressToPercentage(progress) {
-  return progress.total > 0 ? Math.round(100.0 * progress.loaded / progress.total) : 0;
-}
-function sumUpProgressForDependencies(dependencies) {
-  return dependencies.reduce(function (result, dependency) {
-    var dependencyProgress = progressByUrl[dependency];
-    if (!dependencyProgress) return result;
-    result.loaded += dependencyProgress.loaded;
-    result.total += dependencyProgress.total;
-    return result;
-  }, {
-    loaded: 0,
-    total: 0
+var frontCameraLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var rearCameraLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var backUltraWideCameraLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
+  return s.toLocaleLowerCase().split(' ').join('');
+});
+var cameraLabelMatches = function cameraLabelMatches(labelOrDevice, labelSetOrLabel) {
+  var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
+  var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
+  return labelSet.some(function (l) {
+    return label.includes(l);
   });
-}
-
-var defaultDocumentDetectionScoreThreshold = 0.1;
-var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
-var defaultDocumentDetectionThresholds = {
-  idCardFront: 0.6,
-  idCardBack: 0.6,
-  passport: 0.4,
-  singlePage: 0.4,
-  stability: {
-    idCardFront: 0.85,
-    idCardBack: 0.85,
-    passport: 0.5,
-    singlePage: 0.5
-  }
 };
-var documentTypeDisplayNames = {
-  idCardFront: 'ID card front',
-  idCardBack: 'ID card back',
-  passport: 'Passport',
-  singlePage: 'Single page',
-  none: 'None'
+var getDeviceLabel = function getDeviceLabel(deviceInfo) {
+  return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
 };
-var detector = null;
-var detectorSettings = null;
-function loadDocumentDetector() {
-  return __awaiter(this, arguments, void 0, function (modelAssetPath, scoreThreshold) {
-    var _a, _b;
-    if (modelAssetPath === void 0) {
-      modelAssetPath = defaultDocumentDetectorModelPath;
-    }
-    if (scoreThreshold === void 0) {
-      scoreThreshold = defaultDocumentDetectionScoreThreshold;
-    }
-    return __generator(this, function (_c) {
-      switch (_c.label) {
-        case 0:
-          if (detector && (detectorSettings === null || detectorSettings === void 0 ? void 0 : detectorSettings.modelAssetPath) === modelAssetPath && (detectorSettings === null || detectorSettings === void 0 ? void 0 : detectorSettings.scoreThreshold) === scoreThreshold) return [2 /*return*/, detector];
-          closeDocumentDetector();
-          return [4 /*yield*/, preloadDocumentDetectorDependencies()];
-        case 1:
-          _c.sent();
-          if (modelCapabilities.delegate === 'NONE') {
-            throw new Error('No available delegate for document detector.');
-          }
-          _b = (_a = tasksVision.ObjectDetector).createFromOptions;
-          return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
-        case 2:
-          return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
-            baseOptions: {
-              modelAssetPath: modelAssetPath,
-              delegate: modelCapabilities.delegate
-            },
-            // canvas: document.createElement('canvas'),
-            scoreThreshold: scoreThreshold,
-            runningMode: 'VIDEO'
-          }])];
-        case 3:
-          detector = _c.sent();
-          detectorSettings = {
-            modelAssetPath: modelAssetPath,
-            scoreThreshold: scoreThreshold
-          };
-          return [2 /*return*/, detector];
-      }
+var currentCamera;
+function obtainCameraAccess(stream, deviceLabel, video) {
+  releaseCameraAccess();
+  log('obtaining camera access...');
+  var _a = stream.getVideoTracks()[0].getSettings(),
+    width = _a.width,
+    height = _a.height;
+  log('camera dimensions', width, height);
+  var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
+  log('camera label', label);
+  var isRearFacing = cameraLabelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearCameraLabels, true), backUltraWideCameraLabels, true), ['iphone'], false));
+  log('is rear facing?', isRearFacing);
+  var release = function release() {
+    stream.getTracks().forEach(function (track) {
+      track.enabled = false;
+      track.stop();
     });
-  });
+    if (video) {
+      video.pause();
+      video.srcObject = null;
+      video.src = '';
+    }
+  };
+  width || (width = 0);
+  height || (height = 0);
+  currentCamera = {
+    label: deviceLabel,
+    stream: stream,
+    width: width,
+    height: height,
+    isRearFacing: isRearFacing,
+    release: release
+  };
+  log('camera access granted');
+  // if (video) video.srcObject = stream
+  // log('video source initialized')
+  return currentCamera;
 }
-function closeDocumentDetector() {
-  detector === null || detector === void 0 ? void 0 : detector.close();
-  detector = null;
-  detectorSettings = null;
-}
-function useLoadDocumentDetector(_a) {
-  var _b = _a.shouldLoadModels,
-    shouldLoadModels = _b === void 0 ? true : _b,
-    _c = _a.modelPath,
-    modelPath = _c === void 0 ? defaultDocumentDetectorModelPath : _c,
-    _d = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _d === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _d,
-    _e = _a.scoreThreshold,
-    scoreThreshold = _e === void 0 ? defaultDocumentDetectionScoreThreshold : _e,
-    onModelError = _a.onModelError,
-    videoRef = _a.videoRef;
-  var _f = React.useState('not-started'),
-    modelLoadState = _f[0],
-    setModelLoadState = _f[1];
-  var _g = React.useState(null),
-    modelWarmingStartedAt = _g[0],
-    setModelWarmingStartedAt = _g[1];
-  var _h = React.useState(0),
-    modelDownloadProgress = _h[0],
-    setModelDownloadProgress = _h[1];
-  var _j = React.useState(null),
-    modelError = _j[0],
-    setModelError = _j[1];
-  React.useEffect(function loadModel() {
-    var _this = this;
-    if (!shouldLoadModels) return;
-    setModelLoadState('downloading');
-    setModelWarmingStartedAt(null);
-    function handleDownloadProgress(event) {
-      setModelDownloadProgress(progressToPercentage(event.detail));
-    }
-    document.addEventListener('idmission.preloadProgress.documentDetection', handleDownloadProgress);
-    var modelLoadTimeout = setTimeout(function () {
-      setModelError(new Error('Model loading time limit exceeded.'));
-    }, modelLoadTimeoutMs);
-    var cancelVideoReady = function cancelVideoReady() {};
-    loadDocumentDetector(modelPath, scoreThreshold).then(function (model) {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, videoReady, cancel, cancelled;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              setModelDownloadProgress(100);
-              setModelLoadState('warming');
-              setModelWarmingStartedAt(new Date().getTime());
-              clearTimeout(modelLoadTimeout);
-              return [4 /*yield*/, testDocumentDetectionAgainstKnownImage(model)];
-            case 1:
-              _b.sent();
-              _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
-              cancelled = false;
-              cancelVideoReady = function cancelVideoReady() {
-                cancelled = true;
-                cancel();
-              };
-              return [4 /*yield*/, videoReady];
-            case 2:
-              _b.sent();
-              setTimeout(function () {
-                if (cancelled) return;
-                model.detectForVideo(videoRef.current, performance.now());
-                setModelLoadState('ready');
-              }, 500);
-              return [2 /*return*/];
-          }
-        });
-      });
-    })["catch"](function (e) {
-      setModelError(e);
-      setModelLoadState('error');
-    })["finally"](function () {
-      clearTimeout(modelLoadTimeout);
-    });
-    return function () {
-      log('unloading document detection model');
-      cancelVideoReady();
-      closeDocumentDetector();
-      clearTimeout(modelLoadTimeout);
-      document.removeEventListener('idmission.preloadProgress.documentDetection', handleDownloadProgress);
-    };
-  }, [shouldLoadModels, modelLoadTimeoutMs, modelPath, scoreThreshold, videoRef]);
-  React.useEffect(function handleModelError() {
-    if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
-  }, [modelError, onModelError]);
-  return React.useMemo(function () {
-    return {
-      ready: modelLoadState === 'ready',
-      modelLoadState: modelLoadState,
-      modelDownloadProgress: modelDownloadProgress,
-      modelWarmingStartedAt: modelWarmingStartedAt,
-      modelError: modelError,
-      setModelError: setModelError
-    };
-  }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
-}
-function makeDocumentDetectorPrediction(frame) {
-  return __awaiter(this, void 0, void 0, function () {
-    var startedAt, prediction, time, frameWidth, frameHeight;
-    return __generator(this, function (_a) {
-      if (!detector) return [2 /*return*/, null];
-      startedAt = new Date();
-      // Detectors can throw errors, for example when using custom URLs that
-      // contain a model that doesn't provide the expected output.
-      try {
-        prediction = detector.detectForVideo(frame, performance.now());
-        time = new Date().getTime() - startedAt.getTime();
-        frameWidth = frame.width;
-        frameHeight = frame.height;
-        return [2 /*return*/, _assign(_assign({}, prediction), {
-          time: time,
-          frameWidth: frameWidth,
-          frameHeight: frameHeight
-        })];
-      } catch (e) {
-        error('caught object detection error', e);
-      }
-      return [2 /*return*/, null];
-    });
-  });
-}
-var lastDetectionAt = 0;
-var lastDetectionTime = 0;
-function setLastDetectionAt(time) {
-  lastDetectionTime = time - lastDetectionAt;
-  lastDetectionAt = time;
-}
-var framesNeededSamples = [];
-function trackFramesNeeded(value, bufferLength) {
-  if (bufferLength === void 0) {
-    bufferLength = 25;
-  }
-  framesNeededSamples.unshift(value);
-  if (framesNeededSamples.length > bufferLength) framesNeededSamples.length = bufferLength;
-}
-var lastNBoxes = [];
-var lastNPairs = [];
-function trackBox(box, framesNeeded) {
-  if (framesNeeded === void 0) {
-    framesNeeded = 12;
-  }
-  lastNBoxes.unshift(box);
-  if (lastNBoxes.length > framesNeeded) lastNBoxes.length = framesNeeded;
-  if (lastNBoxes.length > 1) {
-    var lastBox = lastNBoxes[1];
-    var iou = calculateIoU(box, lastBox);
-    lastNPairs.unshift({
-      a: box,
-      b: lastBox,
-      iou: iou
-    });
-    if (lastNPairs.length > framesNeeded - 1) lastNPairs.length = framesNeeded - 1;
-  }
-}
-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, _m, _o, _p;
-  if (boundaries === void 0) {
-    boundaries = defaultDocumentDetectionBoundaries;
-  }
-  var detections = prediction.detections,
-    frameWidth = prediction.frameWidth,
-    frameHeight = prediction.frameHeight,
-    time = prediction.time;
-  var boundaryTop = (_a = boundaries.top) !== null && _a !== void 0 ? _a : 20;
-  var boundaryLeft = (_b = boundaries.left) !== null && _b !== void 0 ? _b : 20;
-  var boundaryRight = (_c = boundaries.right) !== null && _c !== void 0 ? _c : 20;
-  var boundaryBottom = (_d = boundaries.bottom) !== null && _d !== void 0 ? _d : 20;
-  var frameWidth80Pct = frameWidth * 0.8;
-  var detectedObjects = applyNonMaxSuppression(detections.flatMap(function (d) {
-    return d.categories.map(function (category) {
-      return {
-        label: category === null || category === void 0 ? void 0 : category.categoryName,
-        score: category === null || category === void 0 ? void 0 : category.score,
-        box: convertBoundingBox(d.boundingBox)
-      };
-    });
-  }), function (obj) {
-    var _a = obj.box,
-      xMin = _a.xMin,
-      yMin = _a.yMin,
-      width = _a.width,
-      height = _a.height;
-    return yMin > boundaryTop &&
-    // Is it valid top edge of ID detected?
-    yMin + height + boundaryBottom < frameHeight && (
-    // Is it valid bottom edge less than max video height
-    xMin > boundaryLeft || xMin + width > frameWidth80Pct) &&
-    // 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 allZero = detections.length > 0 && !detections.some(function (_a) {
-    var boundingBox = _a.boundingBox;
-    return Object.values(boundingBox !== null && boundingBox !== void 0 ? boundingBox : {}).some(function (n) {
-      return n > 0;
-    });
-  });
-  var bestIdCardFront = detectedObjects.find(function (obj) {
-    return obj.label === 'Document';
-  });
-  var bestIdCardBack = detectedObjects.find(function (obj) {
-    return obj.label === 'Document back';
-  });
-  var bestPassportPage = detectedObjects.find(function (obj) {
-    return obj.label === 'Passport page';
-  });
-  var bestSinglePage = detectedObjects.find(function (obj) {
-    return obj.label === 'Single page';
-  });
-  var idCardFrontDetectionScore = (_e = bestIdCardFront === null || bestIdCardFront === void 0 ? void 0 : bestIdCardFront.score) !== null && _e !== void 0 ? _e : 0;
-  var idCardBackDetectionScore = (_f = bestIdCardBack === null || bestIdCardBack === void 0 ? void 0 : bestIdCardBack.score) !== null && _f !== void 0 ? _f : 0;
-  var passportDetectionScore = (_g = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _g !== void 0 ? _g : 0;
-  var singlePageDetectionScore = (_h = bestSinglePage === null || bestSinglePage === void 0 ? void 0 : bestSinglePage.score) !== null && _h !== void 0 ? _h : 0;
-  var idCardFrontDetectionThresholdMet = idCardFrontDetectionScore >= ((_j = thresholds.idCardFront) !== null && _j !== void 0 ? _j : 0);
-  var idCardBackDetectionThresholdMet = idCardBackDetectionScore >= ((_k = thresholds.idCardBack) !== null && _k !== void 0 ? _k : 0);
-  var passportDetectionThresholdMet = passportDetectionScore >= ((_l = thresholds.passport) !== null && _l !== void 0 ? _l : 0);
-  var singlePageDetectionThresholdMet = singlePageDetectionScore >= ((_m = thresholds.singlePage) !== null && _m !== void 0 ? _m : 0);
-  var bestDocument = singlePageDetectionThresholdMet ? bestSinglePage : passportDetectionThresholdMet ? bestPassportPage : idCardBackDetectionThresholdMet ? bestIdCardBack : bestIdCardFront;
-  var detectionThreshold = singlePageDetectionThresholdMet ? thresholds.singlePage : passportDetectionThresholdMet ? thresholds.passport : idCardBackDetectionThresholdMet ? thresholds.idCardBack : thresholds.idCardFront;
-  var detectionScore = (_o = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _o !== void 0 ? _o : 0;
-  var detectionThresholdMet = detectionScore >= (detectionThreshold !== null && detectionThreshold !== void 0 ? detectionThreshold : 0);
-  var detectedDocumentType = 'none';
-  if (singlePageDetectionThresholdMet) {
-    detectedDocumentType = 'singlePage';
-  } else if (passportDetectionThresholdMet) {
-    detectedDocumentType = 'passport';
-  } else if (idCardBackDetectionThresholdMet) {
-    detectedDocumentType = 'idCardBack';
-  } else if (detectionThresholdMet) {
-    detectedDocumentType = 'idCardFront';
-  }
-  var documentInBounds = !!bestDocument;
-  if (lastDetectionTime > 0) {
-    trackFramesNeeded(1000 / lastDetectionTime);
-  }
-  var documentIsStable = false;
-  var documentTooClose = false;
-  if (bestDocument) {
-    var _q = [bestDocument.box.width / frameWidth, bestDocument.box.height / frameHeight],
-      docWidth = _q[0],
-      docHeight = _q[1];
-    documentTooClose = docWidth > 0.85 || docHeight > 0.85;
-    if (detectionThresholdMet && documentInBounds && !documentTooClose) {
-      var thresholdSet = (_p = thresholds.stability) !== null && _p !== void 0 ? _p : defaultDocumentDetectionThresholds.stability;
-      var threshold_1 = thresholdSet[detectedDocumentType];
-      var framesNeeded = Math.ceil(average(framesNeededSamples));
-      trackBox(bestDocument.box, framesNeeded);
-      documentIsStable = lastNBoxes.length >= framesNeeded && !lastNPairs.some(function (pair) {
-        return pair.iou < threshold_1;
-      });
-    }
-  }
-  return {
-    prediction: prediction,
-    detectedObjects: detectedObjects,
-    detectionScore: detectionScore,
-    detectionTime: time,
-    detectionThresholdMet: detectionThresholdMet,
-    detectedDocumentType: detectedDocumentType,
-    idCardFrontDetectionScore: idCardFrontDetectionScore,
-    idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
-    idCardBackDetectionScore: idCardBackDetectionScore,
-    idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
-    passportDetectionScore: passportDetectionScore,
-    passportDetectionThresholdMet: passportDetectionThresholdMet,
-    singlePageDetectionScore: singlePageDetectionScore,
-    singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
-    bestDocument: bestDocument,
-    documentInBounds: documentInBounds,
-    documentTooClose: documentTooClose,
-    documentIsStable: documentIsStable,
-    frameWidth: frameWidth,
-    frameHeight: frameHeight,
-    allZero: allZero
-  };
-}
-function applyNonMaxSuppression(detectedObjects, isGoodBox) {
-  var maxes = {};
-  detectedObjects.forEach(function (obj, i) {
-    if (obj) {
-      if (!maxes[obj.label]) maxes[obj.label] = [0, -1];
-      if (obj.score > maxes[obj.label][0] && (isGoodBox === null || isGoodBox === void 0 ? void 0 : isGoodBox(obj))) maxes[obj.label] = [obj.score, i];
-    }
-  });
-  return Object.keys(maxes).map(function (label) {
-    return detectedObjects[maxes[label][1]];
-  }).filter(function (obj) {
-    return !!obj;
-  });
-}
-function testDocumentDetectionAgainstKnownImage(detector) {
-  return new Promise(function (resolve, reject) {
-    var img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = function () {
-      var prediction = detector.detectForVideo(img, performance.now());
-      if (prediction.detections.length > 0) {
-        debug('document detection test result', prediction.detections);
-        resolve(void 0);
-      } else {
-        warn('document detection test failed');
-        reject(new Error('testDocumentDetectionAgainstKnownImage failed to predict'));
-      }
-    };
-    img.onerror = function () {
-      return reject(new Error('testDocumentDetectionAgainstKnownImage failed to load image'));
-    };
-    img.src = "".concat(DEFAULT_CDN_URL, "/id-card-test.jpg");
-  });
-}
-
-function useFrameLoop(fn, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var _a = React.useState(false),
-    running = _a[0],
-    setRunning = _a[1];
-  var startedAtRef = React.useRef(null);
-  var loopId = React.useRef(0);
-  var frameId = React.useRef(0);
-  React.useEffect(function runFrameLoop() {
-    if (!running) return;
-    var timer;
-    var currentLoopId = loopId.current;
-    function hotLoop() {
-      return __awaiter(this, void 0, void 0, function () {
-        var start, timeRunning, took, amountToThrottle;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-          switch (_d.label) {
-            case 0:
-              if (currentLoopId !== loopId.current) return [2 /*return*/];
-              start = new Date().getTime();
-              timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
-              return [4 /*yield*/, fn(frameId.current, timeRunning)];
-            case 1:
-              _d.sent();
-              took = new Date().getTime() - start;
-              amountToThrottle = Math.max(((_c = options.throttleMs) !== null && _c !== void 0 ? _c : 0) - took, 0);
-              timer = setTimeout(function () {
-                frameId.current = requestAnimationFrame(hotLoop);
-              }, amountToThrottle);
-              return [2 /*return*/];
-          }
-        });
-      });
-    }
-    void hotLoop();
-    return function () {
-      loopId.current += 1;
-      if (frameId.current) cancelAnimationFrame(frameId.current);
-      if (timer) clearTimeout(timer);
-    };
-  }, [fn, running, options.throttleMs]);
-  var start = React.useCallback(function () {
-    startedAtRef.current = new Date();
-    setRunning(true);
-  }, []);
-  var stop = React.useCallback(function () {
-    loopId.current += 1; // force the loop to stop immediately.
-    setRunning(false);
-    startedAtRef.current = null;
-  }, []);
-  React.useEffect(function startAutomatically() {
-    if (options.autoStart) start();
-    return stop;
-  }, [options.autoStart, start, stop]);
-  return {
-    start: start,
-    stop: stop
-  };
-}
-
-function listAvailableCameras(facingMode_1) {
-  return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
-    var cameraEnumerationStream, allDevices, allowedVideoDevices;
-    if (requestMicAccess === void 0) {
-      requestMicAccess = false;
-    }
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
-            video: {
-              facingMode: {
-                exact: facingMode
-              }
-            },
-            audio: requestMicAccess
-          })
-          // This lists all available cameras attached to the user's device.
-          ];
-        case 1:
-          cameraEnumerationStream = _a.sent();
-          return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
-        case 2:
-          allDevices = _a.sent();
-          allowedVideoDevices = allDevices.filter(function (_a) {
-            var kind = _a.kind,
-              label = _a.label;
-            return kind === 'videoinput' && !label.toLowerCase().includes('virtual');
-          });
-          // Release the access to the user's camera that we obtained for enumeration purposes.
-          cameraEnumerationStream.getVideoTracks().forEach(function (track) {
-            track.enabled = false;
-            track.stop();
-          });
-          cameraEnumerationStream = null;
-          return [2 /*return*/, allowedVideoDevices];
-      }
-    });
-  });
-}
-var frontCameraLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var rearCameraLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var backUltraWideCameraLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
-  return s.toLocaleLowerCase().split(' ').join('');
-});
-var cameraLabelMatches = function cameraLabelMatches(labelOrDevice, labelSetOrLabel) {
-  var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
-  var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
-  return labelSet.some(function (l) {
-    return label.includes(l);
-  });
-};
-var getDeviceLabel = function getDeviceLabel(deviceInfo) {
-  return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
-};
-var currentCamera;
-function obtainCameraAccess(stream, deviceLabel, video) {
-  releaseCameraAccess();
-  log('obtaining camera access...');
-  var _a = stream.getVideoTracks()[0].getSettings(),
-    width = _a.width,
-    height = _a.height;
-  log('camera dimensions', width, height);
-  var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
-  log('camera label', label);
-  var isRearFacing = cameraLabelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearCameraLabels, true), backUltraWideCameraLabels, true), ['iphone'], false));
-  log('is rear facing?', isRearFacing);
-  var release = function release() {
-    stream.getTracks().forEach(function (track) {
-      track.enabled = false;
-      track.stop();
-    });
-    if (video) {
-      video.pause();
-      video.srcObject = null;
-      video.src = '';
-    }
-  };
-  width || (width = 0);
-  height || (height = 0);
-  currentCamera = {
-    label: deviceLabel,
-    stream: stream,
-    width: width,
-    height: height,
-    isRearFacing: isRearFacing,
-    release: release
-  };
-  log('camera access granted');
-  // if (video) video.srcObject = stream
-  // log('video source initialized')
-  return currentCamera;
-}
-function releaseCameraAccess() {
-  if (!currentCamera) return;
-  log('releasing camera access...');
-  currentCamera.release();
-  currentCamera = undefined;
+function releaseCameraAccess() {
+  if (!currentCamera) return;
+  log('releasing camera access...');
+  currentCamera.release();
+  currentCamera = undefined;
 }
 
 var en = {};
@@ -5343,224 +4790,768 @@ function CameraTamperSeal(_a) {
     className: classNames.message
   }, messageText)));
 }
-var StyledOverlayInner$4 = styled__default.default(OverlayInner$2)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var StyledOverlayHeading = styled__default.default.h3(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-function useCameraStore(selector) {
-  var store = React.useContext(CameraStoreContext);
-  if (!store) throw new Error('useCameraStore cannot be used without Provider');
-  return zustand.useStore(store, selector);
+var StyledOverlayInner$4 = styled__default.default(OverlayInner$2)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var StyledOverlayHeading = styled__default.default.h3(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+function useCameraStore(selector) {
+  var store = React.useContext(CameraStoreContext);
+  if (!store) throw new Error('useCameraStore cannot be used without Provider');
+  return zustand.useStore(store, selector);
+}
+var templateObject_1$M, templateObject_2$F;
+
+var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
+  startDocumentDetection: function startDocumentDetection() {
+    return null;
+  },
+  stopDocumentDetection: function stopDocumentDetection() {
+    return null;
+  },
+  loadDocumentDetectionModel: function loadDocumentDetectionModel() {
+    return null;
+  },
+  documentDetectionModelState: 'not-started',
+  documentDetectionModelDownloadProgress: 0,
+  documentDetectionModelWarmingStartedAt: null,
+  documentDetectionModelError: null,
+  onDocumentDetected: function onDocumentDetected() {
+    return null;
+  },
+  detectionTime: 0,
+  documentDetectionThresholds: {},
+  setDocumentDetectionThresholds: function setDocumentDetectionThresholds() {
+    return null;
+  },
+  documentDetectionBoundaries: defaultDocumentDetectionBoundaries,
+  setDocumentDetectionBoundaries: function setDocumentDetectionBoundaries() {
+    return null;
+  },
+  documentDetectionLastPredictionCanvas: {
+    current: null
+  },
+  clearDocumentDetectionLastPredictionCanvas: function clearDocumentDetectionLastPredictionCanvas() {
+    return null;
+  }
+});
+function DocumentDetectionModelProvider(_a) {
+  var _this = this;
+  var _b = _a.autoStart,
+    autoStart = _b === void 0 ? true : _b,
+    children = _a.children,
+    _c = _a.throttleMs,
+    throttleMs = _c === void 0 ? 16 : _c,
+    _d = _a.delayAfterStartMs,
+    delayAfterStartMs = _d === void 0 ? 0 : _d,
+    _e = _a.documentDetectionModelPath,
+    documentDetectionModelPath = _e === void 0 ? defaultDocumentDetectorModelPath : _e,
+    _f = _a.documentDetectionModelScoreThreshold,
+    documentDetectionModelScoreThreshold = _f === void 0 ? defaultDocumentDetectionScoreThreshold : _f,
+    _g = _a.modelLoadTimeoutMs,
+    modelLoadTimeoutMs = _g === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _g,
+    onDocumentDetectionModelError = _a.onDocumentDetectionModelError,
+    _h = _a.shouldLoadModels,
+    shouldLoadModelsProp = _h === void 0 ? true : _h;
+  var _j = useCameraStore(),
+    videoRef = _j.videoRef,
+    videoLoaded = _j.videoLoaded,
+    cameraReady = _j.cameraReady;
+  var lastPredictionCanvas = React.useRef(null);
+  var onPredictionHandler = React.useRef();
+  var _k = React.useState({}),
+    documentDetectionThresholds = _k[0],
+    setDocumentDetectionThresholds = _k[1];
+  var _l = React.useState(defaultDocumentDetectionBoundaries),
+    documentDetectionBoundaries = _l[0],
+    setDocumentDetectionBoundaries = _l[1];
+  var _m = React.useState(0),
+    timesAllZero = _m[0],
+    setTimesAllZero = _m[1];
+  var _o = React.useState(0),
+    canvasKey = _o[0],
+    setCanvasKey = _o[1];
+  var stopDetection = React.useRef(0);
+  var _p = React.useState(shouldLoadModelsProp),
+    shouldLoadModels = _p[0],
+    setShouldLoadModels = _p[1];
+  var load = React.useCallback(function () {
+    return setShouldLoadModels(true);
+  }, []);
+  var _q = useLoadDocumentDetector({
+      modelPath: documentDetectionModelPath,
+      modelLoadTimeoutMs: modelLoadTimeoutMs,
+      scoreThreshold: documentDetectionModelScoreThreshold,
+      onModelError: onDocumentDetectionModelError,
+      videoRef: videoRef,
+      shouldLoadModels: shouldLoadModels
+    }),
+    ready = _q.ready,
+    modelLoadState = _q.modelLoadState,
+    modelDownloadProgress = _q.modelDownloadProgress,
+    modelWarmingStartedAt = _q.modelWarmingStartedAt,
+    modelError = _q.modelError,
+    setModelError = _q.setModelError;
+  var _r = useFrameLoop(React.useCallback(function (frameId, timeRunning) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var stopDetectionAtStart, vw, vh, ctx, prediction, processedPrediction;
+        var _a;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              if (!videoLoaded || !cameraReady || !ready || !videoRef.current || !lastPredictionCanvas.current) return [2 /*return*/];
+              stopDetectionAtStart = stopDetection.current;
+              vw = videoRef.current.videoWidth;
+              vh = videoRef.current.videoHeight;
+              lastPredictionCanvas.current.width = vw;
+              lastPredictionCanvas.current.height = vh;
+              ctx = lastPredictionCanvas.current.getContext('2d');
+              if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 3];
+              if (stopDetectionAtStart !== stopDetection.current) return [2 /*return*/];
+              ctx.drawImage(videoRef.current, 0, 0, vw, vh);
+              return [4 /*yield*/, makeDocumentDetectorPrediction(lastPredictionCanvas.current)];
+            case 1:
+              prediction = _b.sent();
+              if (!prediction) return [3 /*break*/, 3];
+              processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds, documentDetectionBoundaries);
+              processedPrediction.frameId = frameId;
+              setLastDetectionAt(new Date().getTime());
+              debug(processedPrediction);
+              if (processedPrediction.allZero) setTimesAllZero(function (n) {
+                return n + 1;
+              });
+              if (stopDetectionAtStart !== stopDetection.current) return [2 /*return*/];
+              if (timeRunning < delayAfterStartMs) return [2 /*return*/];
+              return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, processedPrediction)];
+            case 2:
+              _b.sent();
+              _b.label = 3;
+            case 3:
+              return [2 /*return*/];
+          }
+        });
+      });
+    }, [cameraReady, delayAfterStartMs, documentDetectionBoundaries, documentDetectionThresholds, ready, videoLoaded, videoRef]), {
+      throttleMs: throttleMs,
+      autoStart: autoStart
+    }),
+    start = _r.start,
+    stop = _r.stop;
+  React.useEffect(function setErrorIfAllZero() {
+    if (timesAllZero >= 2) {
+      setModelError(new Error('model is returning all zeroes'));
+    }
+  }, [setModelError, timesAllZero]);
+  var onDocumentDetected = React.useCallback(function (handler) {
+    onPredictionHandler.current = handler;
+  }, []);
+  var clearDocumentDetectionLastPredictionCanvas = React.useCallback(function () {
+    stopDetection.current += 1;
+    setCanvasKey(function (n) {
+      return n + 1;
+    });
+  }, []);
+  var value = React.useMemo(function () {
+    return {
+      startDocumentDetection: start,
+      stopDocumentDetection: stop,
+      loadDocumentDetectionModel: load,
+      documentDetectionModelState: modelLoadState,
+      documentDetectionModelWarmingStartedAt: modelWarmingStartedAt,
+      documentDetectionModelError: modelError,
+      documentDetectionModelDownloadProgress: modelDownloadProgress,
+      onDocumentDetected: onDocumentDetected,
+      detectionTime: lastDetectionTime,
+      documentDetectionThresholds: documentDetectionThresholds,
+      setDocumentDetectionThresholds: setDocumentDetectionThresholds,
+      documentDetectionBoundaries: documentDetectionBoundaries,
+      setDocumentDetectionBoundaries: setDocumentDetectionBoundaries,
+      documentDetectionLastPredictionCanvas: lastPredictionCanvas,
+      clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
+    };
+  }, [start, stop, load, modelLoadState, modelWarmingStartedAt, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
+  return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
+    key: canvasKey,
+    ref: lastPredictionCanvas
+  }), children);
+}
+
+function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
+  var _a;
+  if (quality === void 0) {
+    quality = 0.92;
+  }
+  if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
+  var rawCtx = rawCanvas.getContext('2d');
+  var cropCtx = cropCanvas.getContext('2d');
+  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);
+  if (frame.height > frame.width) {
+    cropCanvas.width = frame.width;
+    cropCanvas.height = frame.height;
+    cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
+  } else {
+    var _b = (_a = face === null || face === void 0 ? void 0 : face.box) !== null && _a !== void 0 ? _a : {
+        xMin: 0,
+        width: frame.width
+      },
+      xMin = _b.xMin,
+      width = _b.width;
+    var desiredWidth = frame.height * 0.6;
+    var faceCenterX = xMin + width / 2;
+    var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
+    cropCanvas.width = desiredWidth;
+    cropCanvas.height = frame.height;
+    cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
+  }
+  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, padding) {
+  if (padding === void 0) {
+    padding = 0;
+  }
+  canvas || (canvas = document.createElement('canvas'));
+  var ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('could not get 2d context');
+  var xMin = box.xMin,
+    yMin = box.yMin,
+    width = box.width,
+    height = box.height;
+  canvas.width = width + padding * 2;
+  canvas.height = height + padding * 2;
+  ctx.drawImage(frame, xMin - padding, yMin - padding, width + padding * 2, height + padding * 2, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+function cropAndRotateIfNecessary(imageData, cropCanvas, rotateCanvas, box, padding) {
+  if (padding === void 0) {
+    padding = 0;
+  }
+  if (!box) return imageData;
+  var cropped = cropToDetectedObjectBox(imageData, box, cropCanvas, padding);
+  var _a = [box.width, box.height],
+    bw = _a[0],
+    bh = _a[1];
+  if (bh <= bw) return cropped;
+  var ctx = rotateCanvas.getContext('2d');
+  if (!ctx) return cropped;
+  rotateCanvas.width = bh;
+  rotateCanvas.height = bw;
+  ctx.clearRect(0, 0, rotateCanvas.width, rotateCanvas.height);
+  ctx.translate(rotateCanvas.width / 2, rotateCanvas.height / 2);
+  ctx.rotate(1.5708); // 90 deg in radians
+  ctx.drawImage(cropped, -bw / 2, -bh / 2);
+  return rotateCanvas;
+}
+function resizeIfNecessary(imageData, resizeCanvas, maxWidth) {
+  var width = imageData.width,
+    height = imageData.height;
+  if (width <= maxWidth) return imageData;
+  var resizeCtx = resizeCanvas.getContext('2d');
+  if (!resizeCtx) return imageData;
+  var scale = maxWidth / width;
+  resizeCanvas.width = maxWidth;
+  resizeCanvas.height = height * scale;
+  resizeCtx.drawImage(imageData, 0, 0, resizeCanvas.width, resizeCanvas.height);
+  return resizeCanvas;
 }
-var templateObject_1$M, templateObject_2$F;
 
-var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
-  startDocumentDetection: function startDocumentDetection() {
-    return null;
-  },
-  stopDocumentDetection: function stopDocumentDetection() {
-    return null;
-  },
-  loadDocumentDetectionModel: function loadDocumentDetectionModel() {
-    return null;
-  },
-  documentDetectionModelState: 'not-started',
-  documentDetectionModelDownloadProgress: 0,
-  documentDetectionModelWarmingStartedAt: null,
-  documentDetectionModelError: null,
-  onDocumentDetected: function onDocumentDetected() {
-    return null;
-  },
-  detectionTime: 0,
-  documentDetectionThresholds: {},
-  setDocumentDetectionThresholds: function setDocumentDetectionThresholds() {
-    return null;
+var defaultFocusModelLoadTimeoutMs = 45000;
+var defaultFocusThresholds = {
+  idCardFront: {
+    desktop: 0,
+    mobile: 0.3
   },
-  documentDetectionBoundaries: defaultDocumentDetectionBoundaries,
-  setDocumentDetectionBoundaries: function setDocumentDetectionBoundaries() {
-    return null;
+  idCardBack: {
+    desktop: 0,
+    mobile: 0.3
   },
-  documentDetectionLastPredictionCanvas: {
-    current: null
+  passport: {
+    desktop: 0,
+    mobile: 0.3
   },
-  clearDocumentDetectionLastPredictionCanvas: function clearDocumentDetectionLastPredictionCanvas() {
-    return null;
+  singlePage: {
+    desktop: 0,
+    mobile: 0.3
   }
-});
-function DocumentDetectionModelProvider(_a) {
-  var _this = this;
-  var _b = _a.autoStart,
-    autoStart = _b === void 0 ? true : _b,
-    children = _a.children,
-    _c = _a.throttleMs,
-    throttleMs = _c === void 0 ? 16 : _c,
-    _d = _a.delayAfterStartMs,
-    delayAfterStartMs = _d === void 0 ? 0 : _d,
-    _e = _a.documentDetectionModelPath,
-    documentDetectionModelPath = _e === void 0 ? defaultDocumentDetectorModelPath : _e,
-    _f = _a.documentDetectionModelScoreThreshold,
-    documentDetectionModelScoreThreshold = _f === void 0 ? defaultDocumentDetectionScoreThreshold : _f,
-    _g = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _g === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _g,
-    onDocumentDetectionModelError = _a.onDocumentDetectionModelError,
-    _h = _a.shouldLoadModels,
-    shouldLoadModelsProp = _h === void 0 ? true : _h;
-  var _j = useCameraStore(),
-    videoRef = _j.videoRef,
-    videoLoaded = _j.videoLoaded,
-    cameraReady = _j.cameraReady;
-  var lastPredictionCanvas = React.useRef(null);
-  var onPredictionHandler = React.useRef();
-  var _k = React.useState({}),
-    documentDetectionThresholds = _k[0],
-    setDocumentDetectionThresholds = _k[1];
-  var _l = React.useState(defaultDocumentDetectionBoundaries),
-    documentDetectionBoundaries = _l[0],
-    setDocumentDetectionBoundaries = _l[1];
-  var _m = React.useState(0),
-    timesAllZero = _m[0],
-    setTimesAllZero = _m[1];
-  var _o = React.useState(0),
-    canvasKey = _o[0],
-    setCanvasKey = _o[1];
-  var stopDetection = React.useRef(0);
-  var _p = React.useState(shouldLoadModelsProp),
-    shouldLoadModels = _p[0],
-    setShouldLoadModels = _p[1];
+};
+var classifier$1 = null;
+var classifierSettings$1 = null;
+function loadFocusModel() {
+  return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+    var _a, _b;
+    if (modelAssetPath === void 0) {
+      modelAssetPath = defaultFocusModelPath;
+    }
+    return __generator(this, function (_c) {
+      switch (_c.label) {
+        case 0:
+          if (classifier$1 && (classifierSettings$1 === null || classifierSettings$1 === void 0 ? void 0 : classifierSettings$1.modelAssetPath) === modelAssetPath) return [2 /*return*/, classifier$1];
+          closeFocusModel();
+          return [4 /*yield*/, preloadFocusModelDependencies()];
+        case 1:
+          _c.sent();
+          if (modelCapabilities.delegate === 'NONE') {
+            throw new Error('No available delegate for focus detector.');
+          }
+          _b = (_a = tasksVision.ImageClassifier).createFromOptions;
+          return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
+        case 2:
+          return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
+            baseOptions: {
+              modelAssetPath: modelAssetPath,
+              delegate: modelCapabilities.delegate
+            },
+            // canvas: document.createElement('canvas'),
+            runningMode: 'VIDEO'
+          }])];
+        case 3:
+          classifier$1 = _c.sent();
+          classifierSettings$1 = {
+            modelAssetPath: modelAssetPath
+          };
+          return [2 /*return*/, classifier$1];
+      }
+    });
+  });
+}
+function closeFocusModel() {
+  classifier$1 === null || classifier$1 === void 0 ? void 0 : classifier$1.close();
+  classifier$1 = null;
+  classifierSettings$1 = null;
+}
+function useLoadFocusModel(_a) {
+  var _b = _a.modelPath,
+    modelPath = _b === void 0 ? defaultFocusModelPath : _b,
+    _c = _a.modelLoadTimeoutMs,
+    modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
+    onModelError = _a.onModelError,
+    videoRef = _a.videoRef,
+    _d = _a.shouldLoadModels,
+    shouldLoadModels = _d === void 0 ? true : _d;
+  var _e = React.useState('not-started'),
+    modelLoadState = _e[0],
+    setModelLoadState = _e[1];
+  var _f = React.useState(0),
+    modelDownloadProgress = _f[0],
+    setModelDownloadProgress = _f[1];
+  var _g = React.useState(null),
+    modelWarmingStartedAt = _g[0],
+    setModelWarmingStartedAt = _g[1];
+  var _h = React.useState(null),
+    modelError = _h[0],
+    setModelError = _h[1];
+  React.useEffect(function loadModel() {
+    var _this = this;
+    if (!shouldLoadModels) return;
+    setModelLoadState('downloading');
+    setModelWarmingStartedAt(null);
+    function handleDownloadProgress(event) {
+      setModelDownloadProgress(progressToPercentage(event.detail));
+    }
+    document.addEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
+    var modelLoadTimeout = setTimeout(function () {
+      setModelError(new Error('Model loading time limit exceeded.'));
+    }, modelLoadTimeoutMs);
+    var cancelVideoReady = function cancelVideoReady() {};
+    loadFocusModel(modelPath).then(function (loadedModel) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, videoReady, cancel, cancelled;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              setModelDownloadProgress(100);
+              clearTimeout(modelLoadTimeout);
+              setModelLoadState('warming');
+              setModelWarmingStartedAt(performance.now());
+              _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
+              cancelled = false;
+              cancelVideoReady = function cancelVideoReady() {
+                cancelled = true;
+                cancel();
+              };
+              return [4 /*yield*/, videoReady];
+            case 1:
+              _b.sent();
+              setTimeout(function () {
+                if (cancelled) return;
+                loadedModel.classifyForVideo(videoRef.current, performance.now());
+                setModelLoadState('ready');
+              }, 500);
+              return [2 /*return*/];
+          }
+        });
+      });
+    })["catch"](function (e) {
+      setModelError(e);
+      setModelLoadState('error');
+    })["finally"](function () {
+      clearTimeout(modelLoadTimeout);
+    });
+    return function () {
+      log('unloading focus model');
+      cancelVideoReady();
+      closeFocusModel();
+      clearTimeout(modelLoadTimeout);
+      document.removeEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
+    };
+  }, [modelPath, modelLoadTimeoutMs, videoRef, shouldLoadModels]);
+  React.useEffect(function handleModelError() {
+    if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
+  }, [modelError, onModelError]);
+  return React.useMemo(function () {
+    return {
+      ready: modelLoadState === 'ready',
+      modelLoadState: modelLoadState,
+      modelDownloadProgress: modelDownloadProgress,
+      modelWarmingStartedAt: modelWarmingStartedAt,
+      modelError: modelError
+    };
+  }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
+}
+var lastFocusPredictionAt = 0;
+var lastFocusPredictionTime = 0;
+function setLastFocusPredictionAt(time) {
+  lastFocusPredictionTime = time - lastFocusPredictionAt;
+  lastFocusPredictionAt = time;
+}
+function makeFocusModelPrediction(imageData, cropCanvas, rotateCanvas, box) {
+  var _a, _b, _c, _d, _e;
+  if (!classifier$1) return null;
+  var startedAt = performance.now();
+  var image = cropAndRotateIfNecessary(imageData, cropCanvas, rotateCanvas, box);
+  var result = classifier$1.classifyForVideo(image, performance.now());
+  var score = (_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.classifications) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.find(function (c) {
+    return c.categoryName === 'focused';
+  })) === null || _d === void 0 ? void 0 : _d.score) !== null && _e !== void 0 ? _e : 0;
+  var predictionTime = performance.now() - startedAt;
+  return {
+    score: score,
+    predictionTime: predictionTime
+  };
+}
+
+var FocusModelContext = /*#__PURE__*/React.createContext({
+  loadFocusModel: function loadFocusModel() {
+    return null;
+  },
+  focusModelState: 'not-started',
+  focusModelDownloadProgress: 0,
+  focusModelWarmingStartedAt: null,
+  focusModelError: null,
+  focusThresholds: {},
+  setFocusThresholds: function setFocusThresholds() {
+    return null;
+  },
+  makeFocusPrediction: function makeFocusPrediction() {
+    return null;
+  },
+  focusPredictionTime: 0
+});
+function FocusModelProvider(_a) {
+  var children = _a.children,
+    _b = _a.focusModelPath,
+    focusModelPath = _b === void 0 ? defaultFocusModelPath : _b,
+    _c = _a.focusModelLoadTimeoutMs,
+    focusModelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
+    onFocusModelError = _a.onFocusModelError,
+    _d = _a.showCanvases,
+    showCanvases = _d === void 0 ? false : _d,
+    _e = _a.shouldLoadModels,
+    shouldLoadModelsProp = _e === void 0 ? true : _e;
+  var cropCanvas = React.useRef(null);
+  var rotateCanvas = React.useRef(null);
+  var _f = React.useState({}),
+    focusThresholds = _f[0],
+    setFocusThresholds = _f[1];
+  var videoRef = useCameraStore().videoRef;
+  var _g = React.useState(shouldLoadModelsProp),
+    shouldLoadModels = _g[0],
+    setShouldLoadModels = _g[1];
   var load = React.useCallback(function () {
     return setShouldLoadModels(true);
   }, []);
-  var _q = useLoadDocumentDetector({
-      modelPath: documentDetectionModelPath,
-      modelLoadTimeoutMs: modelLoadTimeoutMs,
-      scoreThreshold: documentDetectionModelScoreThreshold,
-      onModelError: onDocumentDetectionModelError,
+  var _h = useLoadFocusModel({
+      modelPath: focusModelPath,
+      modelLoadTimeoutMs: focusModelLoadTimeoutMs,
+      onModelError: onFocusModelError,
       videoRef: videoRef,
       shouldLoadModels: shouldLoadModels
     }),
-    ready = _q.ready,
-    modelLoadState = _q.modelLoadState,
-    modelDownloadProgress = _q.modelDownloadProgress,
-    modelWarmingStartedAt = _q.modelWarmingStartedAt,
-    modelError = _q.modelError,
-    setModelError = _q.setModelError;
-  var _r = useFrameLoop(React.useCallback(function (frameId, timeRunning) {
+    ready = _h.ready,
+    modelLoadState = _h.modelLoadState,
+    modelDownloadProgress = _h.modelDownloadProgress,
+    modelWarmingStartedAt = _h.modelWarmingStartedAt,
+    modelError = _h.modelError;
+  var makeFocusPrediction = React.useCallback(function (imageData, box) {
+    if (!ready) return null;
+    var prediction = makeFocusModelPrediction(imageData, cropCanvas.current, rotateCanvas.current, box);
+    if (!prediction) return null;
+    setLastFocusPredictionAt(prediction.predictionTime);
+    return prediction;
+  }, [ready]);
+  var value = React.useMemo(function () {
+    return {
+      loadFocusModel: load,
+      focusModelState: modelLoadState,
+      focusModelDownloadProgress: modelDownloadProgress,
+      focusModelWarmingStartedAt: modelWarmingStartedAt,
+      focusModelError: modelError,
+      makeFocusPrediction: makeFocusPrediction,
+      focusPredictionTime: lastFocusPredictionTime,
+      focusThresholds: focusThresholds,
+      setFocusThresholds: setFocusThresholds
+    };
+  }, [focusThresholds, load, makeFocusPrediction, modelDownloadProgress, modelError, modelLoadState, modelWarmingStartedAt]);
+  return /*#__PURE__*/React__namespace.default.createElement(FocusModelContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    ref: rotateCanvas,
+    style: showCanvases ? {
+      display: 'block'
+    } : undefined
+  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    ref: cropCanvas,
+    style: showCanvases ? {
+      display: 'block'
+    } : undefined
+  })), children);
+}
+
+function _isNavigatorDefined() {
+  return typeof navigator !== 'undefined' && navigator != null;
+}
+var isMobileCache;
+function isMobile() {
+  if (isMobileCache !== undefined) return isMobileCache;
+  isMobileCache = evaluateIsMobile();
+  return isMobileCache;
+}
+function evaluateIsMobile(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) || /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 defaultBarcodeReadabilityModelLoadTimeoutMs = 45000;
+var classifier = null;
+var classifierSettings = null;
+function loadBarcodeReadabilityModel() {
+  return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+    var _a, _b;
+    if (modelAssetPath === void 0) {
+      modelAssetPath = defaultBarcodeReadabilityModelPath;
+    }
+    return __generator(this, function (_c) {
+      switch (_c.label) {
+        case 0:
+          if (classifier && (classifierSettings === null || classifierSettings === void 0 ? void 0 : classifierSettings.modelAssetPath) === modelAssetPath) return [2 /*return*/, classifier];
+          closeBarcodeReadabilityModel();
+          return [4 /*yield*/, preloadBarcodeReadabilityModelDependencies()];
+        case 1:
+          _c.sent();
+          if (modelCapabilities.delegate === 'NONE') {
+            throw new Error('No available delegate for barcode readability model.');
+          }
+          _b = (_a = tasksVision.ImageClassifier).createFromOptions;
+          return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
+        case 2:
+          return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
+            baseOptions: {
+              modelAssetPath: modelAssetPath,
+              delegate: 'CPU'
+            },
+            runningMode: 'VIDEO',
+            maxResults: 1
+          }])];
+        case 3:
+          classifier = _c.sent();
+          classifierSettings = {
+            modelAssetPath: modelAssetPath
+          };
+          return [2 /*return*/, classifier];
+      }
+    });
+  });
+}
+function closeBarcodeReadabilityModel() {
+  classifier === null || classifier === void 0 ? void 0 : classifier.close();
+  classifier = null;
+  classifierSettings = null;
+}
+function useLoadBarcodeReadabilityModel(_a) {
+  var _b = _a.modelPath,
+    modelPath = _b === void 0 ? defaultBarcodeReadabilityModelPath : _b,
+    _c = _a.modelLoadTimeoutMs,
+    modelLoadTimeoutMs = _c === void 0 ? defaultBarcodeReadabilityModelLoadTimeoutMs : _c,
+    onModelError = _a.onModelError,
+    videoRef = _a.videoRef,
+    _d = _a.shouldLoadModels,
+    shouldLoadModels = _d === void 0 ? true : _d;
+  var _e = React.useState('not-started'),
+    modelLoadState = _e[0],
+    setModelLoadState = _e[1];
+  var _f = React.useState(0),
+    modelDownloadProgress = _f[0],
+    setModelDownloadProgress = _f[1];
+  var _g = React.useState(null),
+    modelWarmingStartedAt = _g[0],
+    setModelWarmingStartedAt = _g[1];
+  var _h = React.useState(null),
+    modelError = _h[0],
+    setModelError = _h[1];
+  React.useEffect(function loadModel() {
+    var _this = this;
+    if (!shouldLoadModels) return;
+    setModelLoadState('downloading');
+    setModelWarmingStartedAt(null);
+    function handleDownloadProgress(event) {
+      setModelDownloadProgress(progressToPercentage(event.detail));
+    }
+    document.addEventListener('idmission.preloadProgress.barcodeReadability', handleDownloadProgress);
+    var modelLoadTimeout = setTimeout(function () {
+      setModelError(new Error('Model loading time limit exceeded.'));
+    }, modelLoadTimeoutMs);
+    var cancelVideoReady = function cancelVideoReady() {};
+    loadBarcodeReadabilityModel(modelPath).then(function (loadedModel) {
       return __awaiter(_this, void 0, void 0, function () {
-        var stopDetectionAtStart, vw, vh, ctx, prediction, processedPrediction;
-        var _a;
+        var _a, videoReady, cancel, cancelled;
         return __generator(this, function (_b) {
           switch (_b.label) {
             case 0:
-              if (!videoLoaded || !cameraReady || !ready || !videoRef.current || !lastPredictionCanvas.current) return [2 /*return*/];
-              stopDetectionAtStart = stopDetection.current;
-              vw = videoRef.current.videoWidth;
-              vh = videoRef.current.videoHeight;
-              lastPredictionCanvas.current.width = vw;
-              lastPredictionCanvas.current.height = vh;
-              ctx = lastPredictionCanvas.current.getContext('2d');
-              if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 3];
-              if (stopDetectionAtStart !== stopDetection.current) return [2 /*return*/];
-              ctx.drawImage(videoRef.current, 0, 0, vw, vh);
-              return [4 /*yield*/, makeDocumentDetectorPrediction(lastPredictionCanvas.current)];
+              setModelDownloadProgress(100);
+              clearTimeout(modelLoadTimeout);
+              setModelLoadState('warming');
+              setModelWarmingStartedAt(new Date().getTime());
+              _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
+              cancelled = false;
+              cancelVideoReady = function cancelVideoReady() {
+                cancelled = true;
+                cancel();
+              };
+              return [4 /*yield*/, videoReady];
             case 1:
-              prediction = _b.sent();
-              if (!prediction) return [3 /*break*/, 3];
-              processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds, documentDetectionBoundaries);
-              processedPrediction.frameId = frameId;
-              setLastDetectionAt(new Date().getTime());
-              debug(processedPrediction);
-              if (processedPrediction.allZero) setTimesAllZero(function (n) {
-                return n + 1;
-              });
-              if (stopDetectionAtStart !== stopDetection.current) return [2 /*return*/];
-              if (timeRunning < delayAfterStartMs) return [2 /*return*/];
-              return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, processedPrediction)];
-            case 2:
               _b.sent();
-              _b.label = 3;
-            case 3:
-              return [2 /*return*/];
-          }
-        });
-      });
-    }, [cameraReady, delayAfterStartMs, documentDetectionBoundaries, documentDetectionThresholds, ready, videoLoaded, videoRef]), {
-      throttleMs: throttleMs,
-      autoStart: autoStart
-    }),
-    start = _r.start,
-    stop = _r.stop;
-  React.useEffect(function setErrorIfAllZero() {
-    if (timesAllZero >= 2) {
-      setModelError(new Error('model is returning all zeroes'));
-    }
-  }, [setModelError, timesAllZero]);
-  var onDocumentDetected = React.useCallback(function (handler) {
-    onPredictionHandler.current = handler;
-  }, []);
-  var clearDocumentDetectionLastPredictionCanvas = React.useCallback(function () {
-    stopDetection.current += 1;
-    setCanvasKey(function (n) {
-      return n + 1;
+              setTimeout(function () {
+                if (cancelled) return;
+                loadedModel.classifyForVideo(videoRef.current, performance.now());
+                setModelLoadState('ready');
+              }, 500);
+              return [2 /*return*/];
+          }
+        });
+      });
+    })["catch"](function (e) {
+      setModelError(e);
+      setModelLoadState('error');
+    })["finally"](function () {
+      clearTimeout(modelLoadTimeout);
     });
-  }, []);
-  var value = React.useMemo(function () {
+    return function () {
+      log('unloading barcode readability model');
+      cancelVideoReady();
+      closeBarcodeReadabilityModel();
+      clearTimeout(modelLoadTimeout);
+      document.removeEventListener('idmission.preloadProgress.barcodeReadability', handleDownloadProgress);
+    };
+  }, [modelPath, modelLoadTimeoutMs, videoRef, shouldLoadModels]);
+  React.useEffect(function handleModelError() {
+    if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
+  }, [modelError, onModelError]);
+  return React.useMemo(function () {
     return {
-      startDocumentDetection: start,
-      stopDocumentDetection: stop,
-      loadDocumentDetectionModel: load,
-      documentDetectionModelState: modelLoadState,
-      documentDetectionModelWarmingStartedAt: modelWarmingStartedAt,
-      documentDetectionModelError: modelError,
-      documentDetectionModelDownloadProgress: modelDownloadProgress,
-      onDocumentDetected: onDocumentDetected,
-      detectionTime: lastDetectionTime,
-      documentDetectionThresholds: documentDetectionThresholds,
-      setDocumentDetectionThresholds: setDocumentDetectionThresholds,
-      documentDetectionBoundaries: documentDetectionBoundaries,
-      setDocumentDetectionBoundaries: setDocumentDetectionBoundaries,
-      documentDetectionLastPredictionCanvas: lastPredictionCanvas,
-      clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
+      ready: modelLoadState === 'ready',
+      modelLoadState: modelLoadState,
+      modelDownloadProgress: modelDownloadProgress,
+      modelWarmingStartedAt: modelWarmingStartedAt,
+      modelError: modelError
     };
-  }, [start, stop, load, modelLoadState, modelWarmingStartedAt, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
-  return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
-    key: canvasKey,
-    ref: lastPredictionCanvas
-  }), children);
+  }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
+}
+var lastBarcodeReadabilityPredictionAt = 0;
+var lastBarcodeReadabilityPredictionTime = 0;
+function setLastBarcodeReadabilityPredictionAt(time) {
+  lastBarcodeReadabilityPredictionTime = time - lastBarcodeReadabilityPredictionAt;
+  lastBarcodeReadabilityPredictionAt = time;
+}
+function makeBarcodeReadabilityModelPrediction(imageData, cropCanvas, rotateCanvas, resizeCanvas, box) {
+  var _a, _b, _c, _d, _e;
+  if (!classifier) return null;
+  var startedAt = performance.now();
+  var image = cropAndRotateIfNecessary(imageData, cropCanvas, rotateCanvas, box);
+  var resized = resizeIfNecessary(image, resizeCanvas, 500);
+  var result = classifier.classifyForVideo(resized, performance.now());
+  var score = (_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.classifications) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.find(function (c) {
+    return c.categoryName === 'blurry';
+  })) === null || _d === void 0 ? void 0 : _d.score) !== null && _e !== void 0 ? _e : 0;
+  debug('barcode prediction', "".concat(performance.now() - startedAt, "ms"), score);
+  var predictionTime = performance.now() - startedAt;
+  return {
+    score: score,
+    predictionTime: predictionTime
+  };
 }
 
-var FocusModelContext = /*#__PURE__*/React.createContext({
-  loadFocusModel: function loadFocusModel() {
+var BarcodeReadabilityModelContext = /*#__PURE__*/React.createContext({
+  loadBarcodeReadabilityModel: function loadBarcodeReadabilityModel() {
     return null;
   },
-  focusModelState: 'not-started',
-  focusModelDownloadProgress: 0,
-  focusModelWarmingStartedAt: null,
-  focusModelError: null,
-  focusThresholds: {},
-  setFocusThresholds: function setFocusThresholds() {
+  barcodeReadabilityModelState: 'not-started',
+  barcodeReadabilityModelDownloadProgress: 0,
+  barcodeReadabilityModelWarmingStartedAt: null,
+  barcodeReadabilityModelError: null,
+  barcodeReadabilityThresholds: {},
+  setBarcodeReadabilityThresholds: function setBarcodeReadabilityThresholds() {
     return null;
   },
-  makeFocusPrediction: function makeFocusPrediction() {
+  makeBarcodeReadabilityPrediction: function makeBarcodeReadabilityPrediction() {
     return null;
   },
-  focusPredictionTime: 0
+  barcodeReadabilityPredictionTime: 0
 });
-function FocusModelProvider(_a) {
+function BarcodeReadabilityModelProvider(_a) {
   var children = _a.children,
-    _b = _a.focusModelPath,
-    focusModelPath = _b === void 0 ? defaultFocusModelPath : _b,
-    _c = _a.focusModelLoadTimeoutMs,
-    focusModelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
-    onFocusModelError = _a.onFocusModelError,
+    _b = _a.barcodeReadabilityModelPath,
+    barcodeReadabilityModelPath = _b === void 0 ? defaultBarcodeReadabilityModelPath : _b,
+    _c = _a.barcodeReadabilityModelLoadTimeoutMs,
+    barcodeReadabilityModelLoadTimeoutMs = _c === void 0 ? defaultBarcodeReadabilityModelLoadTimeoutMs : _c,
+    onBarcodeReadabilityModelError = _a.onBarcodeReadabilityModelError,
     _d = _a.showCanvases,
     showCanvases = _d === void 0 ? false : _d,
     _e = _a.shouldLoadModels,
     shouldLoadModelsProp = _e === void 0 ? true : _e;
   var cropCanvas = React.useRef(null);
   var rotateCanvas = React.useRef(null);
+  var resizeCanvas = React.useRef(null);
   var _f = React.useState({}),
-    focusThresholds = _f[0],
-    setFocusThresholds = _f[1];
+    barcodeReadabilityThresholds = _f[0],
+    setBarcodeReadabilityThresholds = _f[1];
   var videoRef = useCameraStore().videoRef;
   var _g = React.useState(shouldLoadModelsProp),
     shouldLoadModels = _g[0],
@@ -5568,10 +5559,10 @@ function FocusModelProvider(_a) {
   var load = React.useCallback(function () {
     return setShouldLoadModels(true);
   }, []);
-  var _h = useLoadFocusModel({
-      modelPath: focusModelPath,
-      modelLoadTimeoutMs: focusModelLoadTimeoutMs,
-      onModelError: onFocusModelError,
+  var _h = useLoadBarcodeReadabilityModel({
+      modelPath: barcodeReadabilityModelPath,
+      modelLoadTimeoutMs: barcodeReadabilityModelLoadTimeoutMs,
+      onModelError: onBarcodeReadabilityModelError,
       videoRef: videoRef,
       shouldLoadModels: shouldLoadModels
     }),
@@ -5580,71 +5571,45 @@ function FocusModelProvider(_a) {
     modelDownloadProgress = _h.modelDownloadProgress,
     modelWarmingStartedAt = _h.modelWarmingStartedAt,
     modelError = _h.modelError;
-  var makeFocusPrediction = React.useCallback(function (imageData, box) {
+  var makeBarcodeReadabilityPrediction = React.useCallback(function (imageData, box) {
     if (!ready) return null;
-    var prediction = makeFocusModelPrediction(imageData, cropCanvas.current, rotateCanvas.current, box);
+    var prediction = makeBarcodeReadabilityModelPrediction(imageData, cropCanvas.current, rotateCanvas.current, resizeCanvas.current, box);
     if (!prediction) return null;
-    setLastFocusPredictionAt(prediction.predictionTime);
+    setLastBarcodeReadabilityPredictionAt(prediction.predictionTime);
     return prediction;
   }, [ready]);
   var value = React.useMemo(function () {
     return {
-      loadFocusModel: load,
-      focusModelState: modelLoadState,
-      focusModelDownloadProgress: modelDownloadProgress,
-      focusModelWarmingStartedAt: modelWarmingStartedAt,
-      focusModelError: modelError,
-      makeFocusPrediction: makeFocusPrediction,
-      focusPredictionTime: lastFocusPredictionTime,
-      focusThresholds: focusThresholds,
-      setFocusThresholds: setFocusThresholds
+      loadBarcodeReadabilityModel: load,
+      barcodeReadabilityModelState: modelLoadState,
+      barcodeReadabilityModelDownloadProgress: modelDownloadProgress,
+      barcodeReadabilityModelWarmingStartedAt: modelWarmingStartedAt,
+      barcodeReadabilityModelError: modelError,
+      makeBarcodeReadabilityPrediction: makeBarcodeReadabilityPrediction,
+      barcodeReadabilityPredictionTime: lastBarcodeReadabilityPredictionTime,
+      barcodeReadabilityThresholds: barcodeReadabilityThresholds,
+      setBarcodeReadabilityThresholds: setBarcodeReadabilityThresholds
     };
-  }, [focusThresholds, load, makeFocusPrediction, modelDownloadProgress, modelError, modelLoadState, modelWarmingStartedAt]);
-  return /*#__PURE__*/React__namespace.default.createElement(FocusModelContext.Provider, {
+  }, [barcodeReadabilityThresholds, load, makeBarcodeReadabilityPrediction, modelDownloadProgress, modelError, modelLoadState, modelWarmingStartedAt]);
+  return /*#__PURE__*/React__namespace.default.createElement(BarcodeReadabilityModelContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
-    ref: rotateCanvas,
-    style: showCanvases ? {
-      display: 'block'
-    } : undefined
+  }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    ref: rotateCanvas
   }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
-    ref: cropCanvas,
+    ref: cropCanvas
+  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    ref: resizeCanvas,
     style: showCanvases ? {
       display: 'block'
     } : undefined
-  }), children);
-}
-
-function _isNavigatorDefined() {
-  return typeof navigator !== 'undefined' && navigator != null;
+  })), children);
 }
-var isMobileCache;
-function isMobile() {
-  if (isMobileCache !== undefined) return isMobileCache;
-  isMobileCache = evaluateIsMobile();
-  return isMobileCache;
-}
-function evaluateIsMobile(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) || /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 useBarcodeReadabilityModelContext() {
+  var context = React.useContext(BarcodeReadabilityModelContext);
+  if (!context) {
+    throw new Error('useBarcodeReadabilityModelContext must be used within an BarcodeReadabilityModelProvider');
   }
-  return false;
+  return context;
 }
 
 var onMobile = isMobile();
@@ -5680,6 +5645,7 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   },
   detectionTime: 0,
   focusPredictionTime: 0,
+  barcodeReadabilityPredictionTime: 0,
   bestFrameDetails: {
     current: null
   },
@@ -5689,55 +5655,78 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   resetBestFrame: function resetBestFrame() {
     return null;
   },
+  bestBarcodeDetails: {
+    current: null
+  },
+  getBestBarcode: function getBestBarcode() {
+    return null;
+  },
   requiredDocumentType: 'none',
   setRequiredDocumentType: function setRequiredDocumentType() {
     return null;
   }
 });
 function IdCaptureModelsProviderInner(_a) {
+  var _b;
   var children = _a.children,
     onModelError = _a.onModelError,
-    _b = _a.allowSinglePageIdCapture,
-    allowSinglePageIdCapture = _b === void 0 ? false : _b;
-  var _c = React.useContext(DocumentDetectionModelContext),
-    documentDetectionModelState = _c.documentDetectionModelState,
-    documentDetectionModelDownloadProgress = _c.documentDetectionModelDownloadProgress,
-    documentDetectionModelWarmingStartedAt = _c.documentDetectionModelWarmingStartedAt,
-    startDocumentDetection = _c.startDocumentDetection,
-    stopDocumentDetection = _c.stopDocumentDetection,
-    loadDocumentDetectionModel = _c.loadDocumentDetectionModel,
-    lastPredictionCanvas = _c.documentDetectionLastPredictionCanvas,
-    clearDocumentDetectionLastPredictionCanvas = _c.clearDocumentDetectionLastPredictionCanvas,
-    onDocumentDetected = _c.onDocumentDetected,
-    detectionTime = _c.detectionTime,
-    documentDetectionThresholds = _c.documentDetectionThresholds,
-    setDocumentDetectionThresholds = _c.setDocumentDetectionThresholds,
-    documentDetectionBoundaries = _c.documentDetectionBoundaries,
-    setDocumentDetectionBoundaries = _c.setDocumentDetectionBoundaries,
-    documentDetectionModelError = _c.documentDetectionModelError;
-  var _d = React.useContext(FocusModelContext),
-    loadFocusModel = _d.loadFocusModel,
-    focusModelState = _d.focusModelState,
-    focusModelDownloadProgress = _d.focusModelDownloadProgress,
-    focusModelWarmingStartedAt = _d.focusModelWarmingStartedAt,
-    makeFocusPrediction = _d.makeFocusPrediction,
-    focusThresholds = _d.focusThresholds,
-    setFocusThresholds = _d.setFocusThresholds,
-    focusPredictionTime = _d.focusPredictionTime,
-    focusModelError = _d.focusModelError;
+    _c = _a.allowSinglePageIdCapture,
+    allowSinglePageIdCapture = _c === void 0 ? false : _c,
+    _d = _a.enableBarcodeReadabilityModel,
+    enableBarcodeReadabilityModel = _d === void 0 ? true : _d;
+  var _e = React.useContext(DocumentDetectionModelContext),
+    documentDetectionModelState = _e.documentDetectionModelState,
+    documentDetectionModelDownloadProgress = _e.documentDetectionModelDownloadProgress,
+    documentDetectionModelWarmingStartedAt = _e.documentDetectionModelWarmingStartedAt,
+    startDocumentDetection = _e.startDocumentDetection,
+    stopDocumentDetection = _e.stopDocumentDetection,
+    loadDocumentDetectionModel = _e.loadDocumentDetectionModel,
+    lastPredictionCanvas = _e.documentDetectionLastPredictionCanvas,
+    clearDocumentDetectionLastPredictionCanvas = _e.clearDocumentDetectionLastPredictionCanvas,
+    onDocumentDetected = _e.onDocumentDetected,
+    detectionTime = _e.detectionTime,
+    documentDetectionThresholds = _e.documentDetectionThresholds,
+    setDocumentDetectionThresholds = _e.setDocumentDetectionThresholds,
+    documentDetectionBoundaries = _e.documentDetectionBoundaries,
+    setDocumentDetectionBoundaries = _e.setDocumentDetectionBoundaries,
+    documentDetectionModelError = _e.documentDetectionModelError;
+  var _f = React.useContext(FocusModelContext),
+    loadFocusModel = _f.loadFocusModel,
+    focusModelState = _f.focusModelState,
+    focusModelDownloadProgress = _f.focusModelDownloadProgress,
+    focusModelWarmingStartedAt = _f.focusModelWarmingStartedAt,
+    makeFocusPrediction = _f.makeFocusPrediction,
+    focusThresholds = _f.focusThresholds,
+    setFocusThresholds = _f.setFocusThresholds,
+    focusPredictionTime = _f.focusPredictionTime,
+    focusModelError = _f.focusModelError;
+  var _g = useBarcodeReadabilityModelContext(),
+    loadBarcodeReadabilityModel = _g.loadBarcodeReadabilityModel,
+    barcodeReadabilityModelState = _g.barcodeReadabilityModelState,
+    barcodeReadabilityModelDownloadProgress = _g.barcodeReadabilityModelDownloadProgress,
+    barcodeReadabilityModelWarmingStartedAt = _g.barcodeReadabilityModelWarmingStartedAt,
+    makeBarcodeReadabilityPrediction = _g.makeBarcodeReadabilityPrediction,
+    barcodeReadabilityThresholds = _g.barcodeReadabilityThresholds,
+    setBarcodeReadabilityThresholds = _g.setBarcodeReadabilityThresholds,
+    barcodeReadabilityPredictionTime = _g.barcodeReadabilityPredictionTime,
+    barcodeReadabilityModelError = _g.barcodeReadabilityModelError;
   var onPredictionHandler = React.useRef();
   var bestFrameDetails = React.useRef(null);
+  var bestBarcodeDetails = React.useRef(null);
   var bestPredictionCanvas = React.useRef(null);
+  var bestBarcodeCanvas = React.useRef(null);
   var bestFocusScore = React.useRef(0);
+  var bestBarcodeScore = React.useRef(0);
   var stopDetection = React.useRef(0);
-  var _e = React.useState('none'),
-    requiredDocumentType = _e[0],
-    setRequiredDocumentType = _e[1];
+  var _h = React.useState('none'),
+    requiredDocumentType = _h[0],
+    setRequiredDocumentType = _h[1];
   var thresholds = React.useMemo(function () {
     return _assign(_assign({}, documentDetectionThresholds), {
-      focus: focusThresholds
+      focus: focusThresholds,
+      barcodeReadability: barcodeReadabilityThresholds
     });
-  }, [documentDetectionThresholds, focusThresholds]);
+  }, [documentDetectionThresholds, focusThresholds, barcodeReadabilityThresholds]);
   var setThresholds = React.useCallback(function (thresholds) {
     if (thresholds.detection) {
       setDocumentDetectionThresholds(thresholds.detection);
@@ -5745,17 +5734,20 @@ function IdCaptureModelsProviderInner(_a) {
     if (thresholds.focus) {
       setFocusThresholds(thresholds.focus);
     }
-  }, [setDocumentDetectionThresholds, setFocusThresholds]);
+    if (thresholds.barcodeReadability) {
+      setBarcodeReadabilityThresholds(thresholds.barcodeReadability);
+    }
+  }, [setBarcodeReadabilityThresholds, setDocumentDetectionThresholds, setFocusThresholds]);
   React.useEffect(function handleDetections() {
     var _this = this;
     onDocumentDetected(function (prediction) {
       return __awaiter(_this, void 0, void 0, function () {
-        var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, isSinglePage, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
-        var _a, _b, _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
+        var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold, pdf417Prediction, barcodeReadabilityThresholdSet, barcodeReadabilityThreshold;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return __generator(this, function (_j) {
           if (!lastPredictionCanvas.current) return [2 /*return*/];
           stopDetectionAtStart = stopDetection.current;
-          focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
+          focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false, pdf417PredictionTime = 0, pdf417PredictionScore = 0, pdf417PredictionThresholdMet = false;
           isSinglePage = prediction.detectedDocumentType === 'singlePage';
           if (!allowSinglePageIdCapture && isSinglePage) {
             prediction.detectedDocumentType = 'passport';
@@ -5774,28 +5766,51 @@ function IdCaptureModelsProviderInner(_a) {
             focusThresholdSet = (_d = thresholds.focus) === null || _d === void 0 ? void 0 : _d[prediction.detectedDocumentType];
             focusThreshold = (_e = onMobile ? focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.mobile : focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.desktop) !== null && _e !== void 0 ? _e : 0;
             focusThresholdMet = focusScore >= focusThreshold;
-            if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
-              bestFocusScore.current = focusScore;
-              drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
-              bestFrameDetails.current = {
-                boundingBox: (_f = prediction.bestDocument) === null || _f === void 0 ? void 0 : _f.box,
-                documentType: prediction.detectedDocumentType,
-                detectionScore: prediction.detectionScore,
-                focusScore: focusScore
-              };
+            if (stopDetectionAtStart === stopDetection.current) {
+              if (bestFocusScore.current <= focusScore) {
+                bestFocusScore.current = focusScore;
+                drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
+                bestFrameDetails.current = {
+                  boundingBox: (_f = prediction.bestDocument) === null || _f === void 0 ? void 0 : _f.box,
+                  documentType: prediction.detectedDocumentType,
+                  detectionScore: prediction.detectionScore,
+                  focusScore: focusScore
+                };
+              }
+              if (enableBarcodeReadabilityModel && prediction.bestPDF417) {
+                pdf417Prediction = makeBarcodeReadabilityPrediction(lastPredictionCanvas.current, prediction.bestPDF417.box);
+                if (pdf417Prediction) {
+                  pdf417PredictionTime = pdf417Prediction.predictionTime;
+                  pdf417PredictionScore = pdf417Prediction.score;
+                  if (bestBarcodeScore.current <= pdf417Prediction.score) {
+                    bestBarcodeScore.current = pdf417Prediction.score;
+                    bestBarcodeDetails.current = {
+                      boundingBox: prediction.bestPDF417.box,
+                      score: pdf417Prediction.score
+                    };
+                    drawToCanvas(bestBarcodeCanvas.current, cropToDetectedObjectBox(lastPredictionCanvas.current, prediction.bestPDF417.box, undefined, 16));
+                    barcodeReadabilityThresholdSet = barcodeReadabilityThresholds[prediction.detectedDocumentType];
+                    barcodeReadabilityThreshold = (_g = onMobile ? barcodeReadabilityThresholdSet === null || barcodeReadabilityThresholdSet === void 0 ? void 0 : barcodeReadabilityThresholdSet.mobile : barcodeReadabilityThresholdSet === null || barcodeReadabilityThresholdSet === void 0 ? void 0 : barcodeReadabilityThresholdSet.desktop) !== null && _g !== void 0 ? _g : 0;
+                    pdf417PredictionThresholdMet = pdf417PredictionScore >= barcodeReadabilityThreshold;
+                  }
+                }
+              }
             }
           }
-          (_g = onPredictionHandler.current) === null || _g === void 0 ? void 0 : _g.call(onPredictionHandler, _assign(_assign({}, prediction), {
+          (_h = onPredictionHandler.current) === null || _h === void 0 ? void 0 : _h.call(onPredictionHandler, _assign(_assign({}, prediction), {
             focusScore: focusScore,
             focusPredictionTime: focusPredictionTime,
-            focusThresholdMet: focusThresholdMet
+            focusThresholdMet: focusThresholdMet,
+            pdf417PredictionTime: pdf417PredictionTime,
+            pdf417PredictionScore: pdf417PredictionScore,
+            pdf417PredictionThresholdMet: pdf417PredictionThresholdMet
           }));
           return [2 /*return*/];
         });
       });
     });
-  }, [allowSinglePageIdCapture, lastPredictionCanvas, makeFocusPrediction, onDocumentDetected, requiredDocumentType, thresholds.focus]);
-  var modelError = documentDetectionModelError !== null && documentDetectionModelError !== void 0 ? documentDetectionModelError : focusModelError;
+  }, [allowSinglePageIdCapture, barcodeReadabilityThresholds, enableBarcodeReadabilityModel, lastPredictionCanvas, makeBarcodeReadabilityPrediction, makeFocusPrediction, onDocumentDetected, requiredDocumentType, thresholds.focus]);
+  var modelError = (_b = documentDetectionModelError !== null && documentDetectionModelError !== void 0 ? documentDetectionModelError : focusModelError) !== null && _b !== void 0 ? _b : barcodeReadabilityModelError;
   React.useEffect(function handleModelErrors() {
     if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
   }, [modelError, onModelError]);
@@ -5808,9 +5823,15 @@ function IdCaptureModelsProviderInner(_a) {
       canvas: bestPredictionCanvas.current
     });
   }, []);
-  var _f = React.useState(0),
-    canvasKey = _f[0],
-    setCanvasKey = _f[1];
+  var getBestBarcode = React.useCallback(function () {
+    if (!bestBarcodeDetails.current || !bestBarcodeCanvas.current) return null;
+    return _assign(_assign({}, bestBarcodeDetails.current), {
+      canvas: bestBarcodeCanvas.current
+    });
+  }, []);
+  var _j = React.useState(0),
+    canvasKey = _j[0],
+    setCanvasKey = _j[1];
   var resetBestFrame = React.useCallback(function () {
     stopDetection.current += 1;
     setCanvasKey(function (n) {
@@ -5826,16 +5847,45 @@ function IdCaptureModelsProviderInner(_a) {
   var load = React.useCallback(function () {
     loadDocumentDetectionModel();
     loadFocusModel();
-  }, [loadDocumentDetectionModel, loadFocusModel]);
-  var ready = documentDetectionModelState === 'ready' && focusModelState === 'ready';
-  var modelLoadState = ready ? 'ready' : documentDetectionModelState === 'warming' || focusModelState === 'warming' ? 'warming' : focusModelState === 'downloading' || documentDetectionModelState === 'downloading' ? 'downloading' : 'not-started';
-  var modelWarmingStartedAt = !documentDetectionModelWarmingStartedAt && !focusModelWarmingStartedAt ? null : Math.min.apply(Math, [documentDetectionModelWarmingStartedAt, focusModelWarmingStartedAt].filter(function (v) {
-    return v !== null;
-  }));
+    if (enableBarcodeReadabilityModel) loadBarcodeReadabilityModel();
+  }, [enableBarcodeReadabilityModel, loadBarcodeReadabilityModel, loadDocumentDetectionModel, loadFocusModel]);
+  var _k = React.useMemo(function () {
+      var modelStates = [documentDetectionModelState, focusModelState];
+      var modelWarmingStartedAts = [documentDetectionModelWarmingStartedAt, focusModelWarmingStartedAt];
+      var modelDownloadProgresses = [documentDetectionModelDownloadProgress, focusModelDownloadProgress];
+      if (enableBarcodeReadabilityModel) {
+        modelStates.push(barcodeReadabilityModelState);
+        modelWarmingStartedAts.push(barcodeReadabilityModelWarmingStartedAt);
+        modelDownloadProgresses.push(barcodeReadabilityModelDownloadProgress);
+      }
+      var ready = modelStates.every(function (state) {
+        return state === 'ready';
+      });
+      return {
+        ready: ready,
+        modelLoadState: ready ? 'ready' : modelStates.some(function (state) {
+          return state === 'warming';
+        }) ? 'warming' : modelStates.some(function (state) {
+          return state === 'downloading';
+        }) ? 'downloading' : 'not-started',
+        modelWarmingStartedAt: modelWarmingStartedAts.every(function (v) {
+          return v === null;
+        }) ? null : Math.min.apply(Math, modelWarmingStartedAts.filter(function (v) {
+          return v !== null;
+        })),
+        modelDownloadProgress: modelDownloadProgresses.reduce(function (a, b) {
+          return a + b;
+        }, 0) / modelDownloadProgresses.length
+      };
+    }, [barcodeReadabilityModelDownloadProgress, barcodeReadabilityModelState, barcodeReadabilityModelWarmingStartedAt, documentDetectionModelDownloadProgress, documentDetectionModelState, documentDetectionModelWarmingStartedAt, enableBarcodeReadabilityModel, focusModelDownloadProgress, focusModelState, focusModelWarmingStartedAt]),
+    ready = _k.ready,
+    modelLoadState = _k.modelLoadState,
+    modelWarmingStartedAt = _k.modelWarmingStartedAt,
+    modelDownloadProgress = _k.modelDownloadProgress;
   var value = React.useMemo(function () {
     return {
       ready: ready,
-      modelDownloadProgress: (documentDetectionModelDownloadProgress + focusModelDownloadProgress) / 2,
+      modelDownloadProgress: modelDownloadProgress,
       modelLoadState: modelLoadState,
       modelWarmingStartedAt: modelWarmingStartedAt,
       modelError: modelError,
@@ -5849,24 +5899,32 @@ function IdCaptureModelsProviderInner(_a) {
       onPredictionMade: onPredictionMade,
       detectionTime: detectionTime,
       focusPredictionTime: focusPredictionTime,
+      barcodeReadabilityPredictionTime: barcodeReadabilityPredictionTime,
       getBestFrame: getBestFrame,
       resetBestFrame: resetBestFrame,
       bestFrameDetails: bestFrameDetails,
+      bestBarcodeDetails: bestBarcodeDetails,
+      getBestBarcode: getBestBarcode,
       requiredDocumentType: requiredDocumentType,
       setRequiredDocumentType: setRequiredDocumentType
     };
-  }, [detectionTime, documentDetectionBoundaries, documentDetectionModelDownloadProgress, focusModelDownloadProgress, focusPredictionTime, getBestFrame, load, modelLoadState, modelError, modelWarmingStartedAt, onPredictionMade, ready, requiredDocumentType, resetBestFrame, setDocumentDetectionBoundaries, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
+  }, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, requiredDocumentType]);
   return /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
-    key: canvasKey,
+    key: "bf-".concat(canvasKey),
     ref: bestPredictionCanvas
+  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    key: "bb-".concat(canvasKey),
+    ref: bestBarcodeCanvas
   }), children);
 }
 function IdCaptureModelsProvider(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
-  return /*#__PURE__*/React__namespace.default.createElement(DocumentDetectionModelProvider, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement(FocusModelProvider, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProviderInner, _assign({}, props), children)));
+  return /*#__PURE__*/React__namespace.default.createElement(DocumentDetectionModelProvider, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement(FocusModelProvider, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement(BarcodeReadabilityModelProvider, _assign({}, props, {
+    shouldLoadModels: props.enableBarcodeReadabilityModel
+  }), /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProviderInner, _assign({}, props), children))));
 }
 function useIdCaptureModelsContext() {
   var context = React.useContext(IdCaptureModelsContext);
@@ -5876,7 +5934,7 @@ function useIdCaptureModelsContext() {
   return context;
 }
 
-var CapturedDocumentTypeValues = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'selfie', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
+var CapturedDocumentTypeValues = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'selfie', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage', 'idBarcodeImage'];
 
 var acceptedDocumentTypesForIdCaptureRequirementOption = {
   idCardFront: ['idCardFront'],
@@ -5962,6 +6020,7 @@ var initialState$5 = {
   capturing: false,
   captureFailed: false,
   imageUrl: null,
+  idBarcodeImage: null,
   captureState: 'initializing',
   capturedDocuments: {},
   captureRequirement: 'idCardOrPassport',
@@ -6241,6 +6300,17 @@ var _reducer = function reducer(state, action) {
         }
         return newState;
       }
+    case 'barcodeCaptured':
+      return _reducer(state, {
+        type: 'documentCaptured',
+        payload: {
+          imageData: action.payload.imageUrl,
+          documentType: 'idBarcodeImage',
+          width: 0,
+          height: 0,
+          barcodeReadabilityScore: action.payload.barcodeReadabilityScore
+        }
+      });
     case 'flipRequestCompleted':
       return _assign(_assign({}, state), {
         captureState: 'capturing',
@@ -6732,12 +6802,13 @@ var IdCapture = function IdCapture(_a) {
     height = _q === void 0 ? 1 : _q;
   var state = useIdCaptureStore();
   var isRearFacing = useCameraStore().isRearFacing;
-  var _r = React.useContext(IdCaptureModelsContext),
+  var _r = useIdCaptureModelsContext(),
     modelsReady = _r.ready,
     setThresholds = _r.setThresholds,
     detectionTime = _r.detectionTime,
     focusPredictionTime = _r.focusPredictionTime,
-    getBestFrame = _r.getBestFrame;
+    getBestFrame = _r.getBestFrame,
+    getBestBarcode = _r.getBestBarcode;
   React.useEffect(function () {
     return dispatchIdCaptureAction({
       type: 'captureInitialized'
@@ -6776,6 +6847,16 @@ var IdCapture = function IdCapture(_a) {
       });
       return;
     }
+    var bestBarcode = getBestBarcode();
+    if (bestBarcode) {
+      dispatchIdCaptureAction({
+        type: 'barcodeCaptured',
+        payload: {
+          imageUrl: bestBarcode.canvas.toDataURL('image/jpeg', 0.95),
+          barcodeReadabilityScore: bestBarcode.score
+        }
+      });
+    }
     var canvas = bestFrame.canvas,
       documentType = bestFrame.documentType,
       boundingBox = bestFrame.boundingBox,
@@ -6792,21 +6873,22 @@ var IdCapture = function IdCapture(_a) {
     });
     var capturedDocumentType = documentType;
     setTimeout(function () {
-      var _a;
-      var captureTime = new Date().getTime() - ((_a = state.captureStartedAt) !== null && _a !== void 0 ? _a : new Date()).getTime();
+      var _a, _b;
+      var captureTime = performance.now() - ((_a = state.captureStartedAt) !== null && _a !== void 0 ? _a : new Date()).getTime();
       var metadata = {
         autoCapture: 'Y',
         captureTime: captureTime,
         boundingBox: boundingBox,
         bestDetectionScore: detectionScore,
-        bestFocusScore: focusScore
+        bestFocusScore: focusScore,
+        bestBarcodeScore: (_b = bestBarcode === null || bestBarcode === void 0 ? void 0 : bestBarcode.score) !== null && _b !== void 0 ? _b : 0
       };
       onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageUrl, width, height, capturedDocumentType, metadata);
       dispatchIdCaptureAction({
         type: 'captured'
       });
     }, 0);
-  }, [getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
+  }, [getBestBarcode, getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
   var theme = styled.useTheme();
   colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.unsatisfiedColor) !== null && _d !== void 0 ? _d : 'white');
   colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.satisfiedColor) !== null && _g !== void 0 ? _g : 'green');
@@ -7944,7 +8026,7 @@ var Card = styled__default.default.div(templateObject_1$E || (templateObject_1$E
 var FlexCard = styled__default.default(Card)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var templateObject_1$E, templateObject_2$y;
 
-var imageDisplayOrder = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
+var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
 var IdCaptureSuccess = function IdCaptureSuccess(_a) {
   var capturedDocuments = _a.capturedDocuments,
     onSubmitClick = _a.onSubmitClick,
@@ -7986,7 +8068,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
       image: doc,
       className: classNames.image,
       alt: doc.documentType
-    }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugPre, null, "Document Type: ".concat(doc.documentType, "\nDetection Score: ").concat(doc.detectionScore, "\nFocus Score: ").concat(doc.focusScore, "\nBounding Box: ").concat(JSON.stringify(doc.boundingBox)))));
+    }), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugPre, null, name === 'idBarcodeImage' ? "Document Type: ".concat(doc.documentType, "\nReadability Score: ").concat(doc.barcodeReadabilityScore) : "Document Type: ".concat(doc.documentType, "\nDetection Score: ").concat(doc.detectionScore, "\nFocus Score: ").concat(doc.focusScore, "\nBounding Box: ").concat(JSON.stringify(doc.boundingBox)))));
   }))), /*#__PURE__*/React__namespace.default.createElement(ButtonsColumn, {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__namespace.default.createElement(WideButton, {
@@ -10598,7 +10680,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   var _5 = React.useState(false),
     overlayDismissed = _5[0],
     setOverlayDismissed = _5[1];
-  var _6 = React.useContext(SubmissionContext),
+  var _6 = useSubmissionContext(),
     submissionStatus = _6.submissionStatus,
     setIdFrontImage = _6.setIdFrontImage,
     setIdBackImage = _6.setIdBackImage,
@@ -10607,6 +10689,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     setIdBackIrImage = _6.setIdBackIrImage,
     setIdFrontUvImage = _6.setIdFrontUvImage,
     setIdBackUvImage = _6.setIdBackUvImage,
+    setIdBarcodeImage = _6.setIdBarcodeImage,
     logIdFrontCaptureAttempt = _6.logIdFrontCaptureAttempt,
     logIdBackCaptureAttempt = _6.logIdBackCaptureAttempt;
   var _7 = useIdCaptureModelsContext(),
@@ -10697,7 +10780,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     });
   }, [logCaptureMetadata, onDocumentCaptured]);
   var onSubmitClick = React.useCallback(function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var docs = state.capturedDocuments;
     var submission = {
       idFrontImage: maybeDataUrlToBase64Sync((_a = docs.idCardFront) === null || _a === void 0 ? void 0 : _a.imageData),
@@ -10707,7 +10790,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       idFrontIrImage: maybeDataUrlToBase64Sync((_e = docs.idFrontIrImage) === null || _e === void 0 ? void 0 : _e.imageData),
       idBackIrImage: maybeDataUrlToBase64Sync((_f = docs.idBackIrImage) === null || _f === void 0 ? void 0 : _f.imageData),
       idFrontUvImage: maybeDataUrlToBase64Sync((_g = docs.idFrontUvImage) === null || _g === void 0 ? void 0 : _g.imageData),
-      idBackUvImage: maybeDataUrlToBase64Sync((_h = docs.idBackUvImage) === null || _h === void 0 ? void 0 : _h.imageData)
+      idBackUvImage: maybeDataUrlToBase64Sync((_h = docs.idBackUvImage) === null || _h === void 0 ? void 0 : _h.imageData),
+      idBarcodeImage: maybeDataUrlToBase64Sync((_j = docs.idBarcodeImage) === null || _j === void 0 ? void 0 : _j.imageData)
     };
     if (submission.idFrontImage) setIdFrontImage(submission.idFrontImage);
     if (submission.idBackImage) setIdBackImage(submission.idBackImage);
@@ -10717,11 +10801,12 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     if (submission.idBackIrImage) setIdBackIrImage(submission.idBackIrImage);
     if (submission.idFrontUvImage) setIdFrontUvImage(submission.idFrontUvImage);
     if (submission.idBackUvImage) setIdBackUvImage(submission.idBackUvImage);
+    if (submission.idBarcodeImage) setIdBarcodeImage(submission.idBarcodeImage);
     if (releaseCameraAccessOnExit) releaseCameraAccess();
     setTimeout(function () {
       return onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(submission);
     }, 0);
-  }, [onSuccess, releaseCameraAccess, releaseCameraAccessOnExit, setIdBackImage, setIdBackIrImage, setIdBackUvImage, setIdFrontImage, setIdFrontIrImage, setIdFrontUvImage, setPassportImage, state.capturedDocuments]);
+  }, [onSuccess, releaseCameraAccess, releaseCameraAccessOnExit, setIdBarcodeImage, setIdBackImage, setIdBackIrImage, setIdBackUvImage, setIdFrontImage, setIdFrontIrImage, setIdFrontUvImage, setPassportImage, state.capturedDocuments]);
   var showSuccessScreen = useShowSuccessScreen(skipSuccessScreen, state.captureState === 'complete', onSubmitClick);
   var onRetryClick = React.useCallback(function () {
     return dispatchIdCaptureAction({
@@ -11523,47 +11608,315 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
       setFrame(0);
       return;
     }
-    setFrame(1);
-    var interval = setInterval(function () {
-      setFrame(function (n) {
-        return (n + 1) % 6;
+    setFrame(1);
+    var interval = setInterval(function () {
+      setFrame(function (n) {
+        return (n + 1) % 6;
+      });
+    }, 250);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [status]);
+  return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
+    frame: frame,
+    status: status
+  }));
+}
+var templateObject_1$p, templateObject_2$m, templateObject_3$g;
+
+var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
+var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
+var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
+  var _b = _a.classNames,
+    classNames = _b === void 0 ? {} : _b,
+    _c = _a.status,
+    status = _c === void 0 ? 'ready' : _c,
+    _d = _a.borderWidth,
+    borderWidth = _d === void 0 ? 5 : _d,
+    _e = _a.borderColor,
+    borderColor = _e === void 0 ? 'white' : _e,
+    _f = _a.borderOpacity,
+    borderOpacity = _f === void 0 ? 0.8 : _f;
+  return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
+    className: classNames.container
+  }, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
+    status: status,
+    borderColor: borderColor,
+    borderWidth: borderWidth,
+    borderOpacity: borderOpacity,
+    verticalAlign: "center"
+  })));
+};
+var templateObject_1$o, templateObject_2$l;
+
+var defaultSelfieCaptureModelLoadTimeoutMs = 45000;
+var detector = null;
+var detectorSettings = null;
+function loadFaceDetector() {
+  return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+    var _a, _b;
+    if (modelAssetPath === void 0) {
+      modelAssetPath = defaultFaceDetectorModelPath;
+    }
+    return __generator(this, function (_c) {
+      switch (_c.label) {
+        case 0:
+          if (detector && (detectorSettings === null || detectorSettings === void 0 ? void 0 : detectorSettings.modelAssetPath) === modelAssetPath) return [2 /*return*/, detector];
+          closeFaceDetector();
+          return [4 /*yield*/, preloadFaceDetectorDependencies()];
+        case 1:
+          _c.sent();
+          if (modelCapabilities.delegate === 'NONE') {
+            throw new Error('No available delegate for face detector.');
+          }
+          _b = (_a = tasksVision.FaceDetector).createFromOptions;
+          return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
+        case 2:
+          return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
+            // canvas: document.createElement('canvas'),
+            baseOptions: {
+              modelAssetPath: modelAssetPath,
+              delegate: modelCapabilities.delegate
+            },
+            runningMode: 'VIDEO'
+          }])];
+        case 3:
+          detector = _c.sent();
+          detectorSettings = {
+            modelAssetPath: modelAssetPath
+          };
+          return [2 /*return*/, detector];
+      }
+    });
+  });
+}
+function closeFaceDetector() {
+  detector === null || detector === void 0 ? void 0 : detector.close();
+  detector = null;
+  detectorSettings = null;
+}
+function useLoadFaceDetector(_a) {
+  var onModelError = _a.onModelError,
+    _b = _a.modelLoadTimeoutMs,
+    modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
+    videoRef = _a.videoRef;
+  var _c = React.useState('not-started'),
+    modelLoadState = _c[0],
+    setModelLoadState = _c[1];
+  var _d = React.useState(0),
+    modelDownloadProgress = _d[0],
+    setModelDownloadProgress = _d[1];
+  var _e = React.useState(null),
+    modelWarmingStartedAt = _e[0],
+    setModelWarmingStartedAt = _e[1];
+  var _f = React.useState(null),
+    modelError = _f[0],
+    setModelError = _f[1];
+  React.useEffect(function loadModel() {
+    var _this = this;
+    setModelLoadState('downloading');
+    setModelWarmingStartedAt(null);
+    var modelLoadTimeout = setTimeout(function () {
+      setModelError(new Error('Model loading time limit exceeded.'));
+    }, modelLoadTimeoutMs);
+    function handleDownloadProgress(event) {
+      setModelDownloadProgress(progressToPercentage(event.detail));
+    }
+    document.addEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
+    var cancelVideoReady = function cancelVideoReady() {};
+    loadFaceDetector().then(function (model) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, videoReady, cancel, cancelled;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              setModelDownloadProgress(100);
+              clearTimeout(modelLoadTimeout);
+              setModelLoadState('warming');
+              setModelWarmingStartedAt(performance.now());
+              return [4 /*yield*/, testFaceDetectionAgainstKnownImage(model)];
+            case 1:
+              _b.sent();
+              _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
+              cancelled = false;
+              cancelVideoReady = function cancelVideoReady() {
+                cancelled = true;
+                cancel();
+              };
+              return [4 /*yield*/, videoReady];
+            case 2:
+              _b.sent();
+              if (cancelled) return [2 /*return*/];
+              model.detectForVideo(videoRef.current, performance.now());
+              setModelLoadState('ready');
+              return [2 /*return*/];
+          }
+        });
       });
-    }, 250);
+    })["catch"](function (e) {
+      setModelError(e);
+      setModelLoadState('error');
+    })["finally"](function () {
+      clearTimeout(modelLoadTimeout);
+    });
     return function () {
-      clearInterval(interval);
+      log('unloading face detection model');
+      cancelVideoReady();
+      closeFaceDetector();
+      clearTimeout(modelLoadTimeout);
+      document.removeEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
     };
-  }, [status]);
-  return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
-    frame: frame,
-    status: status
-  }));
+  }, [modelLoadTimeoutMs, videoRef]);
+  React.useEffect(function handleModelError() {
+    if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
+  }, [modelError, onModelError]);
+  return React.useMemo(function () {
+    return {
+      ready: modelLoadState === 'ready',
+      modelLoadState: modelLoadState,
+      modelDownloadProgress: modelDownloadProgress,
+      modelWarmingStartedAt: modelWarmingStartedAt,
+      modelError: modelError
+    };
+  }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
+}
+var lastFaceDetectionAt = 0;
+var lastFaceDetectionTime = 0;
+function setLastFaceDetectionAt(time) {
+  lastFaceDetectionTime = time - lastFaceDetectionAt;
+  lastFaceDetectionAt = time;
+}
+var framesNeededSamples = [];
+function trackFramesNeeded(value, bufferLength) {
+  if (bufferLength === void 0) {
+    bufferLength = 25;
+  }
+  framesNeededSamples.unshift(value);
+  if (framesNeededSamples.length > bufferLength) framesNeededSamples.length = bufferLength;
+}
+var lastNFaces = [];
+var lastNPairs = [];
+function trackFace(face, framesNeeded) {
+  if (framesNeeded === void 0) {
+    framesNeeded = 12;
+  }
+  lastNFaces.unshift(face);
+  if (lastNFaces.length > framesNeeded) lastNFaces.length = framesNeeded;
+  if (lastNFaces.length > 1) {
+    var lastFace = lastNFaces[1];
+    var iou = calculateIoU(face.box, lastFace.box);
+    lastNPairs.unshift({
+      a: face,
+      b: lastFace,
+      iou: iou
+    });
+    if (lastNPairs.length > framesNeeded - 1) lastNPairs.length = framesNeeded - 1;
+  }
+}
+function makeFaceDetectorPrediction(imageData) {
+  if (!detector) return null;
+  var prediction = detector.detectForVideo(imageData, performance.now());
+  var faces = prediction.detections.map(function (d) {
+    return {
+      box: convertBoundingBox(d.boundingBox),
+      keypoints: d.keypoints.map(function (k) {
+        var _a;
+        return _assign(_assign({}, k), {
+          x: k.x * imageData.width,
+          y: k.y * imageData.height,
+          name: (_a = k.label) !== null && _a !== void 0 ? _a : ''
+        });
+      })
+    };
+  });
+  return _assign(_assign({}, prediction), {
+    faces: faces
+  });
+}
+function processFaceDetectorPrediction(_a) {
+  var faces = _a.faces,
+    videoWidth = _a.videoWidth,
+    videoHeight = _a.videoHeight,
+    _b = _a.requireVerticalFaceCentering,
+    requireVerticalFaceCentering = _b === void 0 ? true : _b,
+    _c = _a.stabilityThreshold,
+    stabilityThreshold = _c === void 0 ? 0.7 : _c;
+  var face = faces[0];
+  var faceNotDetected = faces.length === 0;
+  var faceNotCentered = false,
+    faceLookingAway = false,
+    faceTooClose = false,
+    faceTooFar = false;
+  if (face) {
+    // calculate centroids
+    var vCX = videoWidth / 2;
+    var vCY = videoHeight / 2;
+    var fCX = (face.box.xMin + face.box.xMax) / 2;
+    var fCY = (face.box.yMin + face.box.yMax) / 2;
+    // calculate thresholds
+    var vTX = videoWidth * 0.125;
+    var vTY = videoHeight * 0.125;
+    var fTW = face.box.width * 0.2;
+    var fTH = face.box.height * 0.2;
+    var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
+    if (nose) {
+      faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
+      var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
+      var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
+      faceNotCentered = faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
+    }
+    var isMobile = videoWidth < videoHeight;
+    var tooCloseMultiple = 1.5;
+    var tooFarMultiple = isMobile ? 6 : 7;
+    faceTooClose = face.box.width > videoWidth / tooCloseMultiple;
+    faceTooFar = face.box.width < videoWidth / tooFarMultiple;
+  }
+  var faceInGuides = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
+  if (lastFaceDetectionTime > 0) {
+    trackFramesNeeded(500 / lastFaceDetectionTime);
+  }
+  var faceIsStable = false;
+  if (faceInGuides) {
+    var framesNeeded = Math.ceil(average(framesNeededSamples));
+    trackFace(face, framesNeeded);
+    faceIsStable = lastNFaces.length >= framesNeeded && !lastNPairs.some(function (pair) {
+      return pair.iou < stabilityThreshold;
+    });
+  }
+  var faceReady = faceInGuides && faceIsStable;
+  return {
+    face: face,
+    faceNotDetected: faceNotDetected,
+    faceNotCentered: faceNotCentered,
+    faceLookingAway: faceLookingAway,
+    faceTooClose: faceTooClose,
+    faceTooFar: faceTooFar,
+    faceReady: faceReady,
+    faceReadyAt: faceReady ? new Date() : null,
+    faceIsStable: faceIsStable
+  };
+}
+function testFaceDetectionAgainstKnownImage(detector) {
+  return new Promise(function (resolve, reject) {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = function () {
+      var prediction = detector.detectForVideo(img, performance.now());
+      if (prediction.detections.length > 0) {
+        debug('face detection test result', prediction.detections);
+        resolve(void 0);
+      } else {
+        warn('face detection test failed');
+        reject(new Error('testFaceDetectionAgainstKnownImage failed to predict'));
+      }
+    };
+    img.onerror = function () {
+      return reject(new Error('testFaceDetectionAgainstKnownImage failed to load image'));
+    };
+    img.src = "".concat(DEFAULT_CDN_URL, "/head-test.jpg");
+  });
 }
-var templateObject_1$p, templateObject_2$m, templateObject_3$g;
-
-var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
-var FaceCaptureGuideInner = styled__default.default.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
-var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
-  var _b = _a.classNames,
-    classNames = _b === void 0 ? {} : _b,
-    _c = _a.status,
-    status = _c === void 0 ? 'ready' : _c,
-    _d = _a.borderWidth,
-    borderWidth = _d === void 0 ? 5 : _d,
-    _e = _a.borderColor,
-    borderColor = _e === void 0 ? 'white' : _e,
-    _f = _a.borderOpacity,
-    borderOpacity = _f === void 0 ? 0.8 : _f;
-  return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
-    className: classNames.container
-  }, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMaskWithStatus, {
-    status: status,
-    borderColor: borderColor,
-    borderWidth: borderWidth,
-    borderOpacity: borderOpacity,
-    verticalAlign: "center"
-  })));
-};
-var templateObject_1$o, templateObject_2$l;
 
 var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
   start: function start() {