idmission-web-sdk 2.0.0 → 2.0.2

package/dist/sdk2.umd.development.js

@@ -140,7 +140,7 @@
         return cooked;
     }
 
-    var webSdkVersion = '2.0.0';
+    var webSdkVersion = '2.0.2';
 
     function getPlatform() {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -3049,7 +3049,7 @@
     var models = {};
     function loadFocusModel(modelAssetPath) {
       return __awaiter(this, void 0, void 0, function () {
-        var id, _a, _b, _c, _d, emptyFrame;
+        var id, _a, _b, _c, _d;
         return __generator(this, function (_e) {
           switch (_e.label) {
             case 0:
@@ -3072,12 +3072,16 @@
                   delegate: modelCapabilities.delegate
                 },
                 runningMode: 'VIDEO'
-              }])];
+              }])
+              // const emptyFrame = document.createElement('canvas')
+              // models[id].classifyForVideo(emptyFrame, performance.now())
+              // emptyFrame.remove()
+              ];
             case 3:
               _a[_b] = _e.sent();
-              emptyFrame = document.createElement('canvas');
-              models[id].classifyForVideo(emptyFrame, performance.now());
-              emptyFrame.remove();
+              // const emptyFrame = document.createElement('canvas')
+              // models[id].classifyForVideo(emptyFrame, performance.now())
+              // emptyFrame.remove()
               return [2 /*return*/, models[id]];
           }
         });
@@ -3316,7 +3320,7 @@
     var detector;
     function loadFaceDetector() {
       return __awaiter(this, void 0, void 0, function () {
-        var _a, _b, emptyFrame;
+        var _a, _b;
         return __generator(this, function (_c) {
           switch (_c.label) {
             case 0:
@@ -3336,12 +3340,16 @@
                   delegate: modelCapabilities.delegate
                 },
                 runningMode: 'VIDEO'
-              }])];
+              }])
+              // const emptyFrame = document.createElement('canvas')
+              // detector.detectForVideo(emptyFrame, performance.now())
+              // emptyFrame.remove()
+              ];
             case 3:
               detector = _c.sent();
-              emptyFrame = document.createElement('canvas');
-              detector.detectForVideo(emptyFrame, performance.now());
-              emptyFrame.remove();
+              // const emptyFrame = document.createElement('canvas')
+              // detector.detectForVideo(emptyFrame, performance.now())
+              // emptyFrame.remove()
               return [2 /*return*/, detector];
           }
         });
@@ -3664,7 +3672,7 @@
         scoreThreshold = defaultDocumentDetectionScoreThreshold;
       }
       return __awaiter(this, void 0, void 0, function () {
-        var id, _a, _b, _c, _d, emptyFrame;
+        var id, _a, _b, _c, _d;
         return __generator(this, function (_e) {
           switch (_e.label) {
             case 0:
@@ -3688,12 +3696,16 @@
                 },
                 scoreThreshold: scoreThreshold,
                 runningMode: 'VIDEO'
-              }])];
+              }])
+              // const emptyFrame = document.createElement('canvas')
+              // detectors[id].detectForVideo(emptyFrame, performance.now())
+              // emptyFrame.remove()
+              ];
             case 3:
               _a[_b] = _e.sent();
-              emptyFrame = document.createElement('canvas');
-              detectors[id].detectForVideo(emptyFrame, performance.now());
-              emptyFrame.remove();
+              // const emptyFrame = document.createElement('canvas')
+              // detectors[id].detectForVideo(emptyFrame, performance.now())
+              // emptyFrame.remove()
               return [2 /*return*/, detectors[id]];
           }
         });
@@ -12425,14 +12437,20 @@
       var captureStartedAt = React.useRef();
       var captureEndedAt = React.useRef();
       var operationStartedAt = React.useRef();
+      var _x = React.useContext(SelfieGuidanceModelsContext),
+        start = _x.start,
+        stop = _x.stop;
       React.useEffect(function () {
         operationStartedAt.current = new Date();
       }, []);
       React.useEffect(function () {
-        if (captureState === 'CAPTURING') {
-          captureStartedAt.current = new Date();
-        }
-      }, [captureState]);
+        if (captureState !== 'CAPTURING') return;
+        captureStartedAt.current = new Date();
+        start();
+        return function () {
+          stop();
+        };
+      }, [captureState, start, stop]);
       var onCapture = React.useCallback(function () {
         captureEndedAt.current = new Date();
       }, []);
@@ -12469,9 +12487,9 @@
         setCaptureState('FAILED');
         onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
       }, [onTimeout, livenessCheckRequest, submissionResponse]);
-      var _x = React.useState(0),
-        attempt = _x[0],
-        setAttempt = _x[1];
+      var _y = React.useState(0),
+        attempt = _y[0],
+        setAttempt = _y[1];
       var onExitCallback = React.useCallback(function () {
         setAttempt(function (n) {
           return n + 1;
@@ -13507,7 +13525,10 @@
     var AcceptBtn$1 = styled__default['default'](LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
     var templateObject_1$b;
 
-    var useVideoRecorder = function useVideoRecorder(camera, audioStream) {
+    var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
+      if (mergeAVStreams === void 0) {
+        mergeAVStreams = false;
+      }
       var videoRecorder = React.useRef(null);
       var audioRecorder = React.useRef(null);
       var videoChunks = React.useRef([]);
@@ -13536,7 +13557,13 @@
       var _h = React.useState(false),
         audioRecordingIntentionallyStopped = _h[0],
         setAudioRecordingIntentionallyStopped = _h[1];
-      var videoStream = camera === null || camera === void 0 ? void 0 : camera.stream;
+      var getVideoStream = React.useCallback(function () {
+        var _a, _b, _c;
+        if (!mergeAVStreams) return camera === null || camera === void 0 ? void 0 : camera.stream;
+        var videoTracks = (_b = (_a = camera === null || camera === void 0 ? void 0 : camera.stream) === null || _a === void 0 ? void 0 : _a.getTracks()) !== null && _b !== void 0 ? _b : [];
+        var audioTracks = (_c = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getTracks()) !== null && _c !== void 0 ? _c : [];
+        return new MediaStream(__spreadArray(__spreadArray([], videoTracks, true), audioTracks, true));
+      }, [audioStream, camera === null || camera === void 0 ? void 0 : camera.stream, mergeAVStreams]);
       var processVideo = React.useCallback(function () {
         var videoBlob = new Blob(videoChunks.current, {
           type: 'video/mp4'
@@ -13557,13 +13584,15 @@
         (_a = audioStream === null || audioStream === void 0 ? void 0 : audioStream.stop) === null || _a === void 0 ? void 0 : _a.call(audioStream);
       }, [audioStream]);
       var startRecordingVideo = React.useCallback(function () {
+        var videoStream = getVideoStream();
         if (!videoStream) return;
         videoChunks.current = [];
         setIsRecordingVideo(true);
         setVideoRecordingStopped(false);
         setVideoRecordingIntentionallyStopped(false);
         videoRecorder.current = new MediaRecorder(videoStream, {
-          videoBitsPerSecond: 270000
+          videoBitsPerSecond: 270000,
+          audioBitsPerSecond: 32000
         });
         videoRecorder.current.ondataavailable = function (e) {
           videoChunks.current.push(e.data);
@@ -13579,8 +13608,9 @@
             // TODO: figure out what to do here
           }
         }, 100);
-      }, [videoStream]);
+      }, [getVideoStream]);
       var startRecordingAudio = React.useCallback(function () {
+        if (mergeAVStreams) return;
         if (!audioStream) return;
         audioChunks.current = [];
         setIsRecordingAudio(true);
@@ -13596,7 +13626,7 @@
           setAudioRecordingStopped(true);
         };
         audioRecorder.current.start(1000);
-      }, [audioStream]);
+      }, [audioStream, mergeAVStreams]);
       var stopRecordingVideo = React.useCallback(function () {
         var _a, _b;
         setVideoRecordingIntentionallyStopped(true);
@@ -13898,45 +13928,52 @@
         onRetryClicked = _a.onRetryClicked,
         onExitCapture = _a.onExitCapture,
         onUserCancel = _a.onUserCancel,
-        onModelError = _a.onModelError,
         _c = _a.loadingOverlayMode,
         loadingOverlayMode = _c === void 0 ? 'default' : _c,
-        _d = _a.modelLoadTimeoutMs,
-        modelLoadTimeoutMs = _d === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _d,
-        _e = _a.skipSuccessScreen,
-        skipSuccessScreen = _e === void 0 ? false : _e,
-        _f = _a.assets,
-        assets = _f === void 0 ? {} : _f,
-        _g = _a.classNames,
-        classNames = _g === void 0 ? {} : _g,
-        _h = _a.colors,
-        colors = _h === void 0 ? {} : _h,
-        _j = _a.verbiage,
-        verbiage = _j === void 0 ? {} : _j,
-        _k = _a.debugMode,
-        debugMode = _k === void 0 ? false : _k;
-      var _l = React.useContext(SubmissionContext),
-        selfieImage = _l.selfieImage,
-        signatureVideoUrl = _l.signatureVideoUrl,
-        setSelfieImage = _l.setSelfieImage,
-        setSignatureData = _l.setSignatureData,
-        setSignatureVideoUrl = _l.setSignatureVideoUrl,
-        logSelfieCaptureAttempt = _l.logSelfieCaptureAttempt;
+        _d = _a.skipSuccessScreen,
+        skipSuccessScreen = _d === void 0 ? false : _d,
+        _e = _a.assets,
+        assets = _e === void 0 ? {} : _e,
+        _f = _a.classNames,
+        classNames = _f === void 0 ? {} : _f,
+        _g = _a.colors,
+        colors = _g === void 0 ? {} : _g,
+        _h = _a.verbiage,
+        verbiage = _h === void 0 ? {} : _h,
+        _j = _a.debugMode,
+        debugMode = _j === void 0 ? false : _j;
+      var _k = React.useContext(SubmissionContext),
+        selfieImage = _k.selfieImage,
+        signatureVideoUrl = _k.signatureVideoUrl,
+        setSelfieImage = _k.setSelfieImage,
+        setSignatureData = _k.setSignatureData,
+        setSignatureVideoUrl = _k.setSignatureVideoUrl,
+        logSelfieCaptureAttempt = _k.logSelfieCaptureAttempt;
       var cameraAccessDenied = React.useContext(CameraStateContext).cameraAccessDenied;
-      var _m = React.useState('LOADING'),
-        captureState = _m[0],
-        setCaptureState = _m[1];
+      var _l = React.useState('LOADING'),
+        captureState = _l[0],
+        setCaptureState = _l[1];
       var operationStartedAt = React.useRef();
       var captureStartedAt = React.useRef();
       var captureEndedAt = React.useRef();
+      var _m = React.useContext(SelfieGuidanceModelsContext),
+        start = _m.start,
+        stop = _m.stop;
       React.useEffect(function () {
         operationStartedAt.current = new Date();
       }, []);
       React.useEffect(function () {
-        if (captureState === 'CHECKING_LIVENESS') {
-          captureStartedAt.current = new Date();
-        }
+        if (captureState !== 'CHECKING_LIVENESS') return;
+        captureStartedAt.current = new Date();
       }, [captureState]);
+      var shouldRun = ['CHECKING_LIVENESS', 'CAPTURING_SIGNATURE'].includes(captureState);
+      React.useEffect(function () {
+        if (!shouldRun) return;
+        start();
+        return function () {
+          stop();
+        };
+      }, [shouldRun, start, stop]);
       var logCaptureMetadata = React.useCallback(function () {
         var _a, _b, _c;
         logSelfieCaptureAttempt({
@@ -14001,11 +14038,7 @@
           setCaptureState('LOADING');
         }
       }, [cameraAccessDenied]);
-      return /*#__PURE__*/React__default['default'].createElement(SelfieGuidanceModelsProvider, {
-        throttleMs: captureState === 'CAPTURING_SIGNATURE' ? 250 : 0,
-        onModelError: onModelError,
-        modelLoadTimeoutMs: modelLoadTimeoutMs
-      }, /*#__PURE__*/React__default['default'].createElement(PageContainer, {
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PageContainer, {
         className: "flex ".concat((_b = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _b !== void 0 ? _b : '')
       }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, {
         className: classNames.cameraFeed
@@ -14370,79 +14403,85 @@
         disableFaceDetectionWhileAudioCapture = _8 === void 0 ? false : _8,
         _9 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
         disableFaceDetectionWhileAudioCaptureMsDelay = _9 === void 0 ? 2000 : _9,
-        _10 = _a.assets,
-        assets = _10 === void 0 ? {} : _10,
-        _11 = _a.classNames,
-        classNames = _11 === void 0 ? {} : _11,
-        _12 = _a.colors,
-        colors = _12 === void 0 ? {} : _12,
-        _13 = _a.verbiage,
-        rawVerbiage = _13 === void 0 ? {} : _13,
-        _14 = _a.debugMode,
-        debugMode = _14 === void 0 ? false : _14;
-      var _15 = useResizeObserver(),
-        ref = _15.ref,
-        _16 = _15.width,
-        width = _16 === void 0 ? 1 : _16,
-        _17 = _15.height,
-        height = _17 === void 0 ? 1 : _17;
-      var _18 = React.useContext(CameraStateContext),
-        cameraRef = _18.cameraRef,
-        videoRef = _18.videoRef,
-        videoLoaded = _18.videoLoaded,
-        cameraReady = _18.cameraReady,
-        microphoneReady = _18.microphoneReady,
-        audioStream = _18.audioStream,
-        setVideoLoaded = _18.setVideoLoaded,
-        takePhoto = _18.takePhoto;
-      var _19 = React.useState([]),
-        detectedObjects = _19[0],
-        setDetectedObjects = _19[1];
+        _10 = _a.mergeAVStreams,
+        mergeAVStreams = _10 === void 0 ? false : _10,
+        _11 = _a.assets,
+        assets = _11 === void 0 ? {} : _11,
+        _12 = _a.classNames,
+        classNames = _12 === void 0 ? {} : _12,
+        _13 = _a.colors,
+        colors = _13 === void 0 ? {} : _13,
+        _14 = _a.verbiage,
+        rawVerbiage = _14 === void 0 ? {} : _14,
+        _15 = _a.debugMode,
+        debugMode = _15 === void 0 ? false : _15;
+      var _16 = useResizeObserver(),
+        ref = _16.ref,
+        _17 = _16.width,
+        width = _17 === void 0 ? 1 : _17,
+        _18 = _16.height,
+        height = _18 === void 0 ? 1 : _18;
+      var _19 = React.useContext(CameraStateContext),
+        cameraRef = _19.cameraRef,
+        videoRef = _19.videoRef,
+        videoLoaded = _19.videoLoaded,
+        cameraReady = _19.cameraReady,
+        microphoneReady = _19.microphoneReady,
+        audioStream = _19.audioStream,
+        setVideoLoaded = _19.setVideoLoaded,
+        takePhoto = _19.takePhoto;
       var _20 = React.useState([]),
-        faces = _20[0],
-        setFaces = _20[1];
-      var _21 = React.useContext(IdCaptureModelsContext),
-        idModelsReady = _21.ready,
-        startIdModels = _21.start,
-        stopIdModels = _21.stop,
-        onIdPredictionMade = _21.onPredictionMade,
-        setThresholds = _21.setThresholds,
-        bestFrameDetails = _21.bestFrameDetails,
-        resetBestFrame = _21.resetBestFrame,
-        idModelError = _21.modelError;
-      var _22 = React.useState(null),
-        videoStartsAt = _22[0],
-        setVideoStartsAt = _22[1];
-      var _23 = React.useContext(SubmissionContext),
-        setIdCaptureVideoAudioStartsAt = _23.setIdCaptureVideoAudioStartsAt,
-        setExpectedAudioText = _23.setExpectedAudioText;
-      var _24 = React.useContext(SelfieGuidanceModelsContext),
-        onSelfiePredictionMade = _24.onPredictionMade,
-        selfieModelError = _24.error;
-      var _25 = useVideoRecorder(cameraRef.current, audioStream),
-        isRecordingVideo = _25.isRecordingVideo,
-        startRecordingVideo = _25.startRecordingVideo,
-        startRecordingAudio = _25.startRecordingAudio,
-        stopRecordingVideo = _25.stopRecordingVideo,
-        stopRecordingAudio = _25.stopRecordingAudio,
-        videoRecordingUnintentionallyStopped = _25.videoRecordingUnintentionallyStopped,
-        audioRecordingUnintentionallyStopped = _25.audioRecordingUnintentionallyStopped,
-        videoUrl = _25.videoUrl,
-        audioUrl = _25.audioUrl;
+        detectedObjects = _20[0],
+        setDetectedObjects = _20[1];
+      var _21 = React.useState([]),
+        faces = _21[0],
+        setFaces = _21[1];
+      var _22 = React.useContext(IdCaptureModelsContext),
+        idModelsReady = _22.ready,
+        startIdModels = _22.start,
+        stopIdModels = _22.stop,
+        onIdPredictionMade = _22.onPredictionMade,
+        setThresholds = _22.setThresholds,
+        bestFrameDetails = _22.bestFrameDetails,
+        resetBestFrame = _22.resetBestFrame,
+        idModelError = _22.modelError;
+      var _23 = React.useState(null),
+        videoStartsAt = _23[0],
+        setVideoStartsAt = _23[1];
+      var _24 = React.useContext(SubmissionContext),
+        setIdCaptureVideoAudioStartsAt = _24.setIdCaptureVideoAudioStartsAt,
+        setExpectedAudioText = _24.setExpectedAudioText;
+      var _25 = React.useContext(SelfieGuidanceModelsContext),
+        onSelfiePredictionMade = _25.onPredictionMade,
+        selfieModelError = _25.error;
+      var _26 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
+        isRecordingVideo = _26.isRecordingVideo,
+        startRecordingVideo = _26.startRecordingVideo,
+        startRecordingAudio = _26.startRecordingAudio,
+        stopRecordingVideo = _26.stopRecordingVideo,
+        stopRecordingAudio = _26.stopRecordingAudio,
+        videoRecordingUnintentionallyStopped = _26.videoRecordingUnintentionallyStopped,
+        audioRecordingUnintentionallyStopped = _26.audioRecordingUnintentionallyStopped,
+        videoUrl = _26.videoUrl,
+        audioUrl = _26.audioUrl;
       var countdownTimeoutRef = React.useRef(undefined);
-      var _26 = React.useState(0),
-        countdownRemaining = _26[0],
-        setCountdownRemaining = _26[1];
+      var _27 = React.useState(0),
+        countdownRemaining = _27[0],
+        setCountdownRemaining = _27[1];
       React.useEffect(function () {
         if (!isRecordingVideo && !videoUrl) {
           startRecordingVideo();
           setVideoStartsAt(new Date());
         }
-        if (videoUrl && (!readTextPrompt || audioUrl)) {
+        // if the mergeAVStreams flag is present, the audio stream is on the video
+        // stream, so we won't wait for a separate data url containing audio only.
+        var needsAudio = !!readTextPrompt && !mergeAVStreams;
+        var audioReady = !needsAudio || audioUrl;
+        if (videoUrl && audioReady) {
           setVideoLoaded(false);
           onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl, audioUrl);
         }
-      }, [audioUrl, isRecordingVideo, onComplete, readTextPrompt, setVideoLoaded, startRecordingVideo, videoUrl]);
+      }, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, setVideoLoaded, startRecordingVideo, videoUrl]);
       React.useEffect(function () {
         if (videoRecordingUnintentionallyStopped || audioRecordingUnintentionallyStopped) {
           onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
@@ -14452,9 +14491,9 @@
       React.useEffect(function () {
         shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady && !idModelError && (!readTextPrompt || microphoneReady);
       }, [cameraReady, idModelError, idModelsReady, microphoneReady, readTextPrompt, videoLoaded]);
-      var _27 = React.useState('SHOW_ID_FRONT'),
-        requestedAction = _27[0],
-        setRequestedAction = _27[1];
+      var _28 = React.useState('SHOW_ID_FRONT'),
+        requestedAction = _28[0],
+        setRequestedAction = _28[1];
       React.useEffect(function startModelsWhenCapturing() {
         if (!shouldCaptureFrames.current && requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
         startIdModels();
@@ -14473,15 +14512,15 @@
           }
         });
       }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
-      var _28 = React.useState(0),
-        currentDetectionScore = _28[0],
-        setCurrentDetectionScore = _28[1];
       var _29 = React.useState(0),
-        currentFocusScore = _29[0],
-        setCurrentFocusScore = _29[1];
+        currentDetectionScore = _29[0],
+        setCurrentDetectionScore = _29[1];
       var _30 = React.useState(0),
-        goodFramesCount = _30[0],
-        setGoodFramesCount = _30[1];
+        currentFocusScore = _30[0],
+        setCurrentFocusScore = _30[1];
+      var _31 = React.useState(0),
+        goodFramesCount = _31[0],
+        setGoodFramesCount = _31[1];
       var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
       var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
       React.useEffect(function () {
@@ -14499,9 +14538,9 @@
           }
         });
       }, [idCaptureModelsEnabled, idCardFrontDetectionThreshold, onIdPredictionMade, idModelError]);
-      var _31 = React.useState(null),
-        idFrontCaptureStartedAt = _31[0],
-        setFirstGoodFrameTime = _31[1];
+      var _32 = React.useState(null),
+        idFrontCaptureStartedAt = _32[0],
+        setFirstGoodFrameTime = _32[1];
       React.useEffect(function () {
         if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
       }, [goodFramesCount]);
@@ -14522,9 +14561,9 @@
       var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
       var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
       var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
-      var _32 = React.useState(),
-        countdownStartedAt = _32[0],
-        setCountdownStartedAt = _32[1];
+      var _33 = React.useState(),
+        countdownStartedAt = _33[0],
+        setCountdownStartedAt = _33[1];
       var frameLock = React.useRef(false);
       var captureFrame = React.useCallback(function () {
         return __awaiter(void 0, void 0, void 0, function () {
@@ -14645,9 +14684,9 @@
         };
       }, [captureCountdownSeconds, captureFrame, countdownStartedAt, manualCountdown]);
       var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, stopRecording, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
-      var _33 = React.useState(0),
-        numFramesWithoutFaces = _33[0],
-        setNumFramesWithoutFaces = _33[1];
+      var _34 = React.useState(0),
+        numFramesWithoutFaces = _34[0],
+        setNumFramesWithoutFaces = _34[1];
       React.useEffect(function () {
         if (!selfieModelError) {
           onSelfiePredictionMade(function (faces) {
@@ -14665,14 +14704,14 @@
         }
       }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
       var theme = styled.useTheme();
-      var _34 = useTranslations(rawVerbiage, {
+      var _35 = useTranslations(rawVerbiage, {
           faceNotCenteredText: 'Please move your face to the center...',
           searchingForIdCardText: 'Searching for ID card...',
           captureBtnText: 'Capture'
         }),
-        captureBtnText = _34.captureBtnText,
-        faceNotCenteredText = _34.faceNotCenteredText,
-        searchingForIdCardText = _34.searchingForIdCardText;
+        captureBtnText = _35.captureBtnText,
+        faceNotCenteredText = _35.faceNotCenteredText,
+        searchingForIdCardText = _35.searchingForIdCardText;
       var debugScalingDetails = useDebugScalingDetails({
         enabled: debugMode,
         pageWidth: width,
@@ -14913,29 +14952,31 @@
         disableFaceDetectionWhileAudioCaptureMsDelay = _v === void 0 ? 2000 : _v,
         _w = _a.silentFallback,
         silentFallback = _w === void 0 ? false : _w,
-        _x = _a.assets,
-        assets = _x === void 0 ? {} : _x,
-        _y = _a.classNames,
-        classNames = _y === void 0 ? {} : _y,
-        _z = _a.colors,
-        colors = _z === void 0 ? {} : _z,
-        _0 = _a.verbiage,
-        verbiage = _0 === void 0 ? {} : _0,
-        _1 = _a.debugMode,
-        debugMode = _1 === void 0 ? false : _1;
-      var _2 = React.useContext(SubmissionContext),
-        submissionStatus = _2.submissionStatus,
-        idCaptureVideoUrl = _2.idCaptureVideoUrl,
-        idCaptureVideoAudioUrl = _2.idCaptureVideoAudioUrl,
-        idCaptureVideoIdFrontImage = _2.idCaptureVideoIdFrontImage,
-        idCaptureVideoIdBackImage = _2.idCaptureVideoIdBackImage,
-        setIdCaptureVideoUrl = _2.setIdCaptureVideoUrl,
-        setIdCaptureVideoIdFrontImage = _2.setIdCaptureVideoIdFrontImage,
-        setIdCaptureVideoIdBackImage = _2.setIdCaptureVideoIdBackImage,
-        setIdCaptureVideoAudioUrl = _2.setIdCaptureVideoAudioUrl;
-      var _3 = React.useState('CAPTURING_ID'),
-        captureState = _3[0],
-        setCaptureState = _3[1];
+        _x = _a.mergeAVStreams,
+        mergeAVStreams = _x === void 0 ? false : _x,
+        _y = _a.assets,
+        assets = _y === void 0 ? {} : _y,
+        _z = _a.classNames,
+        classNames = _z === void 0 ? {} : _z,
+        _0 = _a.colors,
+        colors = _0 === void 0 ? {} : _0,
+        _1 = _a.verbiage,
+        verbiage = _1 === void 0 ? {} : _1,
+        _2 = _a.debugMode,
+        debugMode = _2 === void 0 ? false : _2;
+      var _3 = React.useContext(SubmissionContext),
+        submissionStatus = _3.submissionStatus,
+        idCaptureVideoUrl = _3.idCaptureVideoUrl,
+        idCaptureVideoAudioUrl = _3.idCaptureVideoAudioUrl,
+        idCaptureVideoIdFrontImage = _3.idCaptureVideoIdFrontImage,
+        idCaptureVideoIdBackImage = _3.idCaptureVideoIdBackImage,
+        setIdCaptureVideoUrl = _3.setIdCaptureVideoUrl,
+        setIdCaptureVideoIdFrontImage = _3.setIdCaptureVideoIdFrontImage,
+        setIdCaptureVideoIdBackImage = _3.setIdCaptureVideoIdBackImage,
+        setIdCaptureVideoAudioUrl = _3.setIdCaptureVideoAudioUrl;
+      var _4 = React.useState('CAPTURING_ID'),
+        captureState = _4[0],
+        setCaptureState = _4[1];
       React.useEffect(function () {
         if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
       }, [captureState, skipIdCapture]);
@@ -14966,9 +15007,9 @@
       var onVideoCaptureFaceNotDetected = React.useCallback(function () {
         setCaptureState('CHECKING_LIVENESS');
       }, []);
-      var _4 = React.useState(0),
-        attempt = _4[0],
-        setAttempt = _4[1];
+      var _5 = React.useState(0),
+        attempt = _5[0],
+        setAttempt = _5[1];
       var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
       var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
         userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
@@ -15009,11 +15050,13 @@
         onMicrophoneAccessDenied: onMicrophoneAccessDenied,
         debugMode: debugMode
       }, /*#__PURE__*/React__default['default'].createElement(IdCaptureModelsProvider, {
+        autoStart: false,
         documentDetectionModelUrl: (_c = (_b = idCaptureProps.assets) === null || _b === void 0 ? void 0 : _b.documentDetectionModelUrl) !== null && _c !== void 0 ? _c : '',
         focusModelUrl: (_e = (_d = idCaptureProps.assets) === null || _d === void 0 ? void 0 : _d.focusModelUrl) !== null && _e !== void 0 ? _e : '',
         onModelError: onIdCaptureModelError,
         modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
       }, /*#__PURE__*/React__default['default'].createElement(SelfieGuidanceModelsProvider, {
+        autoStart: false,
         onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
         modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
       }, /*#__PURE__*/React__default['default'].createElement(PageContainer, {
@@ -15082,6 +15125,7 @@
               readTextPrompt: readTextPrompt,
               readTextTimeoutDurationMs: readTextTimeoutDurationMs,
               readTextMinReadingMs: readTextMinReadingMs,
+              mergeAVStreams: mergeAVStreams,
               assets: assets.idVideoCapture,
               classNames: classNames.idVideoCapture,
               colors: colors.idVideoCapture,
@@ -15280,6 +15324,7 @@
             onMicrophoneAccessDenied: onMicrophoneAccessDenied,
             debugMode: debugMode
           }, /*#__PURE__*/React__default['default'].createElement(SelfieGuidanceModelsProvider, {
+            autoStart: false,
             onModelError: faceLivenessProps.onModelError,
             modelLoadTimeoutMs: faceLivenessProps.modelLoadTimeoutMs
           }, /*#__PURE__*/React__default['default'].createElement(FaceLivenessWizard, __assign$1({}, faceLivenessProps, {
@@ -15299,10 +15344,15 @@
             onCameraAccessDenied: onCameraAccessDenied,
             onMicrophoneAccessDenied: onMicrophoneAccessDenied,
             debugMode: debugMode
+          }, /*#__PURE__*/React__default['default'].createElement(SelfieGuidanceModelsProvider, {
+            autoStart: false,
+            throttleMs: 250,
+            onModelError: videoSignatureCaptureProps.onModelError,
+            modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs
           }, /*#__PURE__*/React__default['default'].createElement(VideoSignatureWizard, __assign$1({}, videoSignatureCaptureProps, {
             onComplete: onVideoSignatureComplete,
             onRetryClicked: onVideoSignatureRetry
-          })));
+          }))));
         case 'AdditionalDocumentCapture':
           return /*#__PURE__*/React__default['default'].createElement(AdditionalDocumentCaptureWizard, __assign$1({}, additionalDocumentCaptureProps, {
             documents: documents,
@@ -16629,6 +16679,16 @@
       var _m = React.useContext(CameraStateContext),
         cameraAccessDenied = _m.cameraAccessDenied,
         releaseCameraAccess = _m.releaseCameraAccess;
+      var _o = React.useContext(SelfieGuidanceModelsContext),
+        start = _o.start,
+        stop = _o.stop;
+      React.useEffect(function () {
+        if (captureState !== 'CAPTURING') return;
+        start();
+        return function () {
+          stop();
+        };
+      }, [captureState, start, stop]);
       var onCustomerMatchedCallback = React.useCallback(function (resp, req) {
         return __awaiter(void 0, void 0, void 0, function () {
           return __generator(this, function (_a) {
@@ -16651,9 +16711,9 @@
         setCaptureState('FAILED');
         onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
       }, [onCaptureGuidanceTimeout]);
-      var _o = React.useState(0),
-        attempt = _o[0],
-        setAttempt = _o[1];
+      var _p = React.useState(0),
+        attempt = _p[0],
+        setAttempt = _p[1];
       var onExitCallback = React.useCallback(function () {
         setAttempt(function (n) {
           return n + 1;
@@ -16827,6 +16887,7 @@
         onCameraAccessDenied: onCameraAccessDenied,
         debugMode: debugMode
       }, /*#__PURE__*/React__default['default'].createElement(SelfieGuidanceModelsProvider, {
+        autoStart: false,
         onModelError: onModelError,
         modelLoadTimeoutMs: modelLoadTimeoutMs
       }, /*#__PURE__*/React__default['default'].createElement(CustomerVerificationWizard, {
@@ -17173,6 +17234,16 @@
       var _m = React.useContext(CameraStateContext),
         cameraAccessDenied = _m.cameraAccessDenied,
         releaseCameraAccess = _m.releaseCameraAccess;
+      var _o = React.useContext(SelfieGuidanceModelsContext),
+        start = _o.start,
+        stop = _o.stop;
+      React.useEffect(function () {
+        if (captureState !== 'CAPTURING') return;
+        start();
+        return function () {
+          stop();
+        };
+      }, [captureState, start, stop]);
       var onCustomerMatchedCallback = React.useCallback(function (resp, req) {
         return __awaiter(void 0, void 0, void 0, function () {
           return __generator(this, function (_a) {
@@ -17195,9 +17266,9 @@
         setCaptureState('FAILED');
         onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
       }, [onCaptureGuidanceTimeout]);
-      var _o = React.useState(0),
-        attempt = _o[0],
-        setAttempt = _o[1];
+      var _p = React.useState(0),
+        attempt = _p[0],
+        setAttempt = _p[1];
       var onExitCallback = React.useCallback(function () {
         setAttempt(function (n) {
           return n + 1;
@@ -17369,6 +17440,7 @@
         onCameraAccessDenied: onCameraAccessDenied,
         debugMode: debugMode
       }, /*#__PURE__*/React__default['default'].createElement(SelfieGuidanceModelsProvider, {
+        autoStart: false,
         modelLoadTimeoutMs: modelLoadTimeoutMs,
         onModelError: onModelError
       }, /*#__PURE__*/React__default['default'].createElement(CustomerIdentificationWizard, {
@@ -17553,28 +17625,30 @@
         disableFaceDetectionWhileAudioCaptureMsDelay = _w === void 0 ? 2000 : _w,
         _x = _a.silentFallback,
         silentFallback = _x === void 0 ? false : _x,
-        _y = _a.theme,
-        theme = _y === void 0 ? 'default' : _y,
-        _z = _a.assets,
-        assets = _z === void 0 ? {} : _z,
-        _0 = _a.classNames,
-        classNames = _0 === void 0 ? {} : _0,
-        _1 = _a.colors,
-        colors = _1 === void 0 ? {} : _1,
-        _2 = _a.verbiage,
-        verbiage = _2 === void 0 ? {} : _2,
-        _3 = _a.captureSignature,
-        captureSignature = _3 === void 0 ? false : _3,
-        _4 = _a.captureSignatureVideo,
-        captureSignatureVideo = _4 === void 0 ? false : _4,
-        _5 = _a.captureAdditionalDocuments,
-        captureAdditionalDocuments = _5 === void 0 ? [] : _5,
-        _6 = _a.geolocationEnabled,
-        geolocationEnabled = _6 === void 0 ? true : _6,
-        _7 = _a.geolocationRequired,
-        geolocationRequired = _7 === void 0 ? false : _7,
-        _8 = _a.debugMode,
-        debugMode = _8 === void 0 ? false : _8;
+        _y = _a.mergeAVStreams,
+        mergeAVStreams = _y === void 0 ? false : _y,
+        _z = _a.theme,
+        theme = _z === void 0 ? 'default' : _z,
+        _0 = _a.assets,
+        assets = _0 === void 0 ? {} : _0,
+        _1 = _a.classNames,
+        classNames = _1 === void 0 ? {} : _1,
+        _2 = _a.colors,
+        colors = _2 === void 0 ? {} : _2,
+        _3 = _a.verbiage,
+        verbiage = _3 === void 0 ? {} : _3,
+        _4 = _a.captureSignature,
+        captureSignature = _4 === void 0 ? false : _4,
+        _5 = _a.captureSignatureVideo,
+        captureSignatureVideo = _5 === void 0 ? false : _5,
+        _6 = _a.captureAdditionalDocuments,
+        captureAdditionalDocuments = _6 === void 0 ? [] : _6,
+        _7 = _a.geolocationEnabled,
+        geolocationEnabled = _7 === void 0 ? true : _7,
+        _8 = _a.geolocationRequired,
+        geolocationRequired = _8 === void 0 ? false : _8,
+        _9 = _a.debugMode,
+        debugMode = _9 === void 0 ? false : _9;
       useLanguage(lang);
       useDebugLogging(debugMode);
       var videoIdCaptureProps = React.useMemo(function () {
@@ -17605,13 +17679,14 @@
           disableFaceDetectionWhileAudioCapture: disableFaceDetectionWhileAudioCapture,
           disableFaceDetectionWhileAudioCaptureMsDelay: disableFaceDetectionWhileAudioCaptureMsDelay,
           silentFallback: silentFallback,
+          mergeAVStreams: mergeAVStreams,
           assets: assets,
           classNames: classNames,
           colors: colors,
           verbiage: verbiage,
           debugMode: debugMode
         };
-      }, [idCaptureProps, faceLivenessProps, idCaptureModelsEnabled, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, onExitCapture, onExitAfterFailure, onUserCancel, skipSuccessScreen, skipIdCapture, skipShowIdCardBack, idCaptureLoadingOverlayMode, idCaptureGuideType, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, faceLivenessLoadingOverlayMode, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, silentFallback, assets, classNames, colors, verbiage, debugMode]);
+      }, [idCaptureProps, faceLivenessProps, idCaptureModelsEnabled, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, onExitCapture, onExitAfterFailure, onUserCancel, skipSuccessScreen, skipIdCapture, skipShowIdCardBack, idCaptureLoadingOverlayMode, idCaptureGuideType, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, faceLivenessLoadingOverlayMode, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, silentFallback, mergeAVStreams, assets, classNames, colors, verbiage, debugMode]);
       var additionalDocumentCaptureProps = React.useMemo(function () {
         return {
           documents: captureAdditionalDocuments,