idmission-web-sdk 1.1.0 → 1.1.1

package/README.md

@@ -716,6 +716,7 @@ Render a fullscreen capture component that performs IDValidation and FaceValidat
 <tr><td><code>skipSuccessScreen</code> (optional)</td><td>boolean or async function to indicate whether to proceed automatically after capture guidance is satisfied. If an async function is supplied returning a boolean, it will be evaluated at the time of capture guidance satisfaction. Defaults to false.</td></tr>
 <tr><td><code>skipIdCapture</code> (optional)</td><td>boolean to indicate whether to skip the initial ID capture flow. Note that when this flag is set, submission to IDmission's servers will not be attempted; it should be used in tandem with onSubmit. Defaults to false.</td></tr>
 <tr><td><code>skipShowIdCardBack</code> (optional)</td><td>boolean or async function to indicate whether to instruct the user to show the back of their ID card during video capture. If an async function is supplied returning a boolean, it will be evaluated at the time of ID front video capture completion. Defaults to false.</td></tr>
+<tr><td><code>mergeAVStreams</code> (optional)</td><td>boolean flag to indicate whether recorded audio should be merged onto the recorded video stream before submission. Defaults to false.</td></tr>
 <tr><td><code>assets</code> (optional)</td><td>object containing any asset overrides, for available options consult the Assets table below.</td></tr>
 <tr><td><code>colors</code> (optional)</td><td>object containing any asset overrides, for available options consult the Colors table below.</td></tr>
 <tr><td><code>verbiage</code> (optional)</td><td>object containing any verbiage overrides, for available options consult the Verbiage table below.</td></tr>

package/dist/components/customer_flows/VideoIdValidation.d.ts

@@ -131,6 +131,8 @@ export interface VideoIdValidationProps extends PropsWithChildren {
     disableFaceDetectionWhileAudioCaptureMsDelay?: number;
     /** Flag for suppressing fallback messaging - used when models fail to load */
     silentFallback?: boolean;
+    /** Boolean flag to indicate whether recorded audio should be merged onto the recorded video stream before submission. Defaults to false. */
+    mergeAVStreams?: boolean;
     /** Name of an included theme or object containing theme properties. **/
     theme?: ThemeInput;
     /** Object containing any asset overrides. */

package/dist/components/video_id/IdVideoCapture.d.ts

@@ -52,10 +52,11 @@ export type IdVideoCaptureProps = {
     readTextMinReadingMs?: number;
     disableFaceDetectionWhileAudioCapture: boolean;
     disableFaceDetectionWhileAudioCaptureMsDelay: number;
+    mergeAVStreams?: boolean;
     assets?: IdVideoCaptureAssets;
     classNames?: IdVideoCaptureClassNames;
     colors?: IdVideoCaptureColors;
     verbiage?: IdVideoCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, onRecordingFailed, idCaptureModelsEnabled, idCardFrontDelay, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, skipShowIdCardBack, captureCountdownSeconds, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;
+export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, onRecordingFailed, idCaptureModelsEnabled, idCardFrontDelay, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, skipShowIdCardBack, captureCountdownSeconds, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, mergeAVStreams, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;

package/dist/components/video_id/IdVideoCaptureWizard.d.ts

@@ -65,10 +65,11 @@ export type VideoIdWizardProps = {
     disableFaceDetectionWhileAudioCapture?: boolean;
     disableFaceDetectionWhileAudioCaptureMsDelay?: number;
     silentFallback?: boolean;
+    mergeAVStreams?: boolean;
     assets?: VideoIdWizardAssets;
     classNames?: VideoIdWizardClassNames;
     colors?: VideoIdWizardColors;
     verbiage?: VideoIdWizardVerbiage;
     debugMode?: boolean;
 };
-export declare const VideoIdWizard: ({ onComplete, onExitCapture, onExitAfterFailure, onUserCancel, onIdCaptureModelError, onCameraAccessDenied, onMicrophoneAccessDenied, idCaptureProps, faceLivenessProps, idCaptureModelsEnabled, idCardFrontDetectionThreshold, idCardBackDetectionThreshold, idCardFrontFocusThreshold, idCardBackFocusThreshold, goodIdCardFrontFramesThreshold, goodIdCardBackFramesThreshold, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, idCaptureLoadingOverlayMode, idCaptureGuideType, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, idCaptureModelLoadTimeoutMs, faceLivenessLoadingOverlayMode, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, silentFallback, assets, classNames, colors, verbiage, debugMode, }: VideoIdWizardProps) => ReactElement;
+export declare const VideoIdWizard: ({ onComplete, onExitCapture, onExitAfterFailure, onUserCancel, onIdCaptureModelError, onCameraAccessDenied, onMicrophoneAccessDenied, idCaptureProps, faceLivenessProps, idCaptureModelsEnabled, idCardFrontDetectionThreshold, idCardBackDetectionThreshold, idCardFrontFocusThreshold, idCardBackFocusThreshold, goodIdCardFrontFramesThreshold, goodIdCardBackFramesThreshold, readTextPrompt, readTextTimeoutDurationMs, readTextMinReadingMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, idCaptureLoadingOverlayMode, idCaptureGuideType, idCapturePortraitGuidesOnMobile, idCaptureRotateLoadingOverlayImageWhenPortrait, idCaptureModelLoadTimeoutMs, faceLivenessLoadingOverlayMode, disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, silentFallback, mergeAVStreams, assets, classNames, colors, verbiage, debugMode, }: VideoIdWizardProps) => ReactElement;

package/dist/lib/camera/useVideoRecorder.d.ts

@@ -1,5 +1,5 @@
 import { Camera } from './Camera';
-export declare const useVideoRecorder: (camera: Camera | null, audioStream?: MediaStream | null) => {
+export declare const useVideoRecorder: (camera: Camera | null, audioStream?: MediaStream | null, mergeAVStreams?: boolean) => {
     isRecordingVideo: boolean;
     isRecordingAudio: boolean;
     startRecordingVideo: () => void;

package/dist/sdk2.cjs.development.js

@@ -51,7 +51,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.1.0';
+var webSdkVersion = '1.1.1';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -15799,7 +15799,10 @@ var SignatureCapture = function SignatureCapture(_a) {
 var AcceptBtn$1 = styled__default['default'](LoaderButton)(templateObject_1$b || (templateObject_1$b = tslib.__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([]);
@@ -15828,7 +15831,13 @@ var useVideoRecorder = function useVideoRecorder(camera, audioStream) {
   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(tslib.__spreadArray(tslib.__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'
@@ -15849,13 +15858,15 @@ var useVideoRecorder = function useVideoRecorder(camera, audioStream) {
     (_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);
@@ -15871,8 +15882,9 @@ var useVideoRecorder = function useVideoRecorder(camera, audioStream) {
         // 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);
@@ -15888,7 +15900,7 @@ var useVideoRecorder = function useVideoRecorder(camera, audioStream) {
       setAudioRecordingStopped(true);
     };
     audioRecorder.current.start(1000);
-  }, [audioStream]);
+  }, [audioStream, mergeAVStreams]);
   var stopRecordingVideo = React.useCallback(function () {
     var _a, _b;
     setVideoRecordingIntentionallyStopped(true);
@@ -16640,80 +16652,86 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     disableFaceDetectionWhileAudioCapture = _6 === void 0 ? false : _6,
     _7 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
     disableFaceDetectionWhileAudioCaptureMsDelay = _7 === void 0 ? 2000 : _7,
-    _8 = _a.assets,
-    assets = _8 === void 0 ? {} : _8,
-    _9 = _a.classNames,
-    classNames = _9 === void 0 ? {} : _9,
-    _10 = _a.colors,
-    colors = _10 === void 0 ? {} : _10,
-    _11 = _a.verbiage,
-    rawVerbiage = _11 === void 0 ? {} : _11,
-    _12 = _a.debugMode,
-    debugMode = _12 === void 0 ? false : _12;
-  var _13 = useResizeObserver__default['default'](),
-    ref = _13.ref,
-    _14 = _13.width,
-    width = _14 === void 0 ? 1 : _14,
-    _15 = _13.height,
-    height = _15 === void 0 ? 1 : _15;
-  var _16 = React.useContext(CameraStateContext),
-    cameraRef = _16.cameraRef,
-    videoRef = _16.videoRef,
-    videoLoaded = _16.videoLoaded,
-    cameraReady = _16.cameraReady,
-    microphoneReady = _16.microphoneReady,
-    audioStream = _16.audioStream,
-    setVideoLoaded = _16.setVideoLoaded,
-    takePhoto = _16.takePhoto;
-  var _17 = React.useState([]),
-    detectedObjects = _17[0],
-    setDetectedObjects = _17[1];
+    _8 = _a.mergeAVStreams,
+    mergeAVStreams = _8 === void 0 ? false : _8,
+    _9 = _a.assets,
+    assets = _9 === void 0 ? {} : _9,
+    _10 = _a.classNames,
+    classNames = _10 === void 0 ? {} : _10,
+    _11 = _a.colors,
+    colors = _11 === void 0 ? {} : _11,
+    _12 = _a.verbiage,
+    rawVerbiage = _12 === void 0 ? {} : _12,
+    _13 = _a.debugMode,
+    debugMode = _13 === void 0 ? false : _13;
+  var _14 = useResizeObserver__default['default'](),
+    ref = _14.ref,
+    _15 = _14.width,
+    width = _15 === void 0 ? 1 : _15,
+    _16 = _14.height,
+    height = _16 === void 0 ? 1 : _16;
+  var _17 = React.useContext(CameraStateContext),
+    cameraRef = _17.cameraRef,
+    videoRef = _17.videoRef,
+    videoLoaded = _17.videoLoaded,
+    cameraReady = _17.cameraReady,
+    microphoneReady = _17.microphoneReady,
+    audioStream = _17.audioStream,
+    setVideoLoaded = _17.setVideoLoaded,
+    takePhoto = _17.takePhoto;
   var _18 = React.useState([]),
-    faces = _18[0],
-    setFaces = _18[1];
-  var _19 = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _19.ready,
-    idModelsWorking = _19.working,
-    makeIdPrediction = _19.makePrediction,
-    onIdPredictionMade = _19.onPredictionMade,
-    setThresholds = _19.setThresholds,
-    bestFrameDetectionScore = _19.bestFrameDetectionScore,
-    bestFrameFocusScore = _19.bestFrameFocusScore,
-    resetBestFrame = _19.resetBestFrame,
-    idModelError = _19.idModelError;
-  var _20 = React.useState(null),
-    videoStartsAt = _20[0],
-    setVideoStartsAt = _20[1];
-  var _21 = React.useContext(SubmissionContext),
-    setIdCaptureVideoAudioStartsAt = _21.setIdCaptureVideoAudioStartsAt,
-    setExpectedAudioText = _21.setExpectedAudioText;
-  var _22 = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
-    onSelfiePredictionMade = _22.onPredictionMade,
-    selfieModelError = _22.error;
-  var _23 = useVideoRecorder(cameraRef.current, audioStream),
-    isRecordingVideo = _23.isRecordingVideo,
-    startRecordingVideo = _23.startRecordingVideo,
-    startRecordingAudio = _23.startRecordingAudio,
-    stopRecordingVideo = _23.stopRecordingVideo,
-    stopRecordingAudio = _23.stopRecordingAudio,
-    videoRecordingUnintentionallyStopped = _23.videoRecordingUnintentionallyStopped,
-    audioRecordingUnintentionallyStopped = _23.audioRecordingUnintentionallyStopped,
-    videoUrl = _23.videoUrl,
-    audioUrl = _23.audioUrl;
+    detectedObjects = _18[0],
+    setDetectedObjects = _18[1];
+  var _19 = React.useState([]),
+    faces = _19[0],
+    setFaces = _19[1];
+  var _20 = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _20.ready,
+    idModelsWorking = _20.working,
+    makeIdPrediction = _20.makePrediction,
+    onIdPredictionMade = _20.onPredictionMade,
+    setThresholds = _20.setThresholds,
+    bestFrameDetectionScore = _20.bestFrameDetectionScore,
+    bestFrameFocusScore = _20.bestFrameFocusScore,
+    resetBestFrame = _20.resetBestFrame,
+    idModelError = _20.idModelError;
+  var _21 = React.useState(null),
+    videoStartsAt = _21[0],
+    setVideoStartsAt = _21[1];
+  var _22 = React.useContext(SubmissionContext),
+    setIdCaptureVideoAudioStartsAt = _22.setIdCaptureVideoAudioStartsAt,
+    setExpectedAudioText = _22.setExpectedAudioText;
+  var _23 = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
+    onSelfiePredictionMade = _23.onPredictionMade,
+    selfieModelError = _23.error;
+  var _24 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
+    isRecordingVideo = _24.isRecordingVideo,
+    startRecordingVideo = _24.startRecordingVideo,
+    startRecordingAudio = _24.startRecordingAudio,
+    stopRecordingVideo = _24.stopRecordingVideo,
+    stopRecordingAudio = _24.stopRecordingAudio,
+    videoRecordingUnintentionallyStopped = _24.videoRecordingUnintentionallyStopped,
+    audioRecordingUnintentionallyStopped = _24.audioRecordingUnintentionallyStopped,
+    videoUrl = _24.videoUrl,
+    audioUrl = _24.audioUrl;
   var countdownTimeoutRef = React.useRef(undefined);
-  var _24 = React.useState(0),
-    countdownRemaining = _24[0],
-    setCountdownRemaining = _24[1];
+  var _25 = React.useState(0),
+    countdownRemaining = _25[0],
+    setCountdownRemaining = _25[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();
@@ -16724,9 +16742,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady && !idModelError && (!readTextPrompt || microphoneReady);
   }, [cameraReady, idModelError, idModelsReady, microphoneReady, readTextPrompt, videoLoaded]);
-  var _25 = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _25[0],
-    setRequestedAction = _25[1];
+  var _26 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _26[0],
+    setRequestedAction = _26[1];
   React.useEffect(function () {
     if (requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
     if (!idCaptureModelsEnabled || !idModelsReady || !cameraReady || !videoLoaded || idModelError) return;
@@ -16754,15 +16772,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
-  var _26 = React.useState(0),
-    currentDetectionScore = _26[0],
-    setCurrentDetectionScore = _26[1];
   var _27 = React.useState(0),
-    currentFocusScore = _27[0],
-    setCurrentFocusScore = _27[1];
+    currentDetectionScore = _27[0],
+    setCurrentDetectionScore = _27[1];
   var _28 = React.useState(0),
-    goodFramesCount = _28[0],
-    setGoodFramesCount = _28[1];
+    currentFocusScore = _28[0],
+    setCurrentFocusScore = _28[1];
+  var _29 = React.useState(0),
+    goodFramesCount = _29[0],
+    setGoodFramesCount = _29[1];
   var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
   var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
@@ -16780,9 +16798,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCaptureModelsEnabled, idCardFrontDetectionThreshold, onIdPredictionMade, idModelError]);
-  var _29 = React.useState(null),
-    idFrontCaptureStartedAt = _29[0],
-    setFirstGoodFrameTime = _29[1];
+  var _30 = React.useState(null),
+    idFrontCaptureStartedAt = _30[0],
+    setFirstGoodFrameTime = _30[1];
   React.useEffect(function () {
     if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
   }, [goodFramesCount]);
@@ -16803,9 +16821,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   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 _30 = React.useState(),
-    countdownStartedAt = _30[0],
-    setCountdownStartedAt = _30[1];
+  var _31 = React.useState(),
+    countdownStartedAt = _31[0],
+    setCountdownStartedAt = _31[1];
   var frameLock = React.useRef(false);
   var captureFrame = React.useCallback(function () {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -16926,9 +16944,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     };
   }, [captureCountdownSeconds, captureFrame, countdownStartedAt, manualCountdown]);
   var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, stopRecording, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
-  var _31 = React.useState(0),
-    numFramesWithoutFaces = _31[0],
-    setNumFramesWithoutFaces = _31[1];
+  var _32 = React.useState(0),
+    numFramesWithoutFaces = _32[0],
+    setNumFramesWithoutFaces = _32[1];
   React.useEffect(function () {
     if (!selfieModelError) {
       onSelfiePredictionMade(function (faces) {
@@ -16946,14 +16964,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
   var theme = styled.useTheme();
-  var _32 = useTranslations(rawVerbiage, {
+  var _33 = useTranslations(rawVerbiage, {
       faceNotCenteredText: 'Please move your face to the center...',
       searchingForIdCardText: 'Searching for ID card...',
       captureBtnText: 'Capture'
     }),
-    captureBtnText = _32.captureBtnText,
-    faceNotCenteredText = _32.faceNotCenteredText,
-    searchingForIdCardText = _32.searchingForIdCardText;
+    captureBtnText = _33.captureBtnText,
+    faceNotCenteredText = _33.faceNotCenteredText,
+    searchingForIdCardText = _33.searchingForIdCardText;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -17194,29 +17212,31 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     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]);
@@ -17247,9 +17267,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
   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);
@@ -17364,6 +17384,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           readTextPrompt: readTextPrompt,
           readTextTimeoutDurationMs: readTextTimeoutDurationMs,
           readTextMinReadingMs: readTextMinReadingMs,
+          mergeAVStreams: mergeAVStreams,
           assets: assets.idVideoCapture,
           classNames: classNames.idVideoCapture,
           colors: colors.idVideoCapture,
@@ -19705,28 +19726,30 @@ var VideoIdValidation = function VideoIdValidation(_a) {
     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 () {
@@ -19757,13 +19780,14 @@ var VideoIdValidation = function VideoIdValidation(_a) {
       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,