@authme/identity-verification 2.7.2 → 2.7.4

package/index.cjs

@@ -127,7 +127,8 @@ const defaultIdRecognitionConfig = {
   disablePassportConfirm: false,
   antiFraudIMetalTagValidCountTh: false,
   cardTypes: [],
-  cardTypeConfigs: []
+  cardTypeConfigs: [],
+  captureTimeout: -1
 };
 
 function setCorrectViewHeight() {
@@ -23717,8 +23718,8 @@ var RESIZE_EVENT;
   RESIZE_EVENT["PASS"] = "PASS";
 })(RESIZE_EVENT || (RESIZE_EVENT = {}));
 function detectScreenResize$() {
-  const initWidth = window.outerWidth;
-  const initHeight = window.outerHeight;
+  const initWidth = window.innerWidth;
+  const initHeight = window.innerHeight;
   let resize$;
   if (util.isMobile()) {
     if (!window.visualViewport) {
@@ -23742,7 +23743,7 @@ function detectScreenResize$() {
       if (window.innerWidth < RESIZE_STYLE.RESIZE_WIDTH_LIMIT || window.innerHeight < RESIZE_STYLE.RESIZE_HEIGHT_LIMIT) {
         return RESIZE_EVENT.SCREEN_RESOLUTION_TOO_LOW;
       }
-      if (window.outerWidth !== initWidth || window.outerHeight !== initHeight) {
+      if (window.innerWidth !== initWidth || window.innerHeight !== initHeight) {
         return RESIZE_EVENT.SCREEN_SIZE_CHANGED;
       }
       return RESIZE_EVENT.PASS;
@@ -24011,10 +24012,10 @@ function startLiveness(config) {
     result
   }) => applyTextByResult(result)), rxjs.filter(({
     result
-  }) => result.eStatus === liveness.FasRecognitionResult.Pass && result.eStage === liveness.EAuthMeFASServiceStage.Done || result.eStatus === liveness.FasRecognitionResult.Failed), rxjs.map(data => {
+  }) => result.eStatus === liveness.FasRecognitionResult.Pass && result.eStage === liveness.EAuthMeFASServiceStage.Passive || result.eStatus === liveness.FasRecognitionResult.Failed), rxjs.map(data => {
     var _a, _b;
     return Object.assign(Object.assign({}, data), {
-      isSuccess: ((_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.eStatus) === liveness.FasRecognitionResult.Pass && ((_b = data === null || data === void 0 ? void 0 : data.result) === null || _b === void 0 ? void 0 : _b.eStage) === liveness.EAuthMeFASServiceStage.Done
+      isSuccess: ((_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.eStatus) === liveness.FasRecognitionResult.Pass && ((_b = data === null || data === void 0 ? void 0 : data.result) === null || _b === void 0 ? void 0 : _b.eStage) === liveness.EAuthMeFASServiceStage.Passive
     });
   }), rxjs.take(1),
   /**
@@ -24249,21 +24250,6 @@ const initScanAnimation = params => {
   });
   lottie__default["default"].stop('scan');
 };
-const initSuccessAnimation = params => {
-  lottie__default["default"].destroy('success');
-  lottie__default["default"].loadAnimation({
-    container: params.animationContainer,
-    renderer: 'svg',
-    loop: false,
-    autoplay: true,
-    name: 'success',
-    animationData: success({
-      color: '#7CFFF9',
-      opacity: 1
-    })
-  });
-  lottie__default["default"].stop('success');
-};
 const renderCameraSwitch = config => {
   const cameraSwitchContainer = document.createElement('div');
   const cameraSwitch = document.createElement('div');
@@ -24313,21 +24299,29 @@ const renderOCRUI = config => {
   // Animation
   const scanAnimationContainer = document.createElement('div');
   scanAnimationContainer.classList.add('scan');
-  const successAnimationContainer = document.createElement('div');
-  successAnimationContainer.classList.add('success_container');
-  const successAnimationDom = document.createElement('div');
-  successAnimationDom.classList.add('success');
+  // 完成流程元件
+  const successContainer = document.createElement('div');
+  successContainer.classList.add('success_container');
+  const successBlockDom = document.createElement('div');
+  successBlockDom.classList.add('block');
+  const successDom = document.createElement('div');
+  successDom.classList.add('img');
+  const successText = document.createElement('div');
+  successText.textContent = translateService.translate('sdk.general.done');
+  successBlockDom.appendChild(successDom);
+  successBlockDom.appendChild(successText);
+  successContainer.appendChild(successBlockDom);
   const arrowAnimationContainer = document.createElement('div');
   arrowAnimationContainer.classList.add('arrow_container');
-  successAnimationContainer.appendChild(successAnimationDom);
   config.videoContainer.appendChild(titleTextPanel);
   if (config.showStatement) {
     config.videoContainer.appendChild(statementContainer);
   }
   config.videoContainer.appendChild(statusTextPanel);
   config.videoContainer.appendChild(scanAnimationContainer);
-  config.videoContainer.appendChild(successAnimationContainer);
+  config.videoContainer.appendChild(successContainer);
   config.videoContainer.appendChild(arrowAnimationContainer);
+  successContainer.classList.add('hide');
   // Anti-fraud Instruction
   const lottieMask = document.createElement('div');
   lottieMask.classList.add('lottie-mask');
@@ -24351,6 +24345,8 @@ const renderOCRUI = config => {
   config.container.appendChild(lottieMask);
   config.container.appendChild(antiFraudInstructionContainer);
   // Picture
+  const confirmContainer = document.createElement('div');
+  confirmContainer.classList.add('confirm_container');
   const confirmImageContainer = document.createElement('div');
   confirmImageContainer.classList.add('confirm-image-container');
   const imageTypeText = document.createElement('div');
@@ -24379,7 +24375,8 @@ const renderOCRUI = config => {
   confirmImageContainer.appendChild(imageContainer);
   confirmImageContainer.appendChild(imageLineLineDesktop);
   confirmImageContainer.appendChild(imageFooter);
-  config.container.appendChild(confirmImageContainer);
+  confirmContainer.appendChild(confirmImageContainer);
+  config.container.appendChild(confirmContainer);
   return {
     antiFraudInstructionContainer,
     titleTextPanel,
@@ -24389,11 +24386,12 @@ const renderOCRUI = config => {
     statusTextPanel,
     lottieMask,
     arrowAnimationContainer,
-    successAnimationContainer,
-    successAnimationDom,
+    successContainer,
+    successBlockDom,
     scanAnimationContainer,
     antiFraudInstructionAnimationContainer,
     confirmImageContainer,
+    confirmContainer,
     imageTypeText,
     // cardborder,
     // cardborderContainer,
@@ -25305,7 +25303,8 @@ function renderCardRotateAnimate(container) {
 const captureButton = () => {
   let dom = document.querySelector('#btn_capture');
   if (dom) {
-    return dom;
+    // return dom;
+    dom.remove();
   }
   const videoContainer = document.querySelector('.video-container');
   if (!videoContainer) {
@@ -25334,24 +25333,26 @@ const modal = arg => {
   const domModal = document.createElement('div');
   const domHeaderContainer = document.createElement('div');
   const domHeader = document.createElement('div');
-  const domContainer = document.createElement('div');
+  const domBodyContainer = document.createElement('div');
+  const domBody = document.createElement('div');
   const domTitle = document.createElement('div');
   const domSubtitle = document.createElement('div');
   const domImage = document.createElement('img');
   const domContent = document.createElement('div');
-  const domFooter = document.createElement('div');
+  const domFooterContainer = document.createElement('div');
   const domClose = document.createElement('div');
   const domConfirm = document.createElement('div');
   const domCopyRight = document.createElement('div');
   domModal.classList.add('video-container__modal');
   domHeaderContainer.classList.add('video-container__modal-header-container');
   domHeader.classList.add('video-container__modal-header');
-  domContainer.classList.add('video-container__modal-container');
+  domBodyContainer.classList.add('video-container__modal-body-container');
+  domBody.classList.add('video-container__modal-body');
   domTitle.classList.add('video-container__modal-title');
   domSubtitle.classList.add('video-container__modal-subtitle');
   domImage.classList.add('video-container__modal-image');
   domContent.classList.add('video-container__modal-content');
-  domFooter.classList.add('video-container__modal-footer');
+  domFooterContainer.classList.add('video-container__modal-footer-container');
   domClose.classList.add('video-container__modal-close');
   domConfirm.classList.add('video-container__modal-confirm');
   domCopyRight.classList.add('video-container__modal-copy-right');
@@ -25377,16 +25378,17 @@ const modal = arg => {
   domHeaderContainer.appendChild(domHeader);
   domHeaderContainer.appendChild(domClose);
   domModal.appendChild(domHeaderContainer);
-  domContainer.appendChild(domTitle);
-  domContainer.appendChild(domSubtitle);
-  domContainer.appendChild(domImage);
-  domContainer.appendChild(domContent);
-  domModal.appendChild(domContainer);
-  domFooter.appendChild(domConfirm);
-  domModal.appendChild(domFooter);
+  domBodyContainer.appendChild(domBody);
+  domBody.appendChild(domTitle);
+  domBody.appendChild(domSubtitle);
+  domBody.appendChild(domImage);
+  domBody.appendChild(domContent);
+  domModal.appendChild(domBodyContainer);
+  domFooterContainer.appendChild(domConfirm);
+  domModal.appendChild(domFooterContainer);
   if (arg.copyRight) {
     domCopyRight.innerText = arg.copyRight;
-    domFooter.appendChild(domCopyRight);
+    domFooterContainer.appendChild(domCopyRight);
   }
   authmeContainer.appendChild(domModal);
 };
@@ -25414,9 +25416,11 @@ const resetFrame = () => {
 };
 const countdownTimer = (time, doSomething) => {
   let end = false;
+  let timer;
+  let endTime;
   const init = () => {
-    const endTime = new Date().getTime() + time * 1000;
-    const timer = setInterval(function () {
+    endTime = new Date().getTime() + time * 1000;
+    timer = setInterval(function () {
       const currentTime = new Date().getTime();
       const remainingTime = endTime - currentTime;
       if (remainingTime <= 0) {
@@ -25428,10 +25432,21 @@ const countdownTimer = (time, doSomething) => {
       }
     }, 300);
   };
+  const clear = () => {
+    clearInterval(timer);
+    end = true;
+    return (endTime - new Date().getTime()) / 1000;
+  };
+  const pause = () => {
+    clearInterval(timer);
+    return (endTime - new Date().getTime()) / 1000;
+  };
   const getStatus = () => {
     return end;
   };
   return {
+    pause: pause,
+    clear: clear,
     init: init,
     end: getStatus
   };
@@ -25439,7 +25454,7 @@ const countdownTimer = (time, doSomething) => {
 
 const translateService = core.getTranslateInstance();
 // TODO 處理參數
-const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCardPoints, setCardBorderColor, statusText, canvasSizeInfo$, showVideoElement, config, cardRotateByStage, getCardBorderPoint, setBorderType, setBorderSuccess, scanAnimationContainer, successAnimationContainer, frameImage, frameText, facingMode, ocrEngineConfig, sdkFlowTimeout = undefined, makeSDKFlowTimeout, image, video, retryBtn, completeBtn, confirmImageContainer) => {
+const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCardPoints, setCardBorderColor, statusText, canvasSizeInfo$, showVideoElement, config, cardRotateByStage, getCardBorderPoint, setBorderType, setBorderSuccess, scanAnimationContainer, successAnimationContainer, frameImage, frameText, facingMode, ocrEngineConfig, sdkFlowTimeout = undefined, makeSDKFlowTimeout, image, video, retryBtn, completeBtn, confirmImageContainer, confrimContainer) => {
   const videoToCanvas = (sizeInfo, data) => {
     const ctx2 = image.getContext('2d');
     image.width = sizeInfo.canvasWidth;
@@ -25456,6 +25471,7 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
     videoToCanvas(sizeInfo, data);
     showVideoElement(false);
     util.showElement(confirmImageContainer);
+    util.showElement(confrimContainer);
     const retryEvents = rxjs.fromEvent(retryBtn, 'click').pipe(rxjs.mapTo(true));
     const confirmEvents = rxjs.fromEvent(completeBtn, 'click').pipe(rxjs.mapTo(false));
     const allEvents$ = rxjs.merge(retryEvents, confirmEvents);
@@ -25508,11 +25524,6 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
         sendStatusDescription$1(core.StatusDescription.WrongCardType);
         setCardBorderColor('error');
         break;
-      case idRecognition.EAuthMeIDCardAntiFraudStatus.CardThicknessFailed:
-        statusText.textContent = translateService.translate('sdk.general.verify.error.CardThicknessFailed');
-        sendStatusDescription$1(core.StatusDescription.CardThicknessFailed);
-        setCardBorderColor('error');
-        break;
       case idRecognition.EAuthMeIDCardAntiFraudStatus.Reflective:
         statusText.textContent = translateService.translate('sdk.general.verify.error.reflective');
         sendStatusDescription$1(core.StatusDescription.Reflective);
@@ -25553,22 +25564,11 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
         statusText.textContent = translateService.translate('sdk.general.verify.error.cardCutByCamera');
         break;
       case idRecognition.EAuthMeIDCardAntiFraudStatus.CardNotInROI:
-        statusText.textContent = translateService.translate('verify.error.CardNotInROI');
+        statusText.textContent = translateService.translate('sdk.general.verify.error.missmatch');
         break;
       case idRecognition.EAuthMeIDCardAntiFraudStatus.CardTooSmall:
         statusText.textContent = translateService.translate('sdk.general.verify.error.getCloser');
         break;
-      case idRecognition.EAuthMeIDCardAntiFraudStatus.NeedHoldCard:
-        statusText.textContent = translateService.translate('sdk.general.verify.error.needHoldCard');
-        break;
-      case idRecognition.EAuthMeIDCardAntiFraudStatus.StagePass:
-        statusText.textContent = translateService.translate('sdk.general.verify.error.stagePass');
-        setCardBorderColor('pass');
-        break;
-      case idRecognition.EAuthMeIDCardAntiFraudStatus.Pass:
-        setCardBorderColor('pass');
-        statusText.textContent = translateService.translate('sdk.general.verify.error.pass');
-        break;
       case idRecognition.EAuthMeIDCardAntiFraudStatus.Failed:
         setCardBorderColor('error');
         statusText.textContent = translateService.translate('sdk.general.verify.error.pass');
@@ -25611,7 +25611,8 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
           onConfirm: () => {
             observer.next(canvasSizeInfo);
             observer.complete();
-          }
+          },
+          copyRight: translateService.translate('sdk.general.footer')
         });
       });
     } else {
@@ -25651,6 +25652,9 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
       result
     }) => {
       if (thicknessTimer.end()) {
+        util.hideElement(confirmImageContainer);
+        util.hideElement(confrimContainer);
+        showVideoElement(true);
         util.startSpinner(translateService.translate('sdk.general.uploading'), true);
         videoToCanvas(canvasSizeInfo, result.imageData);
         return config.confirmThickness ? config.confirmThickness(generateImage(), cardType) : rxjs.of(false);
@@ -25661,6 +25665,7 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
       }), rxjs.switchMap(confirmResp => {
         showVideoElement(true);
         util.hideElement(confirmImageContainer);
+        util.hideElement(confrimContainer);
         util.stopSpinner();
         if (confirmResp) {
           return autoDetectProcess(true);
@@ -25686,6 +25691,9 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
       // 當 end() 函數返回 false 時繼續
       operators.finalize(() => __awaiter(void 0, void 0, void 0, function* () {
         if (thicknessTimer.end()) {
+          util.hideElement(confirmImageContainer);
+          util.hideElement(confrimContainer);
+          showVideoElement(true);
           util.startSpinner(translateService.translate('sdk.general.uploading'), true);
           const sizeInfo = yield util.getCanvasSize(video);
           videoToCanvas(sizeInfo);
@@ -25705,10 +25713,11 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
           return needRetry ? rxjs.of(true) : rxjs.from(config.confirmThickness ? config.confirmThickness(generateImage(), cardType) : rxjs.of(false)).pipe(rxjs.tap(() => sendStatusAction$1(core.StatusAction.Uploading)), rxjs.map(confirmResp => !confirmResp));
         }), rxjs.tap(confirmResp => {
           util.hideElement(confirmImageContainer);
+          util.hideElement(confrimContainer);
           util.stopSpinner();
           showVideoElement(true);
+          checkTimeout.unsubscribe(); // 取消 interval$ 的訂閱
           if (!confirmResp) {
-            checkTimeout.unsubscribe(); // 取消 interval$ 的訂閱
             util.hideElement(captureBtn);
             observer.next(canvasSizeInfo);
           }
@@ -25734,6 +25743,63 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
   }
 };
 
+const toast = arg => {
+  var _a;
+  let timer = null;
+  let clearStatus = false;
+  const message = typeof arg === 'string' ? arg : arg.message;
+  const duration = arg.duration || 4000;
+  const transition = (_a = arg.transition) !== null && _a !== void 0 ? _a : true;
+  const toast = document.createElement('div');
+  toast.style.cssText = `
+    position: fixed;
+    bottom: 50px;
+    left: 50%;
+    box-sizing: border-box;
+    transform: translateX(-50%);
+    width: 90%;
+    padding: 10px 16px;
+    background-color: rgba(0, 0, 0, .6);
+    color: #fff;
+    border-radius: 8px;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    opacity: 0;
+    word-break: break-all;
+  `;
+  toast.classList.add('authme-toast');
+  const clear = () => {
+    if (!clearStatus) {
+      clearStatus = true;
+      document.body.removeChild(toast);
+      clearTimeout(timer);
+    }
+  };
+  if (transition) {
+    toast.style.transition = 'opacity .3s ease-in';
+    setTimeout(() => {
+      toast.style.opacity = '1';
+    }, 300);
+  } else {
+    toast.style.opacity = '1';
+  }
+  toast.innerHTML = message;
+  document.body.appendChild(toast);
+  timer = setTimeout(() => {
+    clearStatus = true;
+    toast.style.opacity = '0';
+    toast.style.transition = 'opacity .3s ease-out';
+    setTimeout(() => {
+      document.body.removeChild(toast);
+    }, 500);
+  }, duration);
+  return {
+    clear
+  };
+};
+
 const initEvenTrackingStatus = ocrConfig => {
   setFeature$1(ocrConfig.needAntiFraud ? core.Feature.OCRFraud : core.Feature.OCR);
 };
@@ -25757,7 +25823,8 @@ function startOCR(config) {
     enableManualUpload: false,
     fraudRetryTimes: 1,
     fraudTimeout: 52,
-    fraudMaxFps: 2
+    fraudMaxFps: 2,
+    captureTimeout: config.ocrConfig.captureTimeout
   };
   let cardSizeInfo = {
     width: 0,
@@ -25798,9 +25865,10 @@ function startOCR(config) {
     lottieMask,
     arrowAnimationContainer,
     scanAnimationContainer,
-    successAnimationDom,
+    successContainer,
     antiFraudInstructionAnimationContainer,
     confirmImageContainer,
+    confirmContainer,
     imageTypeText,
     retryBtn,
     confirmBtn,
@@ -25833,6 +25901,9 @@ function startOCR(config) {
     stopAnimate
   } = renderCardRotateAnimate(arrowAnimationContainer);
   setCorrectViewHeight();
+  let countdownCaptureTimer;
+  let toastManualCapture = null;
+  let captureTimeoutTimer;
   const canvasSizeInfo$ = rxjs.merge(rxjs.defer(() => util.requestCamera({
     video,
     facingMode: 'back',
@@ -25868,7 +25939,7 @@ function startOCR(config) {
       });
     }), expiredIn * util.TIME_UNIT.SECOND);
   }
-  function startAntiFraud(type) {
+  function startAntiFraud(type, cardType) {
     const animateInterval = 2 * util.TIME_UNIT.SECOND;
     const nextAnimateInterval = 6 * util.TIME_UNIT.SECOND;
     let needDeformationCount = 0;
@@ -25954,7 +26025,7 @@ function startOCR(config) {
           statusText.textContent = translateService.translate('sdk.general.verify.error.cardCutByCamera');
           break;
         case idRecognition.EAuthMeIDCardAntiFraudStatus.CardNotInROI:
-          statusText.textContent = translateService.translate('verify.error.CardNotInROI');
+          statusText.textContent = translateService.translate('sdk.general.verify.error.missmatch');
           break;
         case idRecognition.EAuthMeIDCardAntiFraudStatus.CardTooSmall:
           statusText.textContent = translateService.translate('sdk.general.verify.error.getCloser');
@@ -25995,7 +26066,7 @@ function startOCR(config) {
         statusText.classList.remove('non-empty');
       }
     };
-    const antiFraudStart$ = rxjs.of(true).pipe(rxjs.switchMap(() => util.checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), rxjs.switchMap(() => canvasSizeInfo$), rxjs.switchMap(canvasSizeInfo => rxjs.from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(rxjs.switchMap(() => config.antiFraudStart(getCardBorderPoint(), setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successAnimationDom, frameImage, frameText, facingMode)), rxjs.tap(() => __awaiter(this, void 0, void 0, function* () {
+    const antiFraudStart$ = rxjs.of(true).pipe(rxjs.switchMap(() => util.checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), rxjs.switchMap(() => canvasSizeInfo$), rxjs.switchMap(canvasSizeInfo => rxjs.from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(rxjs.switchMap(() => config.antiFraudStart(getCardBorderPoint(), setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successContainer, frameImage, frameText, facingMode)), rxjs.tap(() => __awaiter(this, void 0, void 0, function* () {
       setStatusView(core.StatusView.Aligning);
       if (buttonDisable$) {
         const cardMatchROI = config.getCardMatchROI ? yield config.getCardMatchROI() : undefined;
@@ -26036,9 +26107,10 @@ function startOCR(config) {
       statusText.classList.remove('non-empty');
       setCardBorderColor('pass');
       util.hideElement(arrowAnimationContainer);
-      lottie__default["default"].play('success');
+      successContainer.classList.remove('hide');
     }), rxjs.switchMap(() => util.waitTime(2000)), rxjs.tap(() => {
-      lottie__default["default"].stop('success');
+      setHeaderByType(cardType);
+      successContainer.classList.add('hide');
     }));
     antiFraudStart$.pipe(
     //workaround?: 因目前Frontal timeout會直接Failed，所以不能用$handleError來作為停止條件。
@@ -26056,6 +26128,7 @@ function startOCR(config) {
     if (!config.ocrConfig.needOCR && type === idRecognition.EAuthMeCardClass.TWN_IDCard_Front) {
       return rxjs.of(true);
     }
+    let captureBtn;
     // if (config.ocrConfig.needAntiFraud) {
     const point = getCardBorderPoint();
     setCardPoints(point.map(([x, y]) => ({
@@ -26115,7 +26188,7 @@ function startOCR(config) {
         showCameraSwitchButton(deviceMetas);
       }
     };
-    const init = retry => canvasSizeInfo$.pipe(rxjs.take(1), rxjs.switchMap(canvasSizeInfo => rxjs.from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(rxjs.switchMap(() => util.checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), rxjs.switchMap(() => config.ocrStart(getCardBorderPoint(), type, setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successAnimationDom, frameImage, frameText, facingMode, cardType, retry)), rxjs.tap(() => {
+    const init = retry => canvasSizeInfo$.pipe(rxjs.take(1), rxjs.switchMap(canvasSizeInfo => rxjs.from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(rxjs.switchMap(() => util.checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), rxjs.switchMap(() => config.ocrStart(getCardBorderPoint(), type, setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successContainer, frameImage, frameText, facingMode, cardType, retry)), rxjs.tap(() => {
       tiltFrame(false);
       util.stopSpinner();
       util.showElement(scanAnimationContainer);
@@ -26124,41 +26197,167 @@ function startOCR(config) {
       lottie__default["default"].play('scan');
       util.showElement(scanAnimationContainer);
     }), rxjs.map(() => canvasSizeInfo))));
-    setCardBorderColor(null);
-    const recognition = retry => init(retry).pipe(rxjs.tap(() => {
-      setStatusView(core.StatusView.Running);
-      if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
-        sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
+    const videoToCanvas = (sizeInfo, data) => {
+      const ctx2 = image.getContext('2d');
+      image.width = sizeInfo.canvasWidth;
+      image.height = sizeInfo.canvasHeight;
+      if (data) {
+        const imgData = ctx2.createImageData(image.width, image.height);
+        imgData.data.set(data);
+        ctx2.putImageData(imgData, 0, 0);
+      } else {
+        ctx2.drawImage(video, sizeInfo.startX, sizeInfo.startY, sizeInfo.width, sizeInfo.height, 0, 0, sizeInfo.canvasWidth, sizeInfo.canvasHeight);
       }
-    }), rxjs.switchMap(canvasSizeInfo => rxjs.of(canvasSizeInfo).pipe(sendFrame(canvasSizeInfo, image, video, config.recognition, 30, false, 'jpg', cardType, undefined, type), rxjs.tap(x => applyTextByResult(x.result)), rxjs.filter(({
-      result
-    }) => result.eStatus === idRecognition.EAuthMeCardOCRStatus.Pass || result.eStatus === idRecognition.EAuthMeMRZServiceStatus.Success),
-    // ocrEngineConfig.expiredIn
-    //   ? timeout(ocrEngineConfig.expiredIn * TIME_UNIT.SECOND)
-    //   : tap(),
-    // catchError((err) => {
-    //   if (err.name === 'TimeoutError') {
-    //     throw new AuthmeError(ErrorCode.ID_RECOGNITION_TIMEOUT, err);
-    //   }
-    //   throw err;
-    // }),
-    rxjs.take(1), rxjs.tap(() => {
-      setCardBorderColor('pass');
-      statusText.textContent = translateService.translate('sdk.general.verify.success');
-      lottie__default["default"].stop('scan');
-      util.hideElement(scanAnimationContainer);
-    }), rxjs.switchMap(resp => rxjs.of(true).pipe(rxjs.tap(() => {
-      util.hideElement(scanAnimationContainer);
-    }), rxjs.map(() => resp))), rxjs.switchMap(({
-      result
-    }) => rxjs.from(type === idRecognition.EAuthMeCardClass.Passport && config.ocrConfig.disablePassportConfirm ? rxjs.of(false) : checkConfirmImage(result.imageData, result.iWidth, result.iHeight)).pipe(rxjs.switchMap(needRetry => {
-      util.startSpinner(translateService.translate('sdk.general.uploading'));
-      return needRetry ? rxjs.of(true) : rxjs.from(config.confirmImage(type, cardType)).pipe(rxjs.tap(() => sendStatusAction$1(core.StatusAction.Uploading)), rxjs.map(confirmResp => !confirmResp));
-    }), rxjs.tap(() => {
-      util.hideElement(confirmImageContainer);
-      util.stopSpinner();
-      showVideoElement();
-    }), rxjs.switchMap(needRetry => needRetry ? recognition(true) : rxjs.of(true)))))));
+    };
+    const checkConfirmImageManual = (sizeInfo, data) => __awaiter(this, void 0, void 0, function* () {
+      videoToCanvas(sizeInfo, data);
+      showVideoElement(false);
+      util.showElement(confirmImageContainer);
+      util.showElement(confirmContainer);
+      const retryEvents = rxjs.fromEvent(retryBtn, 'click').pipe(rxjs.mapTo(true));
+      const confirmEvents = rxjs.fromEvent(completeBtn, 'click').pipe(rxjs.mapTo(false));
+      const allEvents$ = rxjs.merge(retryEvents, confirmEvents);
+      return yield rxjs.firstValueFrom(allEvents$.pipe());
+    });
+    const manualCapture = show => {
+      captureBtn = captureButton();
+      if (captureBtn && show) {
+        util.showElement(captureBtn);
+        toastManualCapture = toast({
+          message: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_19494_3109)"><path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.5L9 3.75H15L16.5 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_19494_3109"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>' + translateService.translate('sdk.general.manualCapture'),
+          transition: !show
+        });
+      }
+      return rxjs.fromEvent(captureBtn, 'click').pipe(rxjs.switchMap(() => util.getCanvasSize(video)), rxjs.switchMap(canvasSizeInfo => {
+        ocrSendFrameAnimation = true;
+        lottie__default["default"].stop('scan');
+        util.hideElement(scanAnimationContainer);
+        if (toastManualCapture) {
+          toastManualCapture.clear();
+        }
+        return rxjs.from(type === idRecognition.EAuthMeCardClass.Passport && config.ocrConfig.disablePassportConfirm ? rxjs.of(false) : checkConfirmImageManual(canvasSizeInfo)).pipe(rxjs.switchMap(needRetry => {
+          util.startSpinner(translateService.translate('sdk.general.uploading'));
+          if (needRetry) {
+            util.hideElement(confirmImageContainer);
+            util.hideElement(confirmContainer);
+            util.stopSpinner();
+            showVideoElement();
+            lottie__default["default"].play('scan');
+            util.showElement(scanAnimationContainer);
+          }
+          return needRetry ? rxjs.of(true) : rxjs.from(config.confirmImage({
+            type,
+            cardType,
+            imageData: util.dataURItoBlob(image.toDataURL('image/jpeg', 0.85)),
+            manual: true
+          })).pipe(rxjs.tap(() => sendStatusAction$1(core.StatusAction.Uploading)), rxjs.map(confirmResp => !confirmResp));
+        }), rxjs.switchMap(needRetry => {
+          if (needRetry) {
+            ocrSendFrameAnimation = false;
+            return recognition(true).pipe(rxjs.map(() => true));
+          } else {
+            util.hideElement(captureBtn);
+            util.hideElement(confirmImageContainer);
+            util.hideElement(confirmContainer);
+            util.stopSpinner();
+            showVideoElement();
+            lottie__default["default"].play('scan');
+            util.showElement(scanAnimationContainer);
+            return rxjs.of(true);
+          }
+        }), rxjs.map(confirmResp => confirmResp));
+      }));
+    };
+    setCardBorderColor(null);
+    let ocrSendFrameAnimation = false;
+    const handleOcrSendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, type) => source$ => {
+      let received = true;
+      const ctx = canvas.getContext('2d');
+      return source$.pipe(rxjs.mergeMap(() => rxjs.animationFrames().pipe(limitFPS(fps), rxjs.filter(() => received && !ocrSendFrameAnimation), rxjs.tap(() => received = false), rxjs.tap(() => util.clearCanvas(canvas)), rxjs.map(() => util.getImageData(canvas, ctx, video, canvasSizeInfo, bas64Format, imageType)), rxjs.mergeMap(imageData => rxjs.from(frameCallback(imageData.data, imageData.base64, cardType, type)).pipe(rxjs.catchError(e => {
+        // send to fast, ignore
+        if (e instanceof core.AuthmeError && e.code === core.ErrorCode.RECOGNITION_NOT_AVAILABLE) {
+          return rxjs.EMPTY;
+        }
+        throw e;
+      }), rxjs.filter(x => !!x), rxjs.map(result => ({
+        imageData,
+        result
+      })), rxjs.tap(() => received = true))))));
+    };
+    const autoCapture = canvasSizeInfo => {
+      return rxjs.of(canvasSizeInfo).pipe(handleOcrSendFrame(canvasSizeInfo, image, video, config.recognition, 30, false, 'jpg', cardType, type), rxjs.tap(x => applyTextByResult(x.result)), rxjs.filter(({
+        result
+      }) => result.eStatus === idRecognition.EAuthMeCardOCRStatus.Pass || result.eStatus === idRecognition.EAuthMeMRZServiceStatus.Success), rxjs.take(1), rxjs.tap(() => {
+        if (countdownCaptureTimer && countdownCaptureTimer.end && !countdownCaptureTimer.end()) {
+          const remainingCountTime = Math.floor(countdownCaptureTimer.pause());
+          captureTimeoutTimer = remainingCountTime;
+        }
+        setCardBorderColor('pass');
+        statusText.textContent = translateService.translate('sdk.general.verify.success');
+        lottie__default["default"].stop('scan');
+        if (toastManualCapture) {
+          toastManualCapture.clear();
+        }
+        util.hideElement(scanAnimationContainer);
+      }), rxjs.switchMap(resp => rxjs.of(true).pipe(rxjs.tap(() => {
+        util.hideElement(scanAnimationContainer);
+      }), rxjs.map(() => resp))), rxjs.switchMap(({
+        result
+      }) => rxjs.from(type === idRecognition.EAuthMeCardClass.Passport && config.ocrConfig.disablePassportConfirm ? rxjs.of(false) : checkConfirmImage(result.imageData, result.iWidth, result.iHeight)).pipe(rxjs.switchMap(needRetry => {
+        if (countdownCaptureTimer && countdownCaptureTimer.end) {
+          if (needRetry && !countdownCaptureTimer.end()) {
+            countdownCaptureTimer = countdownTimer(captureTimeoutTimer, () => {
+              util.showElement(captureBtn);
+              toastManualCapture = toast({
+                message: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_19494_3109)"><path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.5L9 3.75H15L16.5 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_19494_3109"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>' + translateService.translate('sdk.general.manualCapture'),
+                transition: true
+              });
+            });
+            countdownCaptureTimer.init();
+          }
+          if (!needRetry) {
+            countdownCaptureTimer.clear();
+            util.hideElement(captureBtn);
+          }
+        }
+        util.startSpinner(translateService.translate('sdk.general.uploading'));
+        return needRetry ? rxjs.of(true) : rxjs.from(config.confirmImage({
+          type,
+          cardType
+        })).pipe(rxjs.tap(() => sendStatusAction$1(core.StatusAction.Uploading)), rxjs.map(confirmResp => !confirmResp));
+      }), rxjs.tap(() => {
+        util.hideElement(confirmImageContainer);
+        util.hideElement(confirmContainer);
+        util.stopSpinner();
+        showVideoElement();
+      }), rxjs.switchMap(needRetry => needRetry ? recognition(true) : rxjs.of(true)))));
+    };
+    const recognition = retry => {
+      return init(retry).pipe(rxjs.tap(() => {
+        setStatusView(core.StatusView.Running);
+        if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
+          sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
+        }
+      }), rxjs.switchMap(canvasSizeInfo => {
+        if (type !== idRecognition.EAuthMeCardClass.Passport && !retry) {
+          if (ocrEngineConfig.captureTimeout > 0) {
+            countdownCaptureTimer = countdownTimer(ocrEngineConfig.captureTimeout, () => {
+              util.showElement(captureBtn);
+              toastManualCapture = toast({
+                message: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_19494_3109)"><path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.5L9 3.75H15L16.5 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_19494_3109"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>' + translateService.translate('sdk.general.manualCapture'),
+                transition: true
+              });
+            });
+            countdownCaptureTimer.init();
+            return rxjs.race(manualCapture(false), autoCapture(canvasSizeInfo));
+          }
+          if (ocrEngineConfig.captureTimeout === 0) {
+            return rxjs.race(manualCapture(true), autoCapture(canvasSizeInfo));
+          }
+        }
+        return autoCapture(canvasSizeInfo);
+      }));
+    };
     return recognition(false);
   }
   function createFlowByType(type, cardType, cardTypeConfig) {
@@ -26171,7 +26370,7 @@ function startOCR(config) {
       setUIByType(type, cardType);
     }), rxjs.switchMap(() => {
       if (type === idRecognition.EAuthMeCardClass.TWN_IDCard_Front && config.ocrConfig.needAntiFraud) {
-        return rxjs.from(startAntiFraud(type)).pipe(rxjs.switchMap(() => {
+        return rxjs.from(startAntiFraud(type, cardType)).pipe(rxjs.switchMap(() => {
           hideFrameUI(false);
           return startOCR(type, cardType);
         }));
@@ -26183,7 +26382,7 @@ function startOCR(config) {
           thicknessStart: config.thicknessStart,
           onThicknessFrame: config.onThicknessFrame,
           confirmThickness: config.confirmThickness
-        }, cardRotateByStage, getCardBorderPoint, setBorderType, setBorderSuccess, scanAnimationContainer, successAnimationDom, frameImage, frameText, facingMode, ocrEngineConfig, sdkFlowTimeout, makeSDKFlowTimeout, image, video, retryBtn, completeBtn, confirmImageContainer);
+        }, cardRotateByStage, getCardBorderPoint, setBorderType, setBorderSuccess, scanAnimationContainer, successContainer, frameImage, frameText, facingMode, ocrEngineConfig, sdkFlowTimeout, makeSDKFlowTimeout, image, video, retryBtn, completeBtn, confirmImageContainer, confirmContainer);
       } else if (cardType.toLocaleLowerCase().includes('front')) {
         hideFrameUI(false);
         return startOCR(type, cardType);
@@ -26284,6 +26483,10 @@ function startOCR(config) {
     }), rxjs.takeUntil(unsubscribe$), rxjs.finalize(() => {
       document.body.removeChild(container);
       sendStatusAction$1(core.StatusAction.BtnClose);
+      countdownCaptureTimer && countdownCaptureTimer.clear && countdownCaptureTimer.clear();
+      if (toastManualCapture) {
+        toastManualCapture.clear();
+      }
     }));
     const detectScreenResizeError$ = handleScreenResizeError$(detectScreenResize$(), unsubscribe$, () => !flags.onConfirm);
     return rxjs.merge(flow$, cancel$, detectScreenResizeError$, timeout$).pipe(rxjs.take(1));
@@ -26302,7 +26505,7 @@ function startOCR(config) {
     util.showElement(lottieMask);
     setHeaderText(translateService.translate('verify.idCard'), translateService.translate('sdk.verify.header.stepper', {
       current: 1,
-      total: 3
+      total: stepTotal()
     }));
     lottie__default["default"].loadAnimation({
       container: antiFraudInstructionAnimationContainer,
@@ -26356,6 +26559,7 @@ function startOCR(config) {
       rxjs.tap(() => sendStatusAction$1(core.StatusAction.Show));
       showVideoElement(false);
       util.showElement(confirmImageContainer);
+      util.showElement(confirmContainer);
       if (data) {
         const ctx2 = image.getContext('2d');
         image.width = width;
@@ -26404,7 +26608,7 @@ function startOCR(config) {
   }
   function setUIByType(type, cardType) {
     setTextByType(type, cardType);
-    setHeaderByType(type);
+    setHeaderByType(cardType);
     setCardSize(type);
   }
   function setTextByType(type, cardType) {
@@ -26452,46 +26656,25 @@ function startOCR(config) {
     }
     imageTypeText.textContent = translateService.translate(titleConfirmKey !== null && titleConfirmKey !== void 0 ? titleConfirmKey : 'verify.confirm.unexpected');
   }
-  function setHeaderByType(type) {
-    const typeMap = {
-      EAuthMeCardClass_Passport: 'sdk.verify.passport.header',
-      EAuthMeCardClass_TWN_IDCard_Front: 'sdk.verify.idCard.header',
-      EAuthMeCardClass_TWN_IDCard_Back: 'sdk.verify.idCard.header',
-      EAuthMeCardClass_TWN_DriverLicense_Front: 'sdk.verify.driverLicense.header',
-      EAuthMeCardClass_TWN_DriverLicense_Back: 'sdk.verify.driverLicense.header',
-      EAuthMeCardClass_TWN_HealthCard_Front: 'sdk.verify.healthCard.header',
-      EAuthMeCardClass_JPN_IDCard_Front: 'sdk.verify.myNumberCard.header',
-      EAuthMeCardClass_JPN_IDCard_Back: 'sdk.verify.myNumberCard.header',
-      EAuthMeCardClass_JPN_IDCard_Thickness: 'sdk.verify.myNumberCard.header',
-      EAuthMeCardClass_TWN_ResidentCard_Front: 'sdk.verify.residentCard.header',
-      EAuthMeCardClass_TWN_ResidentCard_Back: 'sdk.verify.residentCard.header'
-    };
-    if (type.includes('Health') || type.includes('Passport')) {
-      setHeaderText(translateService.translate(typeMap[type]), translateService.translate('sdk.verify.header.stepper', {
-        current: 1,
-        total: 1
-      }));
-    } else {
-      if (type.includes('Front')) {
-        const stepNow = type.includes('TWN_IDCard') ? translateService.translate('sdk.verify.header.stepper', {
-          current: 2,
-          total: 3
-        }) : translateService.translate('sdk.verify.header.stepper', {
-          current: 1,
-          total: 2
-        });
-        setHeaderText(translateService.translate(typeMap[type]), stepNow);
-      } else {
-        const stepNow = type.includes('TWN_IDCard') ? translateService.translate('sdk.verify.header.stepper', {
-          current: 3,
-          total: 3
-        }) : translateService.translate('sdk.verify.header.stepper', {
-          current: 2,
-          total: 2
-        });
-        setHeaderText(translateService.translate(typeMap[type]), stepNow);
-      }
+  const stepTotal = () => {
+    let total = config.cardTypes.length;
+    if (config.ocrConfig.needAntiFraud) {
+      total = total + 1;
     }
+    return total;
+  };
+  const setpCurrent = type => {
+    let current = config.cardTypes.indexOf(type) + 1;
+    if (isTutorialFinish) {
+      current++;
+    }
+    return current;
+  };
+  function setHeaderByType(cardType) {
+    setHeaderText(translateService.translate(idRecognition.cardTypeHeader(cardType)), translateService.translate('sdk.verify.header.stepper', {
+      current: setpCurrent(cardType),
+      total: stepTotal()
+    }));
   }
   function setCardSize(type) {
     var _a, _b;
@@ -26500,17 +26683,22 @@ function startOCR(config) {
       CARD_SIZE[CARD_SIZE["MAX_WIDTH_RATE"] = 0.95] = "MAX_WIDTH_RATE";
       CARD_SIZE[CARD_SIZE["MAX_HEIGHT_RATE"] = 0.6] = "MAX_HEIGHT_RATE";
       CARD_SIZE[CARD_SIZE["MAX_HEIGHT_RATE_IPHONE14PRO"] = 0.235] = "MAX_HEIGHT_RATE_IPHONE14PRO";
+      CARD_SIZE[CARD_SIZE["POSSPORT_MAX_WIDTH_RATE"] = 0.9] = "POSSPORT_MAX_WIDTH_RATE";
       CARD_SIZE[CARD_SIZE["DRIVER_LICENSE_RATIO"] = 1.4166666666666667] = "DRIVER_LICENSE_RATIO";
       CARD_SIZE[CARD_SIZE["ID_CARD_RATIO"] = 1.5740740740740742] = "ID_CARD_RATIO";
       CARD_SIZE[CARD_SIZE["PASSPORT_RATIO"] = 1.4597701149425288] = "PASSPORT_RATIO";
     })(CARD_SIZE || (CARD_SIZE = {}));
     let heightRate = CARD_SIZE.MAX_HEIGHT_RATE;
+    let widthRate = CARD_SIZE.MAX_WIDTH_RATE;
     if (util.isIphone14proOrProMax() && config.ocrConfig.hotfixIphone14proCameraBlur) {
       heightRate = CARD_SIZE.MAX_HEIGHT_RATE_IPHONE14PRO;
     }
+    if (type === idRecognition.EAuthMeCardClass.Passport) {
+      widthRate = CARD_SIZE.POSSPORT_MAX_WIDTH_RATE;
+    }
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
-    const maxWidth = windowWidth * CARD_SIZE.MAX_WIDTH_RATE;
+    const maxWidth = windowWidth * widthRate;
     const maxHeight = windowHeight * heightRate;
     let ratio = CARD_SIZE.ID_CARD_RATIO;
     if (type === idRecognition.EAuthMeCardClass.TWN_DriverLicense_Back || type === idRecognition.EAuthMeCardClass.TWN_DriverLicense_Front) {
@@ -26565,8 +26753,15 @@ function startOCR(config) {
     } = renderCameraSwitch({
       container: videoContainer
     });
+    let hint = true;
     cameraHint.innerHTML = translateService.translate('sdk.general.verify.error.switchCamera');
     cameraSwitchContainer.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
+      if (hint) {
+        setTimeout(() => {
+          cameraHint.outerHTML = '';
+          hint = false;
+        }, 300);
+      }
       const _nextCameraNumber = parseInt(switchText.textContent) + 1;
       const nextCameraNumber = _nextCameraNumber > backCameraList.length ? 1 : _nextCameraNumber;
       switchText.textContent = (nextCameraNumber > backCameraList.length ? 1 : nextCameraNumber) + '';
@@ -26693,6 +26888,8 @@ const renderExtraUI = config => {
   // Set init text
   titleText.innerHTML = translateService.translate('extra.title');
   // Picture
+  const confirmContainer = document.createElement('div');
+  confirmContainer.classList.add('confirm_container');
   const confirmImageContainer = document.createElement('div');
   confirmImageContainer.classList.add('confirm-image-container', 'confirm-image-container-extra');
   const confirmImageWapper = document.createElement('div');
@@ -26724,7 +26921,8 @@ const renderExtraUI = config => {
   confirmImageWapper.appendChild(imageContainer);
   //confirmImageContainer.appendChild(imageLineLineDesktop);
   confirmImageWapper.appendChild(imageFooter);
-  config.container.appendChild(confirmImageContainer);
+  confirmContainer.appendChild(confirmImageContainer);
+  config.container.appendChild(confirmContainer);
   // Other picture
   const checkOtherImageContainer = document.createElement('div');
   checkOtherImageContainer.classList.add('check-other-image-container', 'check-other-image-container-extra');
@@ -26754,6 +26952,7 @@ const renderExtraUI = config => {
     titleTextPanel,
     titleText,
     confirmImageContainer,
+    confirmContainer,
     checkOtherImageContainer,
     imageTypeText,
     retryBtn,
@@ -26789,6 +26988,7 @@ function startExtra(config) {
   const {
     titleTextPanel,
     confirmImageContainer,
+    confirmContainer,
     checkOtherImageContainer,
     retryBtn,
     completeBtn,
@@ -26832,6 +27032,7 @@ function startExtra(config) {
     }
     showVideoElement();
     util.hideElement(confirmImageContainer);
+    util.hideElement(confirmContainer);
   }))), rxjs.switchMap(needRetry => needRetry ? rxjs.of(true) : config.extraConfig.continue === false ? reset() : rxjs.from(takeOtherImage()).pipe(rxjs.switchMap(needContinue => needContinue ? rxjs.of(true) : rxjs.of(false)), rxjs.tap(() => {
     if (config.extraConfig.border == 'none') {
       util.hideElement(cardborderContainer);
@@ -26873,6 +27074,7 @@ function startExtra(config) {
       const height = sizeInfo.canvasHeight;
       showVideoElement(false);
       util.showElement(confirmImageContainer);
+      util.showElement(confirmContainer);
       const ctx2 = image.getContext('2d');
       image.width = width;
       image.height = height;
@@ -27408,7 +27610,6 @@ class LivenessModule {
 function initFrameView(cardPoints, scanId, faceMode, scanView, cardType, cardTypeConfig, setBorderType, setCardBorderColor, setBorderSuccess) {
   return __awaiter(this, void 0, void 0, function* () {
     const scanAnimationContainer = document.querySelector('.scan');
-    const successAnimationDom = document.querySelector('.success');
     document.querySelector('#authme_frame_border');
     const videoContainer = document.querySelector('.video-container');
     const windowWidth = videoContainer.offsetWidth;
@@ -27416,9 +27617,6 @@ function initFrameView(cardPoints, scanId, faceMode, scanView, cardType, cardTyp
     const lottieScanSetting = {
       scanAnimationContainer: scanAnimationContainer
     };
-    const lottieSuccessSetting = {
-      animationContainer: successAnimationDom
-    };
     function frameImage(faceMode, zIndex, base64, color, opacity) {
       color = color !== null && color !== void 0 ? color : OcrFrame.imageColor;
       opacity = opacity !== null && opacity !== void 0 ? opacity : OcrFrame.imageOpacity;
@@ -27495,7 +27693,6 @@ function initFrameView(cardPoints, scanId, faceMode, scanView, cardType, cardTyp
       `);
       dom.textContent = text;
     }
-    initSuccessAnimation(lottieSuccessSetting);
     const scanViewSetting = {
       document_type: '',
       border: {
@@ -27701,6 +27898,29 @@ class MRZModule {
               // 2. 由於 engine-lib 限制，getFinalResult 必須要在 stop 之後呼叫。
               const finalResult = yield this.mrzService.getFinalResult();
               latestTField = JSON.parse(yield this.mrzService.toJson(finalResult));
+              if (latestTField['birthDateCheckDigit']) {
+                delete latestTField['birthDateCheckDigit'];
+              }
+              if (latestTField['documentNumberCheckDigit']) {
+                delete latestTField['documentNumberCheckDigit'];
+              }
+              if (latestTField['expiryDateCheckDigit']) {
+                delete latestTField['expiryDateCheckDigit'];
+              }
+              if (latestTField['optionaldataCheckDigit']) {
+                delete latestTField['optionaldataCheckDigit'];
+              }
+              if (latestTField['overallCheckDigit']) {
+                delete latestTField['overallCheckDigit'];
+              }
+              switch (latestTField.gender) {
+                case 'M':
+                  latestTField.gender = 'male';
+                  break;
+                case 'F':
+                  latestTField.gender = 'female';
+                  break;
+              }
             } else if (uploadFullFrame) {
               const image = util.UintArrayToBlob(frameWidth, frameHeight, data, virtualCanvas);
               const requestImg = yield encryptImageBase64(image);
@@ -27716,14 +27936,14 @@ class MRZModule {
               });
             }
           }),
-          confirmImage: type => __awaiter(this, void 0, void 0, function* () {
-            const docId = docInfos[type].docId;
+          confirmImage: option => __awaiter(this, void 0, void 0, function* () {
+            const docId = docInfos[option.type].docId;
             if (docId) {
-              docInfos[type].docId = '';
-              const requestImg = yield encryptImageBase64(docInfos[type].ocrOriginImg);
+              docInfos[option.type].docId = '';
+              const requestImg = yield encryptImageBase64(docInfos[option.type].ocrOriginImg);
               const report = yield this.mrzService.getReport();
               yield SendRequestWithRetry$1(() => idRecognition.uploadFrameBase64(docId, requestImg, frameIndex++, idRecognition.ResourceImageType.Recognition, report));
-              yield SendRequestWithRetry$1(() => idRecognition.finishScanDocument(docId, latestTField !== null && latestTField !== void 0 ? latestTField : {}, docInfos[type].fraudResult));
+              yield SendRequestWithRetry$1(() => idRecognition.finishScanDocument(docId, latestTField !== null && latestTField !== void 0 ? latestTField : {}, docInfos[option.type].fraudResult));
               return true;
             } else {
               return false;
@@ -28048,7 +28268,8 @@ class OCRModule {
             }
             yield util.waitTime(100);
             return Object.assign(Object.assign({}, resp.parameters), {
-              expiredIn: resp.expiredIn
+              expiredIn: resp.expiredIn,
+              captureTimeout: config.captureTimeout
             });
           }),
           ocrStart: (points, type, setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successAnimationContainer, frameImage, frameText, faceMode, cardType, retry = false) => __awaiter(this, void 0, void 0, function* () {
@@ -28095,10 +28316,6 @@ class OCRModule {
               const lottieScanSetting = {
                 scanAnimationContainer: scanAnimationContainer
               };
-              const lottieSuccessSetting = {
-                animationContainer: successAnimationContainer
-              };
-              initSuccessAnimation(lottieSuccessSetting);
               const scanViewSetting = {
                 document_type: '',
                 border: {
@@ -28174,8 +28391,9 @@ class OCRModule {
             newParams['timeoutSec'] = 1000;
             newParams['fCardMatchTh'] = 0.5;
             newParams['fImageReflectiveTriggerTh'] = 0.15;
-            newParams['fImageThicknessTh'] = 0.3;
-            newParams['fCardDeformationTh'] = 12;
+            newParams['fImageThicknessTh'] = 0.4;
+            newParams['fCardDeformationTh'] = 10;
+            newParams['enableCardInROI'] = 1;
             yield _service.setParams(Object.assign(Object.assign({}, oldParams), newParams));
             _service.setOption({
               key: 'thickness_detector',
@@ -28216,10 +28434,6 @@ class OCRModule {
               const lottieScanSetting = {
                 scanAnimationContainer: scanAnimationContainer
               };
-              const lottieSuccessSetting = {
-                animationContainer: successAnimationContainer
-              };
-              initSuccessAnimation(lottieSuccessSetting);
               const scanViewSetting = {
                 document_type: '',
                 border: {
@@ -28445,7 +28659,7 @@ class OCRModule {
                 status: 'confirm',
                 type: type
               });
-            } else if (uploadFullFrame) {
+            } else if (uploadFullFrame && docInfos[eClass].docId !== '') {
               const image = ocrOriginImg;
               const requestImg = yield encryptImageBase64(image);
               // downloadImage(image, `${frameIndex}-${docInfos[type as EAuthMeCardClass].docId}-${new Date().getTime().toString()}.jpg`)
@@ -28460,7 +28674,7 @@ class OCRModule {
             durationTimeRecognition.end();
             return result;
           }),
-          confirmImage: (type, cardType, imageData) => __awaiter(this, void 0, void 0, function* () {
+          confirmImage: option => __awaiter(this, void 0, void 0, function* () {
             // 將二進位圖片進行加密，目前不需要使用，不確定未來是否需要，先註解
             // const encryptImage = async (blob: Blob): Promise<Blob> => {
             // const imageArrayBuffer = await blobToArrayBuffer(blob);
@@ -28471,18 +28685,23 @@ class OCRModule {
             // );
             // return base64ToBlob(resultEncrypt);
             // };
-            const docId = docInfos[cardType].docId;
+            if (option.manual) {
+              this.ocrService.stop();
+            }
+            const docId = docInfos[option.cardType].docId;
             if (docId) {
-              const needFraudOption = config.needAntiFraud && type === engine.EAuthMeCardClass.TWN_IDCard_Front;
+              const needFraudOption = config.needAntiFraud && option.type === engine.EAuthMeCardClass.TWN_IDCard_Front;
               let ocrOriginImg;
-              if (imageData) {
-                ocrOriginImg = imageData;
+              if (option.imageData) {
+                ocrOriginImg = option.imageData;
               } else {
-                ocrOriginImg = docInfos[cardType].ocrOriginImg;
+                ocrOriginImg = docInfos[option.cardType].ocrOriginImg;
               }
+              // const base64Image = await blobToBase64(ocrOriginImg);
+              // console.log('confirmImage', base64Image);
               const requestImg = yield encryptImageBase64(ocrOriginImg);
               const report = yield this.ocrService.getReport();
-              docInfos[cardType].docId = '';
+              docInfos[option.cardType].docId = '';
               modifyDeubgLog(getDebugLogsLength() - 1, {
                 report: report
               });
@@ -28490,7 +28709,7 @@ class OCRModule {
               yield SendRequestWithRetry(() => idRecognition.uploadFrameBase64(docId, requestImg, frameIndex, idRecognition.ResourceImageType.Recognition, report));
               frameIndex = 0;
               try {
-                const ocrImg = docInfos[cardType].ocrImg;
+                const ocrImg = option.imageData ? option.imageData : docInfos[option.cardType].ocrImg;
                 const _requestImg = yield encryptImageBase64(ocrImg);
                 const resp = yield SendRequestWithRetry(() => idRecognition.recognitionEncrypt(docId, _requestImg, report, idRecognition.RecognitionFileType.FlatImage));
                 if (resp.retry) {
@@ -28499,12 +28718,12 @@ class OCRModule {
                 }
                 result = unionMerge(result, resp && resp.details || {});
                 yield SendRequestWithRetry(() => idRecognition.finishScanDocument(docId, resp.details, needFraudOption ? this.fraudResult : null));
-                delete docInfos[cardType];
+                delete docInfos[option.cardType];
                 return true;
               } catch (error) {
                 console.log('confirmImage fail,retrying ');
                 console.error(error);
-                docInfos[cardType].docId = docId;
+                docInfos[option.cardType].docId = docId;
                 return false;
               }
             } else {
@@ -28513,7 +28732,7 @@ class OCRModule {
             }
           }),
           ocrCancel: (type, cardType, imageData) => __awaiter(this, void 0, void 0, function* () {
-            const docId = docInfos[cardType].docId;
+            const docId = docInfos[cardType] ? docInfos[cardType].docId : '';
             if (docId) {
               let ocrOriginImg;
               if (imageData) {
@@ -28533,7 +28752,8 @@ class OCRModule {
               frameIndex = 0;
               return true;
             } else {
-              console.error('didnt find docid , retry');
+              yield this.ocrService.stop();
+              console.warn('didnt find docid , retry');
               return false;
             }
           }),
@@ -28568,10 +28788,6 @@ class OCRModule {
                 fraudResult: null
               };
             }
-            const lottieSuccessSetting = {
-              animationContainer: successAnimationContainer
-            };
-            initSuccessAnimation(lottieSuccessSetting);
             // TODO 等開始處理防偽的時候再處理
             // if (resp.scanView && resp.scanView.enable) {
             //   setBorderType({
@@ -29115,8 +29331,8 @@ class AuthmeIdentityVerification extends engine.AuthmeFunctionModule {
 }
 
 var name = "authme/sdk";
-var version$1 = "2.7.2";
-var date = "2024-10-22T03:50:14+0000";
+var version$1 = "2.7.4";
+var date = "2024-12-04T02:44:31+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,