@authme/identity-verification 2.7.2 → 2.7.4-patch.1

package/index.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import { getTranslateInstance, EventListenerService, TrackingEvent, generateStatus, StatusDescription, StatusView, StatusAction, AuthmeError, ErrorCode, Feature, StatusEvent, setRequestLoggingFunc, setAccessToken } from '@authme/core';
 import { EAuthMeFASServiceStatus, EAuthMeIDCardAntiFraudStage as EAuthMeIDCardAntiFraudStage$1, EAuthMeCardClass as EAuthMeCardClass$1, AuthmeFunctionModule, MlEngine, EngineModule, EAuthMeEngineReturnCode } from '@authme/engine';
-import { IdRecognitionCardType, CountryCode, EAuthMeCardClass, EAuthMeIDCardAntiFraudStatus, EAuthMeIDCardAntiFraudStage, thicknessDefaultConfig, mapCardtypeToAuthmeClass, cardTypeTitle, cardTypeConfirmTitle, getRecognitionColumnOrder, EAuthMeCardOCRStatus, EAuthMeMRZServiceStatus, saveExtraDoc, initScanDocumentResourceBase64, MRZService, init, initScanDocument, uploadFrameBase64, ResourceImageType, finishScanDocument, CardOCR, IdCardAntiFraudService, recognitionEncrypt, RecognitionFileType, twoWayAuthmeCardClassMap, getCardSubTypes, getCardTypes, confirmScan } from '@authme/id-recognition';
+import { IdRecognitionCardType, CountryCode, EAuthMeCardClass, EAuthMeIDCardAntiFraudStatus, EAuthMeIDCardAntiFraudStage, thicknessDefaultConfig, mapCardtypeToAuthmeClass, cardTypeTitle, cardTypeConfirmTitle, cardTypeHeader, getRecognitionColumnOrder, EAuthMeCardOCRStatus, EAuthMeMRZServiceStatus, saveExtraDoc, initScanDocumentResourceBase64, MRZService, init, initScanDocument, uploadFrameBase64, ResourceImageType, finishScanDocument, CardOCR, IdCardAntiFraudService, recognitionEncrypt, RecognitionFileType, twoWayAuthmeCardClassMap, getCardSubTypes, getCardTypes, confirmScan } from '@authme/id-recognition';
 import { getCssVariable, RGBToLottieColor, colorToRGB, Icon, useState, clearCanvas, getImageData, isMobile, hidePopup, showPopup, waitTime, TIME_UNIT, AuthmeError as AuthmeError$1, ErrorCode as ErrorCode$1, requestCamera, showElement, asyncOnLineShowErrorMessage, getCanvasSize, startSpinner, stopSpinner, showErrorMessage, hideElement, dataURItoBlob, checkOnlineStatus, UintArrayToBlob, isIphone14proOrProMax, cropByRatio, asyncShowErrorMessage, switchCamera, asyncShowPopup, retryPromiseWithCondition, hideErrorMessage, backgroundRequest, debugTools, showErrorMessageEventName, RUN_FUNCTION_NAME, Storage, STORAGE_KEY, splitResult, combineResult, startLoadingSDK, stopLoadingSDK } from '@authme/util';
 import { mergeMap, animationFrames, filter, tap, map, from, catchError, EMPTY, of, merge, fromEvent, concatAll, takeUntil, Subject, defer, switchMap, throttleTime, take, concatMap, throwError, finalize, Observable, interval, mapTo, firstValueFrom, shareReplay, switchMapTo, takeWhile as takeWhile$1, race } from 'rxjs';
 import 'core-js/modules/es.regexp.to-string.js';
@@ -119,7 +119,8 @@ const defaultIdRecognitionConfig = {
   disablePassportConfirm: false,
   antiFraudIMetalTagValidCountTh: false,
   cardTypes: [],
-  cardTypeConfigs: []
+  cardTypeConfigs: [],
+  captureTimeout: -1
 };
 
 function setCorrectViewHeight() {
@@ -23231,6 +23232,7 @@ const renderBasicUI = userConfig => {
   video.playsInline = true;
   video.loop = true;
   video.setAttribute('webkit-playsinline', '');
+  video.setAttribute('poster', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAABmJLR0QA/wD/AP+gvaeTAAADKUlEQVR4nO3UMQEAIAzAsIF/zyBjRxMFvXpm5g1A0N0OANhigECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkfVV0C319akPEAAAAASUVORK5CYII=');
   const lottieScreen = document.createElement('div');
   lottieScreen.classList.add('lottie-screen');
   const pictureIcon = document.createElement('div');
@@ -23709,8 +23711,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 (isMobile()) {
     if (!window.visualViewport) {
@@ -23734,7 +23736,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;
@@ -24003,10 +24005,10 @@ function startLiveness(config) {
     result
   }) => applyTextByResult(result)), filter(({
     result
-  }) => result.eStatus === FasRecognitionResult.Pass && result.eStage === EAuthMeFASServiceStage.Done || result.eStatus === FasRecognitionResult.Failed), map(data => {
+  }) => result.eStatus === FasRecognitionResult.Pass && result.eStage === EAuthMeFASServiceStage.Passive || result.eStatus === FasRecognitionResult.Failed), 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) === FasRecognitionResult.Pass && ((_b = data === null || data === void 0 ? void 0 : data.result) === null || _b === void 0 ? void 0 : _b.eStage) === EAuthMeFASServiceStage.Done
+      isSuccess: ((_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.eStatus) === FasRecognitionResult.Pass && ((_b = data === null || data === void 0 ? void 0 : data.result) === null || _b === void 0 ? void 0 : _b.eStage) === EAuthMeFASServiceStage.Passive
     });
   }), take(1),
   /**
@@ -24241,21 +24243,6 @@ const initScanAnimation = params => {
   });
   lottie.stop('scan');
 };
-const initSuccessAnimation = params => {
-  lottie.destroy('success');
-  lottie.loadAnimation({
-    container: params.animationContainer,
-    renderer: 'svg',
-    loop: false,
-    autoplay: true,
-    name: 'success',
-    animationData: success({
-      color: '#7CFFF9',
-      opacity: 1
-    })
-  });
-  lottie.stop('success');
-};
 const renderCameraSwitch = config => {
   const cameraSwitchContainer = document.createElement('div');
   const cameraSwitch = document.createElement('div');
@@ -24305,21 +24292,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');
@@ -24343,6 +24338,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');
@@ -24371,7 +24368,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,
@@ -24381,11 +24379,12 @@ const renderOCRUI = config => {
     statusTextPanel,
     lottieMask,
     arrowAnimationContainer,
-    successAnimationContainer,
-    successAnimationDom,
+    successContainer,
+    successBlockDom,
     scanAnimationContainer,
     antiFraudInstructionAnimationContainer,
     confirmImageContainer,
+    confirmContainer,
     imageTypeText,
     // cardborder,
     // cardborderContainer,
@@ -25297,7 +25296,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) {
@@ -25326,24 +25326,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');
@@ -25369,16 +25371,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);
 };
@@ -25406,9 +25409,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) {
@@ -25420,10 +25425,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
   };
@@ -25431,7 +25447,7 @@ const countdownTimer = (time, doSomething) => {
 
 const translateService = 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;
@@ -25448,6 +25464,7 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
     videoToCanvas(sizeInfo, data);
     showVideoElement(false);
     showElement(confirmImageContainer);
+    showElement(confrimContainer);
     const retryEvents = fromEvent(retryBtn, 'click').pipe(mapTo(true));
     const confirmEvents = fromEvent(completeBtn, 'click').pipe(mapTo(false));
     const allEvents$ = merge(retryEvents, confirmEvents);
@@ -25500,11 +25517,6 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
         sendStatusDescription$1(StatusDescription.WrongCardType);
         setCardBorderColor('error');
         break;
-      case EAuthMeIDCardAntiFraudStatus.CardThicknessFailed:
-        statusText.textContent = translateService.translate('sdk.general.verify.error.CardThicknessFailed');
-        sendStatusDescription$1(StatusDescription.CardThicknessFailed);
-        setCardBorderColor('error');
-        break;
       case EAuthMeIDCardAntiFraudStatus.Reflective:
         statusText.textContent = translateService.translate('sdk.general.verify.error.reflective');
         sendStatusDescription$1(StatusDescription.Reflective);
@@ -25545,22 +25557,11 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
         statusText.textContent = translateService.translate('sdk.general.verify.error.cardCutByCamera');
         break;
       case EAuthMeIDCardAntiFraudStatus.CardNotInROI:
-        statusText.textContent = translateService.translate('verify.error.CardNotInROI');
+        statusText.textContent = translateService.translate('sdk.general.verify.error.missmatch');
         break;
       case EAuthMeIDCardAntiFraudStatus.CardTooSmall:
         statusText.textContent = translateService.translate('sdk.general.verify.error.getCloser');
         break;
-      case EAuthMeIDCardAntiFraudStatus.NeedHoldCard:
-        statusText.textContent = translateService.translate('sdk.general.verify.error.needHoldCard');
-        break;
-      case EAuthMeIDCardAntiFraudStatus.StagePass:
-        statusText.textContent = translateService.translate('sdk.general.verify.error.stagePass');
-        setCardBorderColor('pass');
-        break;
-      case EAuthMeIDCardAntiFraudStatus.Pass:
-        setCardBorderColor('pass');
-        statusText.textContent = translateService.translate('sdk.general.verify.error.pass');
-        break;
       case EAuthMeIDCardAntiFraudStatus.Failed:
         setCardBorderColor('error');
         statusText.textContent = translateService.translate('sdk.general.verify.error.pass');
@@ -25603,7 +25604,8 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
           onConfirm: () => {
             observer.next(canvasSizeInfo);
             observer.complete();
-          }
+          },
+          copyRight: translateService.translate('sdk.general.footer')
         });
       });
     } else {
@@ -25643,6 +25645,9 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
       result
     }) => {
       if (thicknessTimer.end()) {
+        hideElement(confirmImageContainer);
+        hideElement(confrimContainer);
+        showVideoElement(true);
         startSpinner(translateService.translate('sdk.general.uploading'), true);
         videoToCanvas(canvasSizeInfo, result.imageData);
         return config.confirmThickness ? config.confirmThickness(generateImage(), cardType) : of(false);
@@ -25653,6 +25658,7 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
       }), switchMap(confirmResp => {
         showVideoElement(true);
         hideElement(confirmImageContainer);
+        hideElement(confrimContainer);
         stopSpinner();
         if (confirmResp) {
           return autoDetectProcess(true);
@@ -25678,6 +25684,9 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
       // 當 end() 函數返回 false 時繼續
       finalize$1(() => __awaiter(void 0, void 0, void 0, function* () {
         if (thicknessTimer.end()) {
+          hideElement(confirmImageContainer);
+          hideElement(confrimContainer);
+          showVideoElement(true);
           startSpinner(translateService.translate('sdk.general.uploading'), true);
           const sizeInfo = yield getCanvasSize(video);
           videoToCanvas(sizeInfo);
@@ -25697,10 +25706,11 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
           return needRetry ? of(true) : from(config.confirmThickness ? config.confirmThickness(generateImage(), cardType) : of(false)).pipe(tap(() => sendStatusAction$1(StatusAction.Uploading)), map(confirmResp => !confirmResp));
         }), tap(confirmResp => {
           hideElement(confirmImageContainer);
+          hideElement(confrimContainer);
           stopSpinner();
           showVideoElement(true);
+          checkTimeout.unsubscribe(); // 取消 interval$ 的訂閱
           if (!confirmResp) {
-            checkTimeout.unsubscribe(); // 取消 interval$ 的訂閱
             hideElement(captureBtn);
             observer.next(canvasSizeInfo);
           }
@@ -25726,6 +25736,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 ? Feature.OCRFraud : Feature.OCR);
 };
@@ -25749,7 +25816,8 @@ function startOCR(config) {
     enableManualUpload: false,
     fraudRetryTimes: 1,
     fraudTimeout: 52,
-    fraudMaxFps: 2
+    fraudMaxFps: 2,
+    captureTimeout: config.ocrConfig.captureTimeout
   };
   let cardSizeInfo = {
     width: 0,
@@ -25790,9 +25858,10 @@ function startOCR(config) {
     lottieMask,
     arrowAnimationContainer,
     scanAnimationContainer,
-    successAnimationDom,
+    successContainer,
     antiFraudInstructionAnimationContainer,
     confirmImageContainer,
+    confirmContainer,
     imageTypeText,
     retryBtn,
     confirmBtn,
@@ -25825,6 +25894,9 @@ function startOCR(config) {
     stopAnimate
   } = renderCardRotateAnimate(arrowAnimationContainer);
   setCorrectViewHeight();
+  let countdownCaptureTimer;
+  let toastManualCapture = null;
+  let captureTimeoutTimer;
   const canvasSizeInfo$ = merge(defer(() => requestCamera({
     video,
     facingMode: 'back',
@@ -25860,7 +25932,7 @@ function startOCR(config) {
       });
     }), expiredIn * TIME_UNIT.SECOND);
   }
-  function startAntiFraud(type) {
+  function startAntiFraud(type, cardType) {
     const animateInterval = 2 * TIME_UNIT.SECOND;
     const nextAnimateInterval = 6 * TIME_UNIT.SECOND;
     let needDeformationCount = 0;
@@ -25946,7 +26018,7 @@ function startOCR(config) {
           statusText.textContent = translateService.translate('sdk.general.verify.error.cardCutByCamera');
           break;
         case EAuthMeIDCardAntiFraudStatus.CardNotInROI:
-          statusText.textContent = translateService.translate('verify.error.CardNotInROI');
+          statusText.textContent = translateService.translate('sdk.general.verify.error.missmatch');
           break;
         case EAuthMeIDCardAntiFraudStatus.CardTooSmall:
           statusText.textContent = translateService.translate('sdk.general.verify.error.getCloser');
@@ -25987,7 +26059,7 @@ function startOCR(config) {
         statusText.classList.remove('non-empty');
       }
     };
-    const antiFraudStart$ = of(true).pipe(switchMap(() => checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), switchMap(() => canvasSizeInfo$), switchMap(canvasSizeInfo => from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(switchMap(() => config.antiFraudStart(getCardBorderPoint(), setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successAnimationDom, frameImage, frameText, facingMode)), tap(() => __awaiter(this, void 0, void 0, function* () {
+    const antiFraudStart$ = of(true).pipe(switchMap(() => checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), switchMap(() => canvasSizeInfo$), switchMap(canvasSizeInfo => from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(switchMap(() => config.antiFraudStart(getCardBorderPoint(), setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successContainer, frameImage, frameText, facingMode)), tap(() => __awaiter(this, void 0, void 0, function* () {
       setStatusView(StatusView.Aligning);
       if (buttonDisable$) {
         const cardMatchROI = config.getCardMatchROI ? yield config.getCardMatchROI() : undefined;
@@ -26028,9 +26100,10 @@ function startOCR(config) {
       statusText.classList.remove('non-empty');
       setCardBorderColor('pass');
       hideElement(arrowAnimationContainer);
-      lottie.play('success');
+      successContainer.classList.remove('hide');
     }), switchMap(() => waitTime(2000)), tap(() => {
-      lottie.stop('success');
+      setHeaderByType(cardType);
+      successContainer.classList.add('hide');
     }));
     antiFraudStart$.pipe(
     //workaround?: 因目前Frontal timeout會直接Failed，所以不能用$handleError來作為停止條件。
@@ -26048,6 +26121,7 @@ function startOCR(config) {
     if (!config.ocrConfig.needOCR && type === EAuthMeCardClass.TWN_IDCard_Front) {
       return of(true);
     }
+    let captureBtn;
     // if (config.ocrConfig.needAntiFraud) {
     const point = getCardBorderPoint();
     setCardPoints(point.map(([x, y]) => ({
@@ -26107,7 +26181,7 @@ function startOCR(config) {
         showCameraSwitchButton(deviceMetas);
       }
     };
-    const init = retry => canvasSizeInfo$.pipe(take(1), switchMap(canvasSizeInfo => from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(switchMap(() => checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), switchMap(() => config.ocrStart(getCardBorderPoint(), type, setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successAnimationDom, frameImage, frameText, facingMode, cardType, retry)), tap(() => {
+    const init = retry => canvasSizeInfo$.pipe(take(1), switchMap(canvasSizeInfo => from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(switchMap(() => checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), switchMap(() => config.ocrStart(getCardBorderPoint(), type, setBorderType, setCardBorderColor, setBorderSuccess, scanAnimationContainer, successContainer, frameImage, frameText, facingMode, cardType, retry)), tap(() => {
       tiltFrame(false);
       stopSpinner();
       showElement(scanAnimationContainer);
@@ -26116,41 +26190,167 @@ function startOCR(config) {
       lottie.play('scan');
       showElement(scanAnimationContainer);
     }), map(() => canvasSizeInfo))));
-    setCardBorderColor(null);
-    const recognition = retry => init(retry).pipe(tap(() => {
-      setStatusView(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);
       }
-    }), switchMap(canvasSizeInfo => of(canvasSizeInfo).pipe(sendFrame(canvasSizeInfo, image, video, config.recognition, 30, false, 'jpg', cardType, undefined, type), tap(x => applyTextByResult(x.result)), filter(({
-      result
-    }) => result.eStatus === EAuthMeCardOCRStatus.Pass || result.eStatus === 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;
-    // }),
-    take(1), tap(() => {
-      setCardBorderColor('pass');
-      statusText.textContent = translateService.translate('sdk.general.verify.success');
-      lottie.stop('scan');
-      hideElement(scanAnimationContainer);
-    }), switchMap(resp => of(true).pipe(tap(() => {
-      hideElement(scanAnimationContainer);
-    }), map(() => resp))), switchMap(({
-      result
-    }) => from(type === EAuthMeCardClass.Passport && config.ocrConfig.disablePassportConfirm ? of(false) : checkConfirmImage(result.imageData, result.iWidth, result.iHeight)).pipe(switchMap(needRetry => {
-      startSpinner(translateService.translate('sdk.general.uploading'));
-      return needRetry ? of(true) : from(config.confirmImage(type, cardType)).pipe(tap(() => sendStatusAction$1(StatusAction.Uploading)), map(confirmResp => !confirmResp));
-    }), tap(() => {
-      hideElement(confirmImageContainer);
-      stopSpinner();
-      showVideoElement();
-    }), switchMap(needRetry => needRetry ? recognition(true) : of(true)))))));
+    };
+    const checkConfirmImageManual = (sizeInfo, data) => __awaiter(this, void 0, void 0, function* () {
+      videoToCanvas(sizeInfo, data);
+      showVideoElement(false);
+      showElement(confirmImageContainer);
+      showElement(confirmContainer);
+      const retryEvents = fromEvent(retryBtn, 'click').pipe(mapTo(true));
+      const confirmEvents = fromEvent(completeBtn, 'click').pipe(mapTo(false));
+      const allEvents$ = merge(retryEvents, confirmEvents);
+      return yield firstValueFrom(allEvents$.pipe());
+    });
+    const manualCapture = show => {
+      captureBtn = captureButton();
+      if (captureBtn && show) {
+        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 fromEvent(captureBtn, 'click').pipe(switchMap(() => getCanvasSize(video)), switchMap(canvasSizeInfo => {
+        ocrSendFrameAnimation = true;
+        lottie.stop('scan');
+        hideElement(scanAnimationContainer);
+        if (toastManualCapture) {
+          toastManualCapture.clear();
+        }
+        return from(type === EAuthMeCardClass.Passport && config.ocrConfig.disablePassportConfirm ? of(false) : checkConfirmImageManual(canvasSizeInfo)).pipe(switchMap(needRetry => {
+          startSpinner(translateService.translate('sdk.general.uploading'));
+          if (needRetry) {
+            hideElement(confirmImageContainer);
+            hideElement(confirmContainer);
+            stopSpinner();
+            showVideoElement();
+            lottie.play('scan');
+            showElement(scanAnimationContainer);
+          }
+          return needRetry ? of(true) : from(config.confirmImage({
+            type,
+            cardType,
+            imageData: dataURItoBlob(image.toDataURL('image/jpeg', 0.85)),
+            manual: true
+          })).pipe(tap(() => sendStatusAction$1(StatusAction.Uploading)), map(confirmResp => !confirmResp));
+        }), switchMap(needRetry => {
+          if (needRetry) {
+            ocrSendFrameAnimation = false;
+            return recognition(true).pipe(map(() => true));
+          } else {
+            hideElement(captureBtn);
+            hideElement(confirmImageContainer);
+            hideElement(confirmContainer);
+            stopSpinner();
+            showVideoElement();
+            lottie.play('scan');
+            showElement(scanAnimationContainer);
+            return of(true);
+          }
+        }), 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(mergeMap(() => animationFrames().pipe(limitFPS(fps), filter(() => received && !ocrSendFrameAnimation), tap(() => received = false), tap(() => clearCanvas(canvas)), map(() => getImageData(canvas, ctx, video, canvasSizeInfo, bas64Format, imageType)), mergeMap(imageData => from(frameCallback(imageData.data, imageData.base64, cardType, type)).pipe(catchError(e => {
+        // send to fast, ignore
+        if (e instanceof AuthmeError && e.code === ErrorCode.RECOGNITION_NOT_AVAILABLE) {
+          return EMPTY;
+        }
+        throw e;
+      }), filter(x => !!x), map(result => ({
+        imageData,
+        result
+      })), tap(() => received = true))))));
+    };
+    const autoCapture = canvasSizeInfo => {
+      return of(canvasSizeInfo).pipe(handleOcrSendFrame(canvasSizeInfo, image, video, config.recognition, 30, false, 'jpg', cardType, type), tap(x => applyTextByResult(x.result)), filter(({
+        result
+      }) => result.eStatus === EAuthMeCardOCRStatus.Pass || result.eStatus === EAuthMeMRZServiceStatus.Success), take(1), 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.stop('scan');
+        if (toastManualCapture) {
+          toastManualCapture.clear();
+        }
+        hideElement(scanAnimationContainer);
+      }), switchMap(resp => of(true).pipe(tap(() => {
+        hideElement(scanAnimationContainer);
+      }), map(() => resp))), switchMap(({
+        result
+      }) => from(type === EAuthMeCardClass.Passport && config.ocrConfig.disablePassportConfirm ? of(false) : checkConfirmImage(result.imageData, result.iWidth, result.iHeight)).pipe(switchMap(needRetry => {
+        if (countdownCaptureTimer && countdownCaptureTimer.end) {
+          if (needRetry && !countdownCaptureTimer.end()) {
+            countdownCaptureTimer = countdownTimer(captureTimeoutTimer, () => {
+              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();
+            hideElement(captureBtn);
+          }
+        }
+        startSpinner(translateService.translate('sdk.general.uploading'));
+        return needRetry ? of(true) : from(config.confirmImage({
+          type,
+          cardType
+        })).pipe(tap(() => sendStatusAction$1(StatusAction.Uploading)), map(confirmResp => !confirmResp));
+      }), tap(() => {
+        hideElement(confirmImageContainer);
+        hideElement(confirmContainer);
+        stopSpinner();
+        showVideoElement();
+      }), switchMap(needRetry => needRetry ? recognition(true) : of(true)))));
+    };
+    const recognition = retry => {
+      return init(retry).pipe(tap(() => {
+        setStatusView(StatusView.Running);
+        if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
+          sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
+        }
+      }), switchMap(canvasSizeInfo => {
+        if (type !== EAuthMeCardClass.Passport && !retry) {
+          if (ocrEngineConfig.captureTimeout > 0) {
+            countdownCaptureTimer = countdownTimer(ocrEngineConfig.captureTimeout, () => {
+              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 race(manualCapture(false), autoCapture(canvasSizeInfo));
+          }
+          if (ocrEngineConfig.captureTimeout === 0) {
+            return race(manualCapture(true), autoCapture(canvasSizeInfo));
+          }
+        }
+        return autoCapture(canvasSizeInfo);
+      }));
+    };
     return recognition(false);
   }
   function createFlowByType(type, cardType, cardTypeConfig) {
@@ -26163,7 +26363,7 @@ function startOCR(config) {
       setUIByType(type, cardType);
     }), switchMap(() => {
       if (type === EAuthMeCardClass.TWN_IDCard_Front && config.ocrConfig.needAntiFraud) {
-        return from(startAntiFraud(type)).pipe(switchMap(() => {
+        return from(startAntiFraud(type, cardType)).pipe(switchMap(() => {
           hideFrameUI(false);
           return startOCR(type, cardType);
         }));
@@ -26175,7 +26375,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);
@@ -26276,6 +26476,10 @@ function startOCR(config) {
     }), takeUntil(unsubscribe$), finalize(() => {
       document.body.removeChild(container);
       sendStatusAction$1(StatusAction.BtnClose);
+      countdownCaptureTimer && countdownCaptureTimer.clear && countdownCaptureTimer.clear();
+      if (toastManualCapture) {
+        toastManualCapture.clear();
+      }
     }));
     const detectScreenResizeError$ = handleScreenResizeError$(detectScreenResize$(), unsubscribe$, () => !flags.onConfirm);
     return merge(flow$, cancel$, detectScreenResizeError$, timeout$).pipe(take(1));
@@ -26294,7 +26498,7 @@ function startOCR(config) {
     showElement(lottieMask);
     setHeaderText(translateService.translate('verify.idCard'), translateService.translate('sdk.verify.header.stepper', {
       current: 1,
-      total: 3
+      total: stepTotal()
     }));
     lottie.loadAnimation({
       container: antiFraudInstructionAnimationContainer,
@@ -26348,6 +26552,7 @@ function startOCR(config) {
       tap(() => sendStatusAction$1(StatusAction.Show));
       showVideoElement(false);
       showElement(confirmImageContainer);
+      showElement(confirmContainer);
       if (data) {
         const ctx2 = image.getContext('2d');
         image.width = width;
@@ -26396,7 +26601,7 @@ function startOCR(config) {
   }
   function setUIByType(type, cardType) {
     setTextByType(type, cardType);
-    setHeaderByType(type);
+    setHeaderByType(cardType);
     setCardSize(type);
   }
   function setTextByType(type, cardType) {
@@ -26444,46 +26649,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(cardTypeHeader(cardType)), translateService.translate('sdk.verify.header.stepper', {
+      current: setpCurrent(cardType),
+      total: stepTotal()
+    }));
   }
   function setCardSize(type) {
     var _a, _b;
@@ -26492,17 +26676,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 (isIphone14proOrProMax() && config.ocrConfig.hotfixIphone14proCameraBlur) {
       heightRate = CARD_SIZE.MAX_HEIGHT_RATE_IPHONE14PRO;
     }
+    if (type === 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 === EAuthMeCardClass.TWN_DriverLicense_Back || type === EAuthMeCardClass.TWN_DriverLicense_Front) {
@@ -26557,8 +26746,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) + '';
@@ -26685,6 +26881,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');
@@ -26716,7 +26914,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');
@@ -26746,6 +26945,7 @@ const renderExtraUI = config => {
     titleTextPanel,
     titleText,
     confirmImageContainer,
+    confirmContainer,
     checkOtherImageContainer,
     imageTypeText,
     retryBtn,
@@ -26781,6 +26981,7 @@ function startExtra(config) {
   const {
     titleTextPanel,
     confirmImageContainer,
+    confirmContainer,
     checkOtherImageContainer,
     retryBtn,
     completeBtn,
@@ -26824,6 +27025,7 @@ function startExtra(config) {
     }
     showVideoElement();
     hideElement(confirmImageContainer);
+    hideElement(confirmContainer);
   }))), switchMap(needRetry => needRetry ? of(true) : config.extraConfig.continue === false ? reset() : from(takeOtherImage()).pipe(switchMap(needContinue => needContinue ? of(true) : of(false)), tap(() => {
     if (config.extraConfig.border == 'none') {
       hideElement(cardborderContainer);
@@ -26865,6 +27067,7 @@ function startExtra(config) {
       const height = sizeInfo.canvasHeight;
       showVideoElement(false);
       showElement(confirmImageContainer);
+      showElement(confirmContainer);
       const ctx2 = image.getContext('2d');
       image.width = width;
       image.height = height;
@@ -27400,7 +27603,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;
@@ -27408,9 +27610,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;
@@ -27487,7 +27686,6 @@ function initFrameView(cardPoints, scanId, faceMode, scanView, cardType, cardTyp
       `);
       dom.textContent = text;
     }
-    initSuccessAnimation(lottieSuccessSetting);
     const scanViewSetting = {
       document_type: '',
       border: {
@@ -27693,6 +27891,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 = UintArrayToBlob(frameWidth, frameHeight, data, virtualCanvas);
               const requestImg = yield encryptImageBase64(image);
@@ -27708,14 +27929,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(() => uploadFrameBase64(docId, requestImg, frameIndex++, ResourceImageType.Recognition, report));
-              yield SendRequestWithRetry$1(() => finishScanDocument(docId, latestTField !== null && latestTField !== void 0 ? latestTField : {}, docInfos[type].fraudResult));
+              yield SendRequestWithRetry$1(() => finishScanDocument(docId, latestTField !== null && latestTField !== void 0 ? latestTField : {}, docInfos[option.type].fraudResult));
               return true;
             } else {
               return false;
@@ -28040,7 +28261,8 @@ class OCRModule {
             }
             yield 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* () {
@@ -28087,10 +28309,6 @@ class OCRModule {
               const lottieScanSetting = {
                 scanAnimationContainer: scanAnimationContainer
               };
-              const lottieSuccessSetting = {
-                animationContainer: successAnimationContainer
-              };
-              initSuccessAnimation(lottieSuccessSetting);
               const scanViewSetting = {
                 document_type: '',
                 border: {
@@ -28166,8 +28384,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',
@@ -28208,10 +28427,6 @@ class OCRModule {
               const lottieScanSetting = {
                 scanAnimationContainer: scanAnimationContainer
               };
-              const lottieSuccessSetting = {
-                animationContainer: successAnimationContainer
-              };
-              initSuccessAnimation(lottieSuccessSetting);
               const scanViewSetting = {
                 document_type: '',
                 border: {
@@ -28437,7 +28652,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`)
@@ -28452,7 +28667,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);
@@ -28463,18 +28678,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 === EAuthMeCardClass$1.TWN_IDCard_Front;
+              const needFraudOption = config.needAntiFraud && option.type === EAuthMeCardClass$1.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
               });
@@ -28482,7 +28702,7 @@ class OCRModule {
               yield SendRequestWithRetry(() => uploadFrameBase64(docId, requestImg, frameIndex, 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(() => recognitionEncrypt(docId, _requestImg, report, RecognitionFileType.FlatImage));
                 if (resp.retry) {
@@ -28491,12 +28711,12 @@ class OCRModule {
                 }
                 result = unionMerge(result, resp && resp.details || {});
                 yield SendRequestWithRetry(() => 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 {
@@ -28505,7 +28725,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) {
@@ -28525,7 +28745,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;
             }
           }),
@@ -28560,10 +28781,6 @@ class OCRModule {
                 fraudResult: null
               };
             }
-            const lottieSuccessSetting = {
-              animationContainer: successAnimationContainer
-            };
-            initSuccessAnimation(lottieSuccessSetting);
             // TODO 等開始處理防偽的時候再處理
             // if (resp.scanView && resp.scanView.enable) {
             //   setBorderType({
@@ -29107,8 +29324,8 @@ class AuthmeIdentityVerification extends 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-patch.1";
+var date = "2025-08-28T04:22:37+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,