idmission-web-sdk 2.3.92 → 2.3.94

package/dist/sdk2.cjs.development.js

@@ -17,6 +17,7 @@ var middleware = require('zustand/middleware');
 var shallow = require('zustand/react/shallow');
 var cn = require('clsx');
 var SignatureCanvas = require('react-signature-canvas');
+var mediaInfoFactory = require('mediainfo.js');
 var server = require('react-dom/server');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -48,6 +49,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultCompat(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultCompat(i18n);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultCompat(SignatureCanvas);
+var mediaInfoFactory__default = /*#__PURE__*/_interopDefaultCompat(mediaInfoFactory);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -236,7 +238,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.92';
+var webSdkVersion = '2.3.94';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1184,10 +1186,7 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   setIdCaptureVideoUrl: function setIdCaptureVideoUrl() {
     return null;
   },
-  setSignatureStartTimestamp: function setSignatureStartTimestamp() {
-    return null;
-  },
-  setSignatureEndTimestamp: function setSignatureEndTimestamp() {
+  setSignatureVideoMetadata: function setSignatureVideoMetadata() {
     return null;
   },
   setIdCaptureVideoIdFrontImage: function setIdCaptureVideoIdFrontImage() {
@@ -1357,50 +1356,47 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     signatureVideoUrl = _17[0],
     setSignatureVideoUrl = _17[1];
   var _18 = React.useState(null),
-    signatureStartTimestamp = _18[0],
-    setSignatureStartTimestamp = _18[1];
+    signatureVideoMetadata = _18[0],
+    setSignatureVideoMetadata = _18[1];
   var _19 = React.useState(null),
-    signatureEndTimestamp = _19[0],
-    setSignatureEndTimestamp = _19[1];
+    idCaptureVideoUrl = _19[0],
+    setIdCaptureVideoUrl = _19[1];
   var _20 = React.useState(null),
-    idCaptureVideoUrl = _20[0],
-    setIdCaptureVideoUrl = _20[1];
+    idCaptureVideoIdFrontImage = _20[0],
+    setIdCaptureVideoIdFrontImage = _20[1];
   var _21 = React.useState(null),
-    idCaptureVideoIdFrontImage = _21[0],
-    setIdCaptureVideoIdFrontImage = _21[1];
+    idCaptureVideoIdBackImage = _21[0],
+    setIdCaptureVideoIdBackImage = _21[1];
   var _22 = React.useState(null),
-    idCaptureVideoIdBackImage = _22[0],
-    setIdCaptureVideoIdBackImage = _22[1];
+    idCaptureVideoAudioUrl = _22[0],
+    setIdCaptureVideoAudioUrl = _22[1];
   var _23 = React.useState(null),
-    idCaptureVideoAudioUrl = _23[0],
-    setIdCaptureVideoAudioUrl = _23[1];
+    idCaptureVideoAudioStartsAt = _23[0],
+    setIdCaptureVideoAudioStartsAt = _23[1];
   var _24 = React.useState(null),
-    idCaptureVideoAudioStartsAt = _24[0],
-    setIdCaptureVideoAudioStartsAt = _24[1];
+    expectedAudioText = _24[0],
+    setExpectedAudioText = _24[1];
   var _25 = React.useState(null),
-    expectedAudioText = _25[0],
-    setExpectedAudioText = _25[1];
+    additionalDocuments = _25[0],
+    setAdditionalDocuments = _25[1];
   var _26 = React.useState(null),
-    additionalDocuments = _26[0],
-    setAdditionalDocuments = _26[1];
-  var _27 = React.useState(null),
-    geolocationResult = _27[0],
-    setGeolocationResult = _27[1];
-  var _28 = React.useState(0),
-    geolocationAttempts = _28[0],
-    setGeolocationAttempts = _28[1];
-  var _29 = React.useState(false),
-    geolocationBlocked = _29[0],
-    setGeolocationBlocked = _29[1];
+    geolocationResult = _26[0],
+    setGeolocationResult = _26[1];
+  var _27 = React.useState(0),
+    geolocationAttempts = _27[0],
+    setGeolocationAttempts = _27[1];
+  var _28 = React.useState(false),
+    geolocationBlocked = _28[0],
+    setGeolocationBlocked = _28[1];
+  var _29 = React.useState([]),
+    idFrontCaptureAttempts = _29[0],
+    setIdFrontCaptureAttempts = _29[1];
   var _30 = React.useState([]),
-    idFrontCaptureAttempts = _30[0],
-    setIdFrontCaptureAttempts = _30[1];
+    idBackCaptureAttempts = _30[0],
+    setIdBackCaptureAttempts = _30[1];
   var _31 = React.useState([]),
-    idBackCaptureAttempts = _31[0],
-    setIdBackCaptureAttempts = _31[1];
-  var _32 = React.useState([]),
-    selfieCaptureAttempts = _32[0],
-    setSelfieCaptureAttempts = _32[1];
+    selfieCaptureAttempts = _31[0],
+    setSelfieCaptureAttempts = _31[1];
   var logIdFrontCaptureAttempt = React.useCallback(function (attempt) {
     setIdFrontCaptureAttempts(function (attempts) {
       return __spreadArray(__spreadArray([], attempts, true), [attempt], false);
@@ -1497,19 +1493,22 @@ var SubmissionProvider = function SubmissionProvider(_a) {
   var buildSubmissionPayload = React.useCallback(function () {
     return __awaiter(void 0, void 0, void 0, function () {
       function uploadIfPossible(src_1, filename_1) {
-        return __awaiter(this, arguments, void 0, function (src, filename, filetype) {
+        return __awaiter(this, arguments, void 0, function (src, filename, filetype, metadata) {
           if (filetype === void 0) {
             filetype = 'image/jpeg';
           }
+          if (metadata === void 0) {
+            metadata = {};
+          }
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
                 if (!documentServiceUrl) return [2 /*return*/, src];
                 if (!src.startsWith('data:')) src = "data:".concat(filetype, ";base64,").concat(src);
-                return [4 /*yield*/, uploadDocument(src, {
+                return [4 /*yield*/, uploadDocument(src, _assign({
                   filename: filename,
                   filetype: filetype
-                })];
+                }, metadata))];
               case 1:
                 return [2 /*return*/, _a.sent()];
             }
@@ -1518,9 +1517,9 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       }
       var documents, _a, _b, _c, submissionRequest, onBeforeSubmitResult;
       var _d;
-      var _e, _f, _g, _h;
-      return __generator(this, function (_j) {
-        switch (_j.label) {
+      var _e, _f, _g, _h, _j;
+      return __generator(this, function (_k) {
+        switch (_k.label) {
           case 0:
             _d = {
               idFrontImage: idFrontImage,
@@ -1533,24 +1532,24 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             if (!_a) return [3 /*break*/, 2];
             return [4 /*yield*/, videoDataUrlToB64(signatureVideoUrl)];
           case 1:
-            _a = _j.sent();
-            _j.label = 2;
+            _a = _k.sent();
+            _k.label = 2;
           case 2:
             _d.signatureVideo = _a;
             _b = idCaptureVideoUrl;
             if (!_b) return [3 /*break*/, 4];
             return [4 /*yield*/, videoDataUrlToB64(idCaptureVideoUrl)];
           case 3:
-            _b = _j.sent();
-            _j.label = 4;
+            _b = _k.sent();
+            _k.label = 4;
           case 4:
             _d.idCaptureVideo = _b;
             _c = idCaptureVideoAudioUrl;
             if (!_c) return [3 /*break*/, 6];
             return [4 /*yield*/, videoDataUrlToB64(idCaptureVideoAudioUrl)];
           case 5:
-            _c = _j.sent();
-            _j.label = 6;
+            _c = _k.sent();
+            _k.label = 6;
           case 6:
             documents = (_d.idCaptureVideoAudio = _c, _d.idCaptureVideoIdFrontImage = idCaptureVideoIdFrontImage, _d.idCaptureVideoIdBackImage = idCaptureVideoIdBackImage, _d.idFrontIrImage = idFrontIrImage, _d.idBackIrImage = idBackIrImage, _d.idFrontUvImage = idFrontUvImage, _d.idBackUvImage = idBackUvImage, _d);
             if (signatureData) {
@@ -1559,15 +1558,18 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             if (!documentServiceUrl) return [3 /*break*/, 8];
             return [4 /*yield*/, Promise.all(Object.keys(documents).map(function (k) {
               return __awaiter(void 0, void 0, void 0, function () {
-                var filetype, _a, _b;
+                var filetype, metadata, _a, _b;
                 return __generator(this, function (_c) {
                   switch (_c.label) {
                     case 0:
                       if (!documents[k]) return [3 /*break*/, 2];
                       filetype = k.endsWith('Video') ? 'video/mp4' : k.endsWith('Audio') ? 'audio/mp4' : 'image/jpeg';
+                      metadata = k === 'signatureVideo' ? {
+                        filemetadata: JSON.stringify(signatureVideoMetadata)
+                      } : {};
                       _a = documents;
                       _b = k;
-                      return [4 /*yield*/, uploadIfPossible(documents[k], k, filetype)];
+                      return [4 /*yield*/, uploadIfPossible(documents[k], k, filetype, metadata)];
                     case 1:
                       _a[_b] = _c.sent();
                       _c.label = 2;
@@ -1580,8 +1582,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               throw new NetworkError(e.message);
             })];
           case 7:
-            _j.sent();
-            _j.label = 8;
+            _k.sent();
+            _k.label = 8;
           case 8:
             submissionRequest = {
               securityData: {
@@ -1681,11 +1683,9 @@ var SubmissionProvider = function SubmissionProvider(_a) {
                 submissionRequest.customerData.signatureData.signatureVideo = documents.signatureVideo;
               }
             }
-            if (signatureStartTimestamp) {
-              submissionRequest.customerData.signatureStartTimestamp = signatureStartTimestamp;
-            }
-            if (signatureEndTimestamp) {
-              submissionRequest.customerData.signatureEndTimestamp = signatureEndTimestamp;
+            if (signatureVideoMetadata) {
+              (_g = submissionRequest.customerData).signatureData || (_g.signatureData = {});
+              submissionRequest.customerData.signatureData.signatureVideoMetadata = signatureVideoMetadata;
             }
             if (additionalDocuments) {
               submissionRequest.customerData.additionalDocuments = additionalDocuments.map(function (d) {
@@ -1697,11 +1697,11 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               });
             }
             if (documents.idCaptureVideo) {
-              (_g = submissionRequest.customerData).biometricData || (_g.biometricData = {});
+              (_h = submissionRequest.customerData).biometricData || (_h.biometricData = {});
               submissionRequest.customerData.biometricData.videoData = documents.idCaptureVideo;
             }
             if (documents.idCaptureVideoAudio) {
-              (_h = submissionRequest.customerData).biometricData || (_h.biometricData = {});
+              (_j = submissionRequest.customerData).biometricData || (_j.biometricData = {});
               submissionRequest.customerData.biometricData.voiceData = documents.idCaptureVideoAudio;
               submissionRequest.customerData.biometricData.voiceStartTime = idCaptureVideoAudioStartsAt !== null && idCaptureVideoAudioStartsAt !== void 0 ? idCaptureVideoAudioStartsAt : undefined;
               submissionRequest.customerData.biometricData.expectedAudioText = expectedAudioText !== null && expectedAudioText !== void 0 ? expectedAudioText : undefined;
@@ -1721,15 +1721,15 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             if (!onBeforeSubmit.current) return [3 /*break*/, 10];
             return [4 /*yield*/, onBeforeSubmit.current(submissionRequest)];
           case 9:
-            onBeforeSubmitResult = _j.sent();
+            onBeforeSubmitResult = _k.sent();
             if (onBeforeSubmitResult) submissionRequest = onBeforeSubmitResult;
-            _j.label = 10;
+            _k.label = 10;
           case 10:
             return [2 /*return*/, submissionRequest];
         }
       });
     });
-  }, [additionalDocuments, bypassAgeValidation, bypassNameMatching, cardData, clientRequestID, companyId, customerDataMatchConfig, deduplicationEnabled, deduplicationSynchronous, documentServiceUrl, enrollmentId, expectedAudioText, geolocationResult, idBackCaptureAttempts, idBackImage, idBackImageRequired, idBackIrImage, idBackUvImage, idBarcodeImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idCardForFaceMatch, idData, idFrontCaptureAttempts, idFrontImage, idFrontIrImage, idFrontUvImage, idImageResolutionCheck, jobId, manualReviewRequired, needImmediateResponse, passportImage, personalData, selfieCaptureAttempts, selfieImage, signatureData, signatureEndTimestamp, signatureStartTimestamp, signatureVideoUrl, uploadDocument, verifyIdWithExternalDatabases, webhooksClientTraceId, webhooksEnabled, webhooksFireOnReview, webhooksFireOnReviewURL, webhooksSendInputImages, webhooksSendProcessedImages, webhooksStripSpecialCharacters, webhooksURL]);
+  }, [additionalDocuments, bypassAgeValidation, bypassNameMatching, cardData, clientRequestID, companyId, customerDataMatchConfig, deduplicationEnabled, deduplicationSynchronous, documentServiceUrl, enrollmentId, expectedAudioText, geolocationResult, idBackCaptureAttempts, idBackImage, idBackImageRequired, idBackIrImage, idBackUvImage, idBarcodeImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idCardForFaceMatch, idData, idFrontCaptureAttempts, idFrontImage, idFrontIrImage, idFrontUvImage, idImageResolutionCheck, jobId, manualReviewRequired, needImmediateResponse, passportImage, personalData, selfieCaptureAttempts, selfieImage, signatureData, signatureVideoUrl, signatureVideoMetadata, uploadDocument, verifyIdWithExternalDatabases, webhooksClientTraceId, webhooksEnabled, webhooksFireOnReview, webhooksFireOnReviewURL, webhooksSendInputImages, webhooksSendProcessedImages, webhooksStripSpecialCharacters, webhooksURL]);
   var defaultOnSubmit = React.useCallback(function () {
     return __awaiter(void 0, void 0, void 0, function () {
       var submissionResponse_1, payload, host, endpoint, response, statusMessage, submissionResponse_2, e_1, err;
@@ -2028,8 +2028,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       setSelfieImage: setSelfieImage,
       setSignatureData: setSignatureData,
       setSignatureVideoUrl: setSignatureVideoUrl,
-      setSignatureStartTimestamp: setSignatureStartTimestamp,
-      setSignatureEndTimestamp: setSignatureEndTimestamp,
+      setSignatureVideoMetadata: setSignatureVideoMetadata,
       setIdCaptureVideoUrl: setIdCaptureVideoUrl,
       setIdCaptureVideoIdFrontImage: setIdCaptureVideoIdFrontImage,
       setIdCaptureVideoIdBackImage: setIdCaptureVideoIdBackImage,
@@ -14329,194 +14328,23 @@ function inferBlobType(blobPart) {
   return t.length > 0 ? t : undefined;
 }
 
-var videoRecorder = null;
-var audioRecorder = null;
-var videoChunks = [];
-var audioChunks = [];
-function setVideoRecorder(recorder) {
-  videoRecorder = recorder;
-}
-function setAudioRecorder(recorder) {
-  audioRecorder = recorder;
-}
-function clearVideoChunks() {
-  videoChunks = [];
-}
-function clearAudioChunks() {
-  audioChunks = [];
-}
-var initialState$2 = {
-  videoUrl: null,
-  audioUrl: null,
-  isRecordingVideo: false,
-  isRecordingAudio: false,
-  videoRecordingStopped: false,
-  audioRecordingStopped: false,
-  videoRecordingIntentionallyStopped: false,
-  audioRecordingIntentionallyStopped: false,
-  mergeAVStreams: false
-};
-var useVideoRecorderStore = zustand.create()(middleware.devtools(function (set, get) {
-  return _assign(_assign({}, initialState$2), {
-    startRecordingVideo: function startRecordingVideo(captureAudio) {
-      var _a, _b, _c;
-      if (captureAudio === void 0) {
-        captureAudio = false;
-      }
-      if (!camera) throw new Error('Camera not found');
-      var _d = get(),
-        mergeAVStreams = _d.mergeAVStreams,
-        startRecordingAudio = _d.startRecordingAudio;
-      var videoStream = mergeAVStreams ? new MediaStream(__spreadArray(__spreadArray([], (_b = (_a = camera === null || camera === void 0 ? void 0 : camera.stream) === null || _a === void 0 ? void 0 : _a.getTracks()) !== null && _b !== void 0 ? _b : [], true), captureAudio ? (_c = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getTracks()) !== null && _c !== void 0 ? _c : [] : [], true)) : camera.stream;
-      if (!videoStream) return;
-      clearVideoChunks();
-      videoRecorder = null;
-      set({
-        isRecordingVideo: true,
-        videoRecordingStopped: false,
-        videoRecordingIntentionallyStopped: false
-      });
-      videoRecorder = new MediaRecorder(videoStream, {
-        videoBitsPerSecond: 270000,
-        audioBitsPerSecond: 32000
-      });
-      videoRecorder.ondataavailable = function (e) {
-        videoChunks.push(e.data);
-      };
-      videoRecorder.onstop = function () {
-        set({
-          videoRecordingStopped: true
-        });
-      };
-      videoRecorder.start(100);
-      setTimeout(function () {
-        if (!videoRecorder || videoRecorder.state === 'inactive') {
-          log('media recorder is inactive!');
-          // TODO: figure out what to do here
+function makeReadChunk(file) {
+  var _this = this;
+  return function (chunkSize, offset) {
+    return __awaiter(_this, void 0, void 0, function () {
+      var _a;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            _a = Uint8Array.bind;
+            return [4 /*yield*/, file.slice(offset, offset + chunkSize).arrayBuffer()];
+          case 1:
+            return [2 /*return*/, new (_a.apply(Uint8Array, [void 0, _b.sent()]))()];
         }
-      }, 100);
-      if (captureAudio && !mergeAVStreams) {
-        startRecordingAudio();
-      }
-    },
-    stopRecordingVideo: function stopRecordingVideo() {
-      set({
-        videoRecordingIntentionallyStopped: true
       });
-      if ((videoRecorder === null || videoRecorder === void 0 ? void 0 : videoRecorder.state) !== 'inactive') {
-        videoRecorder === null || videoRecorder === void 0 ? void 0 : videoRecorder.stop(); // if you call this while state === 'inactive', an exception is thrown.
-      }
-    },
-    startRecordingAudio: function startRecordingAudio() {
-      if (get().mergeAVStreams) return;
-      if (!audioStream) return;
-      clearAudioChunks();
-      set({
-        isRecordingAudio: true,
-        audioRecordingStopped: false,
-        audioRecordingIntentionallyStopped: false
-      });
-      var audioRecorder = new MediaRecorder(audioStream, {
-        audioBitsPerSecond: 32000
-      });
-      setAudioRecorder(audioRecorder);
-      audioRecorder.ondataavailable = function (e) {
-        audioChunks.push(e.data);
-      };
-      audioRecorder.onstop = function () {
-        set({
-          audioRecordingStopped: true
-        });
-      };
-      audioRecorder.start(100);
-    },
-    stopRecordingAudio: function stopRecordingAudio() {
-      set({
-        audioRecordingIntentionallyStopped: true
-      });
-      if ((audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.state) !== 'inactive') {
-        audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.stop(); // if you call this while state === 'inactive', an exception is thrown.
-      }
-    },
-    stopRecording: function stopRecording() {
-      get().stopRecordingVideo();
-      get().stopRecordingAudio();
-    },
-    clearRecordedData: function clearRecordedData() {
-      clearVideoChunks();
-      clearAudioChunks();
-    }
-  });
-}));
-var useVideoRecorder = function useVideoRecorder(mergeAVStreams) {
-  if (mergeAVStreams === void 0) {
-    mergeAVStreams = false;
-  }
-  React.useEffect(function () {
-    return useVideoRecorderStore.setState({
-      mergeAVStreams: mergeAVStreams
-    });
-  }, [mergeAVStreams]);
-  React.useEffect(function () {
-    // clear recorded data when the component is mounted
-    useVideoRecorderStore.getState().clearRecordedData();
-  }, []);
-  var processVideo = React.useCallback(function () {
-    var inferredType = inferBlobType(videoChunks[0]) || (videoRecorder === null || videoRecorder === void 0 ? void 0 : videoRecorder.mimeType) || 'video/mp4';
-    var videoBlob = new Blob(videoChunks, {
-      type: inferredType
-    });
-    useVideoRecorderStore.setState({
-      videoUrl: URL.createObjectURL(videoBlob),
-      isRecordingVideo: false
     });
-    clearVideoChunks();
-    setVideoRecorder(null);
-  }, []);
-  var processAudio = React.useCallback(function () {
-    var inferredType = inferBlobType(audioChunks[0]) || (audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.mimeType) || 'audio/mp4';
-    var audioBlob = new Blob(audioChunks, {
-      type: inferredType
-    });
-    useVideoRecorderStore.setState({
-      audioUrl: URL.createObjectURL(audioBlob),
-      isRecordingAudio: false
-    });
-    clearAudioChunks();
-    setAudioRecorder(null);
-  }, []);
-  var _a = useVideoRecorderStore(),
-    videoUrl = _a.videoUrl,
-    audioUrl = _a.audioUrl,
-    isRecordingVideo = _a.isRecordingVideo,
-    isRecordingAudio = _a.isRecordingAudio,
-    videoRecordingStopped = _a.videoRecordingStopped,
-    videoRecordingIntentionallyStopped = _a.videoRecordingIntentionallyStopped,
-    audioRecordingStopped = _a.audioRecordingStopped,
-    audioRecordingIntentionallyStopped = _a.audioRecordingIntentionallyStopped;
-  React.useEffect(function () {
-    if (videoRecordingStopped && videoRecordingIntentionallyStopped) {
-      processVideo();
-    }
-  }, [processVideo, videoRecordingIntentionallyStopped, videoRecordingStopped]);
-  React.useEffect(function () {
-    if (audioRecordingStopped && audioRecordingIntentionallyStopped) {
-      processAudio();
-    }
-  }, [audioRecordingIntentionallyStopped, audioRecordingStopped, processAudio]);
-  return React.useMemo(function () {
-    return {
-      isRecordingVideo: isRecordingVideo,
-      isRecordingAudio: isRecordingAudio,
-      videoRecordingUnintentionallyStopped: videoRecordingStopped && !videoRecordingIntentionallyStopped,
-      audioRecordingUnintentionallyStopped: audioRecordingStopped && !audioRecordingIntentionallyStopped,
-      videoUrl: videoUrl,
-      audioUrl: audioUrl
-    };
-  }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, isRecordingAudio, isRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
-};
-
-var RECORDING_TIMESTAMP_PADDING_MS = 1000;
+  };
+}
 var signatureRecorder = null;
 var signatureChunks = [];
 var videoSignatureInitialState = {
@@ -14544,27 +14372,31 @@ var videoSignatureInitialState = {
 var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set, get) {
   return _assign(_assign({}, videoSignatureInitialState), {
     startRecording: function startRecording(captureAudio) {
-      var _a;
+      var _a, _b;
       if (captureAudio === void 0) {
         captureAudio = false;
       }
       if (!camera) throw new Error('Camera not found');
       // set our flag and clear whatever we have recorded so far.
-      set({
-        recordingStartedAt: performance.now()
-      });
       signatureChunks = [];
-      // start recording video and audio
-      useVideoRecorderStore.getState().startRecordingVideo(captureAudio);
+      var outputCanvas = get().outputCanvas;
       // start recording from the output canvas to capture the signature
-      var videoStream = get().outputCanvas.current.captureStream(24); // fps
-      var tracks = [videoStream.getVideoTracks()[0]];
-      var audioTrack = (_a = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getAudioTracks()) === null || _a === void 0 ? void 0 : _a[0];
-      if (audioTrack) tracks.push(audioTrack);
+      var outputStream = (_a = outputCanvas.current) === null || _a === void 0 ? void 0 : _a.captureStream(24);
+      if (!outputStream) throw new Error('outputStream not found');
+      var tracks = [outputStream.getVideoTracks()[0]];
+      if (captureAudio) {
+        var audioTrack = (_b = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getAudioTracks()) === null || _b === void 0 ? void 0 : _b[0];
+        if (audioTrack) tracks.push(audioTrack);
+      }
       signatureRecorder = new MediaRecorder(new MediaStream(tracks), {
-        videoBitsPerSecond: 270000,
+        videoBitsPerSecond: 650000,
         audioBitsPerSecond: 32000
       });
+      signatureRecorder.onstart = function () {
+        set({
+          recordingStartedAt: performance.now()
+        });
+      };
       var hasFirstChunk = false;
       signatureRecorder.ondataavailable = function (event) {
         signatureChunks.push(event.data);
@@ -14583,39 +14415,101 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
       signatureRecorder.start(100);
     },
     stopRecording: function stopRecording(signatureData, imageUrl) {
-      set({
-        firstChunkReceivedAt: undefined,
-        recordingStoppedAt: performance.now()
-      });
       waitForOneMoreChunk().then(function () {
         if (!signatureRecorder) return;
         signatureRecorder.stop();
         signatureRecorder.onstop = function () {
-          var inferredType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
-          var blob = new Blob(signatureChunks, {
-            type: inferredType
+          return __awaiter(void 0, void 0, void 0, function () {
+            var recordingStoppedAt, inferredType, blob, _a, onSignatureVideoCaptured, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, lastChunkReceivedAt, mediaInfo;
+            var _b;
+            return __generator(this, function (_c) {
+              switch (_c.label) {
+                case 0:
+                  recordingStoppedAt = performance.now();
+                  set({
+                    recordingStoppedAt: recordingStoppedAt
+                  });
+                  inferredType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
+                  blob = new Blob(signatureChunks, {
+                    type: inferredType
+                  });
+                  signatureChunks = [];
+                  signatureRecorder = null;
+                  if (!signatureData) return [2 /*return*/];
+                  _a = get(), onSignatureVideoCaptured = _a.onSignatureVideoCaptured, recordingStartedAt = _a.recordingStartedAt, firstChunkReceivedAt = _a.firstChunkReceivedAt, signatureStartedAt = _a.signatureStartedAt, signatureEndedAt = _a.signatureEndedAt, lastChunkReceivedAt = _a.lastChunkReceivedAt;
+                  return [4 /*yield*/, (_b = get().mediaInfo) === null || _b === void 0 ? void 0 : _b.analyzeData(blob.size, makeReadChunk(blob))
+                  // const endMs = Math.min(
+                  //   signatureEndedAt ?? Infinity,
+                  //   lastChunkReceivedAt ?? Infinity,
+                  // )
+                  // const signatureStartTimestamp =
+                  //   signatureStartedAt && recordingStartedAt
+                  //     ? formatTimestamp(
+                  //         Math.max(
+                  //           0,
+                  //           signatureStartedAt -
+                  //             recordingStartedAt -
+                  //             RECORDING_TIMESTAMP_PADDING_MS,
+                  //         ),
+                  //       )
+                  //     : undefined
+                  // const signatureEndTimestamp =
+                  //   endMs !== Infinity && recordingStartedAt
+                  //     ? formatTimestamp(
+                  //         Math.min(
+                  //           endMs - recordingStartedAt + RECORDING_TIMESTAMP_PADDING_MS,
+                  //           lastChunkReceivedAt ?? Infinity,
+                  //         ),
+                  //       )
+                  //     : undefined
+                  ];
+                case 1:
+                  mediaInfo = _c.sent();
+                  // const endMs = Math.min(
+                  //   signatureEndedAt ?? Infinity,
+                  //   lastChunkReceivedAt ?? Infinity,
+                  // )
+                  // const signatureStartTimestamp =
+                  //   signatureStartedAt && recordingStartedAt
+                  //     ? formatTimestamp(
+                  //         Math.max(
+                  //           0,
+                  //           signatureStartedAt -
+                  //             recordingStartedAt -
+                  //             RECORDING_TIMESTAMP_PADDING_MS,
+                  //         ),
+                  //       )
+                  //     : undefined
+                  // const signatureEndTimestamp =
+                  //   endMs !== Infinity && recordingStartedAt
+                  //     ? formatTimestamp(
+                  //         Math.min(
+                  //           endMs - recordingStartedAt + RECORDING_TIMESTAMP_PADDING_MS,
+                  //           lastChunkReceivedAt ?? Infinity,
+                  //         ),
+                  //       )
+                  //     : undefined
+                  onSignatureVideoCaptured(blob, signatureData, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, {
+                    mediaInfo: mediaInfo,
+                    mimeType: inferredType,
+                    timingData: {
+                      recordingStartedAt: recordingStartedAt,
+                      firstChunkReceivedAt: firstChunkReceivedAt,
+                      signatureStartedAt: signatureStartedAt,
+                      signatureEndedAt: signatureEndedAt,
+                      recordingStoppedAt: recordingStoppedAt,
+                      lastChunkReceivedAt: lastChunkReceivedAt
+                    }
+                  });
+                  return [2 /*return*/];
+              }
+            });
           });
-          signatureChunks = [];
-          signatureRecorder = null;
-          if (!signatureData) return;
-          var _a = get(),
-            onSignatureVideoCaptured = _a.onSignatureVideoCaptured,
-            recordingStartedAt = _a.recordingStartedAt,
-            signatureStartedAt = _a.signatureStartedAt,
-            signatureEndedAt = _a.signatureEndedAt,
-            lastChunkReceivedAt = _a.lastChunkReceivedAt;
-          var endMs = Math.min(signatureEndedAt !== null && signatureEndedAt !== void 0 ? signatureEndedAt : Infinity, lastChunkReceivedAt !== null && lastChunkReceivedAt !== void 0 ? lastChunkReceivedAt : Infinity);
-          var signatureStartTimestamp = signatureStartedAt && recordingStartedAt ? formatTimestamp(Math.max(0, signatureStartedAt - recordingStartedAt - RECORDING_TIMESTAMP_PADDING_MS)) : undefined;
-          var signatureEndTimestamp = endMs !== Infinity && recordingStartedAt ? formatTimestamp(Math.min(endMs - recordingStartedAt + RECORDING_TIMESTAMP_PADDING_MS, lastChunkReceivedAt !== null && lastChunkReceivedAt !== void 0 ? lastChunkReceivedAt : Infinity)) : undefined;
-          onSignatureVideoCaptured(blob, signatureData, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, signatureStartTimestamp, signatureEndTimestamp);
         };
-        useVideoRecorderStore.getState().stopRecording();
       });
     },
     clearRecordedData: function clearRecordedData() {
       signatureChunks = [];
-      useVideoRecorderStore.getState().stopRecordingVideo();
-      useVideoRecorderStore.getState().clearRecordedData();
       signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.stop();
       signatureRecorder = null;
       set({
@@ -14657,75 +14551,180 @@ function waitForOneMoreChunk(timeoutMs) {
 }
 function VideoSignatureContextProvider(_a) {
   var _this = this;
-  var _b, _c;
+  var _b, _c, _d, _e;
   var children = _a.children,
-    _d = _a.captureAudio,
-    captureAudio = _d === void 0 ? false : _d;
+    _f = _a.captureMediaInfo,
+    captureMediaInfo = _f === void 0 ? false : _f;
   var videoRef = useCameraStore().videoRef;
-  useVideoRecorder(captureAudio);
   var outputCanvas = React.useRef(null);
   React.useEffect(function () {
     return useVideoSignatureStore.setState({
       outputCanvas: outputCanvas
     });
   }, []);
+  var signatureVideoRef = React.useRef(null);
+  var frameCheckCanvas = React.useRef(null);
   React.useEffect(function () {
-    // clear recorded data when the component is mounted
-    useVideoSignatureStore.getState().clearRecordedData();
-  }, []);
-  var _e = useVideoSignatureStore(shallow.useShallow(function (state) {
-      return {
-        recordingStartedAt: state.recordingStartedAt,
-        recordingStoppedAt: state.recordingStoppedAt
-      };
-    })),
-    recordingStartedAt = _e.recordingStartedAt,
-    recordingStoppedAt = _e.recordingStoppedAt;
-  useFrameLoop(React.useCallback(function () {
+    if (!captureMediaInfo) return;
+    mediaInfoFactory__default.default({
+      format: 'object',
+      full: true,
+      locateFile: function locateFile(filename) {
+        return "".concat(DEFAULT_CDN_URL, "/").concat(filename);
+      }
+    }).then(function (mediaInfo) {
+      useVideoSignatureStore.setState({
+        mediaInfo: mediaInfo
+      });
+    })["catch"](function (e) {
+      warn('error loading mediaInfo', e);
+    });
+    return function () {
+      var mediaInfo = useVideoSignatureStore.getState().mediaInfo;
+      if (mediaInfo) {
+        mediaInfo.close();
+        useVideoSignatureStore.setState({
+          mediaInfo: undefined
+        });
+      }
+    };
+  }, [captureMediaInfo]);
+  var signaturePadEmpty = useVideoSignatureStore().signaturePadEmpty;
+  var blankCheckPassed = React.useRef(false);
+  React.useEffect(function () {
+    if (signaturePadEmpty) blankCheckPassed.current = false;
+  }, [signaturePadEmpty]);
+  var drawOutputFrame = React.useCallback(function () {
     return __awaiter(_this, void 0, void 0, function () {
-      var signaturePad, ctx, _a, w, h, isPortrait, rect;
+      var ctx, _a, w, h, isPortrait, rect;
       return __generator(this, function (_b) {
-        signaturePad = useVideoSignatureStore.getState().signaturePad;
-        if (!outputCanvas.current || !signaturePad.current || !videoRef.current) return [2 /*return*/];
+        if (!outputCanvas.current || !signatureVideoRef.current || !videoRef.current) return [2 /*return*/];
         ctx = outputCanvas.current.getContext('2d');
         if (!ctx) return [2 /*return*/];
         _a = [videoRef.current.videoWidth, videoRef.current.videoHeight], w = _a[0], h = _a[1];
         isPortrait = w < h;
         outputCanvas.current.width = w;
         outputCanvas.current.height = h;
-        rect = [w * (isPortrait ? 0.02 : 0.15), h * (isPortrait ? 0.15 : 0.25), w * (isPortrait ? 0.96 : 0.7), h * (isPortrait ? 0.7 : 0.5)];
-        // draw the current video frame
+        rect = [w * (isPortrait ? 0.02 : 0.15),
+        // x
+        h * (isPortrait ? 0.15 : 0.25),
+        // y
+        w * (isPortrait ? 0.96 : 0.7),
+        //  width
+        h * (isPortrait ? 0.7 : 0.5) //   height
+        ];
         ctx.drawImage(videoRef.current, 0, 0, w, h);
-        // draw a semi-transparent white rectangle over the video to simulate a signature pad
         ctx.beginPath();
         ctx.fillStyle = 'rgba(255,255,255,0.5)';
-        ctx.roundRect.apply(ctx, __spreadArray(__spreadArray([], rect, false), [16], false));
+        if (typeof ctx.roundRect === 'function') {
+          ctx.roundRect.apply(ctx, __spreadArray(__spreadArray([], rect, false), [16], false));
+        } else if (typeof ctx.rect === 'function') {
+          ctx.rect.apply(ctx, rect);
+        }
         ctx.fill();
-        // draw whatever the user has drawn on the signature pad
-        ctx.drawImage.apply(ctx, __spreadArray([signaturePad.current.getCanvas()], rect, false));
+        if (signatureVideoRef.current && blankCheckPassed.current) {
+          ctx.drawImage.apply(ctx, __spreadArray([signatureVideoRef.current], rect, false));
+        }
         return [2 /*return*/];
       });
     });
-  }, [videoRef]), {
-    autoStart: !!recordingStartedAt && !recordingStoppedAt,
-    throttleMs: 1000 / 24
-  });
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, children, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
-    ref: outputCanvas,
+  }, [videoRef, outputCanvas]);
+  React.useEffect(function () {
+    if (!signatureVideoRef.current) return;
+    var video = signatureVideoRef.current;
+    function onFrame() {
+      blankCheckPassed.current || (blankCheckPassed.current = !isVideoBlank(signatureVideoRef.current, frameCheckCanvas.current));
+      drawOutputFrame();
+      video.requestVideoFrameCallback(onFrame);
+    }
+    function onPlay() {
+      video.requestVideoFrameCallback(onFrame);
+    }
+    video.addEventListener('play', onPlay);
+    return function () {
+      video.removeEventListener('play', onPlay);
+    };
+  }, [drawOutputFrame]);
+  React.useEffect(function () {
+    if (!videoRef.current) return;
+    var video = videoRef.current;
+    function onFrame() {
+      drawOutputFrame();
+      video.requestVideoFrameCallback(onFrame);
+    }
+    function onPlay() {
+      video.requestVideoFrameCallback(onFrame);
+    }
+    video.addEventListener('play', onPlay);
+    return function () {
+      video.removeEventListener('play', onPlay);
+    };
+  }, [drawOutputFrame, videoRef]);
+  var _g = useVideoSignatureStore(),
+    signaturePad = _g.signaturePad,
+    recordingStartedAt = _g.recordingStartedAt;
+  React.useEffect(function () {
+    var _a;
+    if (!signaturePad.current || !recordingStartedAt) return;
+    (_a = signatureVideoRef.current).srcObject || (_a.srcObject = signaturePad.current.getCanvas().captureStream(24));
+  }, [recordingStartedAt, signaturePad]);
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, children, /*#__PURE__*/React__namespace.default.createElement("video", {
+    ref: signatureVideoRef,
+    autoPlay: true,
+    playsInline: true,
+    muted: true,
+    style: {
+      display: 'none'
+      // position: 'absolute',
+      // top: 0,
+      // left: 0,
+      // width: '100%',
+      // height: '100%',
+      // zIndex: 1000,
+      // pointerEvents: 'none',
+      // opacity: 0.5,
+    }
+  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    ref: frameCheckCanvas,
     width: (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth,
     height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
+  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
+    ref: outputCanvas,
+    width: (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoWidth,
+    height: (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.videoHeight
   }));
 }
-function formatTimestamp(durationMs) {
-  // should be in the format of 00:00:00:00 (hh:mm:ss:cs)
-  var hours = Math.floor(durationMs / 3600000);
-  var minutes = Math.floor(durationMs % 3600000 / 60000);
-  var seconds = Math.floor(durationMs % 60000 / 1000);
-  var milliseconds = durationMs % 1000;
-  // Convert milliseconds to centiseconds (1/100th of a second)
-  var centiseconds = Math.floor(milliseconds / 10);
-  var csString = centiseconds.toString().padStart(2, '0');
-  return "".concat(hours.toString().padStart(2, '0'), ":") + "".concat(minutes.toString().padStart(2, '0'), ":") + "".concat(seconds.toString().padStart(2, '0'), ":") + "".concat(csString);
+// function formatTimestamp(durationMs: number): string {
+//   // should be in the format of 00:00:00:00 (hh:mm:ss:cs)
+//   const hours = Math.floor(durationMs / 3600000)
+//   const minutes = Math.floor((durationMs % 3600000) / 60000)
+//   const seconds = Math.floor((durationMs % 60000) / 1000)
+//   const milliseconds = durationMs % 1000
+//   // Convert milliseconds to centiseconds (1/100th of a second)
+//   const centiseconds = Math.floor(milliseconds / 10)
+//   const csString = centiseconds.toString().padStart(2, '0')
+//   return (
+//     `${hours.toString().padStart(2, '0')}:` +
+//     `${minutes.toString().padStart(2, '0')}:` +
+//     `${seconds.toString().padStart(2, '0')}:` +
+//     `${csString}`
+//   )
+// }
+function isVideoBlank(video, canvas) {
+  if (!video || !canvas) return true;
+  var ctx2 = canvas.getContext('2d');
+  if (!ctx2) return true;
+  ctx2.drawImage(video, 0, 0, canvas.width, canvas.height);
+  return isCanvasBlank(canvas);
+}
+function isCanvasBlank(canvas) {
+  var context = canvas.getContext('2d');
+  if (!context) return true;
+  var pixelBuffer = new Uint32Array(context.getImageData(0, 0, canvas.width, canvas.height).data.buffer);
+  var result = !pixelBuffer.some(function (color) {
+    return color !== 0;
+  });
+  return result;
 }
 
 function VideoSignaturePad(_a) {
@@ -15065,8 +15064,8 @@ var AssetSelectorOption = styled__default.default.div(templateObject_4$3 || (tem
 var templateObject_1$8, templateObject_2$8, templateObject_3$7, templateObject_4$3;
 
 var assetSelectorOpts$1 = [{
-  value: 'video',
-  label: 'Video'
+  value: 'signatureVideo',
+  label: 'Signature Video'
 }, {
   value: 'selfieImage',
   label: 'Selfie Image'
@@ -15081,7 +15080,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     _d = _a.verbiage,
     rawVerbiage = _d === void 0 ? {} : _d;
   var ctx = useSubmissionContext();
-  var _e = React.useState('video'),
+  var _e = React.useState('signatureVideo'),
     displayedAsset = _e[0],
     setDisplayedAsset = _e[1];
   var verbiage = useTranslations(rawVerbiage, {
@@ -15119,7 +15118,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     }, option.label));
   })), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
     className: classNames.videoContainer
-  }, displayedAsset === 'video' && ctx.signatureVideoUrl && ( /*#__PURE__*/React__namespace.default.createElement(StyledVideo, {
+  }, displayedAsset === 'signatureVideo' && ctx.signatureVideoUrl && ( /*#__PURE__*/React__namespace.default.createElement(StyledVideo, {
     className: classNames.video,
     src: ctx.signatureVideoUrl,
     poster: ctx.signatureVideoUrl + '#t=0.1',
@@ -15346,59 +15345,60 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     skipSuccessScreen = _c === void 0 ? false : _c,
     _d = _a.captureAudio,
     captureAudio = _d === void 0 ? false : _d,
-    _e = _a.minSignaturePadPoints,
-    minSignaturePadPoints = _e === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _e,
-    _f = _a.headTrackingDisabled,
-    headTrackingDisabled = _f === void 0 ? false : _f,
-    _g = _a.headTrackingBoundaryPercentage,
-    headTrackingBoundaryPercentage = _g === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE : _g,
-    _h = _a.headTrackingBoundaryType,
-    headTrackingBoundaryType = _h === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_TYPE : _h,
-    _j = _a.allowSignatureAfterLivenessCheckFailure,
-    allowSignatureAfterLivenessCheckFailure = _j === void 0 ? false : _j,
-    _k = _a.restartVideoOnSignaturePadCleared,
-    restartVideoOnSignaturePadCleared = _k === void 0 ? true : _k,
-    _l = _a.skipLivenessValidation,
-    skipLivenessValidation = _l === void 0 ? false : _l,
-    _m = _a.allowManualSelfieCaptureOnLoadingError,
-    allowManualSelfieCaptureOnLoadingError = _m === void 0 ? false : _m,
+    _e = _a.captureMediaInfo,
+    captureMediaInfo = _e === void 0 ? false : _e,
+    _f = _a.minSignaturePadPoints,
+    minSignaturePadPoints = _f === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _f,
+    _g = _a.headTrackingDisabled,
+    headTrackingDisabled = _g === void 0 ? false : _g,
+    _h = _a.headTrackingBoundaryPercentage,
+    headTrackingBoundaryPercentage = _h === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE : _h,
+    _j = _a.headTrackingBoundaryType,
+    headTrackingBoundaryType = _j === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_TYPE : _j,
+    _k = _a.allowSignatureAfterLivenessCheckFailure,
+    allowSignatureAfterLivenessCheckFailure = _k === void 0 ? false : _k,
+    _l = _a.restartVideoOnSignaturePadCleared,
+    restartVideoOnSignaturePadCleared = _l === void 0 ? true : _l,
+    _m = _a.skipLivenessValidation,
+    skipLivenessValidation = _m === void 0 ? false : _m,
+    _o = _a.allowManualSelfieCaptureOnLoadingError,
+    allowManualSelfieCaptureOnLoadingError = _o === void 0 ? false : _o,
     faceLivenessProps = _a.faceLivenessProps,
     guidesComponent = _a.guidesComponent,
-    _o = _a.showFaceGuideThenSignaturePad,
-    showFaceGuideThenSignaturePad = _o === void 0 ? false : _o,
-    _p = _a.assets,
-    assets = _p === void 0 ? {} : _p,
-    _q = _a.classNames,
-    classNames = _q === void 0 ? {} : _q,
-    _r = _a.colors,
-    colors = _r === void 0 ? {} : _r,
-    _s = _a.verbiage,
-    verbiage = _s === void 0 ? {} : _s,
-    _t = _a.debugMode,
-    debugMode = _t === void 0 ? false : _t;
-  var _u = useSubmissionContext(),
-    selfieImage = _u.selfieImage,
-    setSelfieImage = _u.setSelfieImage,
-    setSignatureData = _u.setSignatureData,
-    setSignatureVideoUrl = _u.setSignatureVideoUrl,
-    setSignatureStartTimestamp = _u.setSignatureStartTimestamp,
-    setSignatureEndTimestamp = _u.setSignatureEndTimestamp,
-    logSelfieCaptureAttempt = _u.logSelfieCaptureAttempt,
-    uploadDocument = _u.uploadDocument;
+    _p = _a.showFaceGuideThenSignaturePad,
+    showFaceGuideThenSignaturePad = _p === void 0 ? false : _p,
+    _q = _a.assets,
+    assets = _q === void 0 ? {} : _q,
+    _r = _a.classNames,
+    classNames = _r === void 0 ? {} : _r,
+    _s = _a.colors,
+    colors = _s === void 0 ? {} : _s,
+    _t = _a.verbiage,
+    verbiage = _t === void 0 ? {} : _t,
+    _u = _a.debugMode,
+    debugMode = _u === void 0 ? false : _u;
+  var _v = useSubmissionContext(),
+    selfieImage = _v.selfieImage,
+    setSelfieImage = _v.setSelfieImage,
+    setSignatureData = _v.setSignatureData,
+    setSignatureVideoUrl = _v.setSignatureVideoUrl,
+    setSignatureVideoMetadata = _v.setSignatureVideoMetadata,
+    logSelfieCaptureAttempt = _v.logSelfieCaptureAttempt,
+    uploadDocument = _v.uploadDocument;
   var cameraAccessDenied = useCameraStore(shallow.useShallow(function (state) {
     return {
       cameraAccessDenied: state.cameraAccessDenied
     };
   })).cameraAccessDenied;
-  var _v = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
-    captureState = _v[0],
-    setCaptureState = _v[1];
+  var _w = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
+    captureState = _w[0],
+    setCaptureState = _w[1];
   var operationStartedAt = React.useRef();
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
-  var _w = useSelfieGuidanceModelsContext(),
-    start = _w.start,
-    stop = _w.stop;
+  var _x = useSelfieGuidanceModelsContext(),
+    start = _x.start,
+    stop = _x.stop;
   React.useEffect(function () {
     operationStartedAt.current = new Date();
   }, []);
@@ -15442,25 +15442,24 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
       filetype: 'image/jpeg'
     }).then(onSelfieCaptured);
   }, [logCaptureMetadata, onSelfieCaptured, setSelfieImage, uploadDocument]);
-  var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData, signatureStartTimestamp, signatureEndTimestamp) {
+  var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData, metadata) {
     setSignatureData(signatureData);
     setSignatureVideoUrl(URL.createObjectURL(videoData));
-    if (signatureStartTimestamp) setSignatureStartTimestamp(signatureStartTimestamp);
-    if (signatureEndTimestamp) setSignatureEndTimestamp(signatureEndTimestamp);
+    setSignatureVideoMetadata(metadata);
     setCaptureState('SUCCESS');
-    onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData, signatureStartTimestamp, signatureEndTimestamp);
-  }, [onVideoCaptured, setSignatureData, setSignatureEndTimestamp, setSignatureStartTimestamp, setSignatureVideoUrl]);
-  var _x = React.useState(true),
-    showLoadingOverlay = _x[0],
-    setShowLoadingOverlay = _x[1];
+    onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData, metadata);
+  }, [onVideoCaptured, setSignatureData, setSignatureVideoMetadata, setSignatureVideoUrl]);
+  var _y = React.useState(true),
+    showLoadingOverlay = _y[0],
+    setShowLoadingOverlay = _y[1];
   var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
     setShowLoadingOverlay(false);
     setCaptureState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS');
     useVideoSignatureStore.getState().clearRecordedData();
   }, [skipLivenessValidation]);
-  var _y = React.useState(0),
-    attempt = _y[0],
-    setAttempt = _y[1];
+  var _z = React.useState(0),
+    attempt = _z[0],
+    setAttempt = _z[1];
   var onRetry = React.useCallback(function () {
     onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
     setAttempt(function (n) {
@@ -15509,7 +15508,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   }, [faceLivenessOnLoadingOverlayDismissed, onLoadingOverlayDismissed]);
   return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureContextProvider, {
     key: "video-signature-context-".concat(attempt),
-    captureAudio: captureAudio
+    captureMediaInfo: captureMediaInfo
   }, /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
     className: classNames.cameraFeed
   }), function () {
@@ -15806,6 +15805,196 @@ var IdCardGuideInstructionsContainer = styled__default.default.div(templateObjec
 var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-content: center;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"], ["\n  align-content: center;\n  padding: 8px 12px;\n  font-weight: bold;\n  font-size: 18px;\n"])));
 var templateObject_1$7, templateObject_2$7, templateObject_3$6, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
 
+var videoRecorder = null;
+var audioRecorder = null;
+var videoChunks = [];
+var audioChunks = [];
+function setVideoRecorder(recorder) {
+  videoRecorder = recorder;
+}
+function setAudioRecorder(recorder) {
+  audioRecorder = recorder;
+}
+function clearVideoChunks() {
+  videoChunks = [];
+}
+function clearAudioChunks() {
+  audioChunks = [];
+}
+var initialState$2 = {
+  videoUrl: null,
+  audioUrl: null,
+  isRecordingVideo: false,
+  isRecordingAudio: false,
+  videoRecordingStopped: false,
+  audioRecordingStopped: false,
+  videoRecordingIntentionallyStopped: false,
+  audioRecordingIntentionallyStopped: false,
+  mergeAVStreams: false,
+  onVideoCaptured: function onVideoCaptured() {}
+};
+var useVideoRecorderStore = zustand.create()(middleware.devtools(function (set, get) {
+  return _assign(_assign({}, initialState$2), {
+    startRecordingVideo: function startRecordingVideo(captureAudio) {
+      var _a, _b, _c;
+      if (captureAudio === void 0) {
+        captureAudio = false;
+      }
+      if (!camera) throw new Error('Camera not found');
+      var _d = get(),
+        mergeAVStreams = _d.mergeAVStreams,
+        startRecordingAudio = _d.startRecordingAudio;
+      var videoStream = mergeAVStreams ? new MediaStream(__spreadArray(__spreadArray([], (_b = (_a = camera === null || camera === void 0 ? void 0 : camera.stream) === null || _a === void 0 ? void 0 : _a.getTracks()) !== null && _b !== void 0 ? _b : [], true), captureAudio ? (_c = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getTracks()) !== null && _c !== void 0 ? _c : [] : [], true)) : camera.stream;
+      if (!videoStream) return;
+      clearVideoChunks();
+      videoRecorder = null;
+      set({
+        isRecordingVideo: true,
+        videoRecordingStopped: false,
+        videoRecordingIntentionallyStopped: false
+      });
+      videoRecorder = new MediaRecorder(videoStream, {
+        videoBitsPerSecond: 270000,
+        audioBitsPerSecond: 32000
+      });
+      videoRecorder.ondataavailable = function (e) {
+        videoChunks.push(e.data);
+      };
+      videoRecorder.onstop = function () {
+        set({
+          videoRecordingStopped: true
+        });
+      };
+      videoRecorder.start(100);
+      setTimeout(function () {
+        if (!videoRecorder || videoRecorder.state === 'inactive') {
+          log('media recorder is inactive!');
+          // TODO: figure out what to do here
+        }
+      }, 100);
+      if (captureAudio && !mergeAVStreams) {
+        startRecordingAudio();
+      }
+    },
+    stopRecordingVideo: function stopRecordingVideo() {
+      set({
+        videoRecordingIntentionallyStopped: true
+      });
+      if (videoRecorder && videoRecorder.state !== 'inactive') {
+        videoRecorder.stop();
+      }
+    },
+    startRecordingAudio: function startRecordingAudio() {
+      if (get().mergeAVStreams) return;
+      if (!audioStream) return;
+      clearAudioChunks();
+      set({
+        isRecordingAudio: true,
+        audioRecordingStopped: false,
+        audioRecordingIntentionallyStopped: false
+      });
+      var audioRecorder = new MediaRecorder(audioStream, {
+        audioBitsPerSecond: 32000
+      });
+      setAudioRecorder(audioRecorder);
+      audioRecorder.ondataavailable = function (e) {
+        audioChunks.push(e.data);
+      };
+      audioRecorder.onstop = function () {
+        set({
+          audioRecordingStopped: true
+        });
+      };
+      audioRecorder.start(100);
+    },
+    stopRecordingAudio: function stopRecordingAudio() {
+      set({
+        audioRecordingIntentionallyStopped: true
+      });
+      if ((audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.state) !== 'inactive') {
+        audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.stop(); // if you call this while state === 'inactive', an exception is thrown.
+      }
+    },
+    stopRecording: function stopRecording() {
+      get().stopRecordingVideo();
+      get().stopRecordingAudio();
+    },
+    clearRecordedData: function clearRecordedData() {
+      clearVideoChunks();
+      clearAudioChunks();
+    }
+  });
+}));
+var useVideoRecorder = function useVideoRecorder(mergeAVStreams) {
+  if (mergeAVStreams === void 0) {
+    mergeAVStreams = false;
+  }
+  React.useEffect(function () {
+    return useVideoRecorderStore.setState({
+      mergeAVStreams: mergeAVStreams
+    });
+  }, [mergeAVStreams]);
+  React.useEffect(function () {
+    // clear recorded data when the component is mounted
+    useVideoRecorderStore.getState().clearRecordedData();
+  }, []);
+  var processVideo = React.useCallback(function () {
+    var inferredType = inferBlobType(videoChunks[0]) || (videoRecorder === null || videoRecorder === void 0 ? void 0 : videoRecorder.mimeType) || 'video/mp4';
+    var videoBlob = new Blob(videoChunks, {
+      type: inferredType
+    });
+    var videoUrl = URL.createObjectURL(videoBlob);
+    useVideoRecorderStore.setState({
+      videoUrl: videoUrl,
+      isRecordingVideo: false
+    });
+    clearVideoChunks();
+    setVideoRecorder(null);
+    useVideoRecorderStore.getState().onVideoCaptured(videoUrl);
+  }, []);
+  var processAudio = React.useCallback(function () {
+    var inferredType = inferBlobType(audioChunks[0]) || (audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.mimeType) || 'audio/mp4';
+    var audioBlob = new Blob(audioChunks, {
+      type: inferredType
+    });
+    useVideoRecorderStore.setState({
+      audioUrl: URL.createObjectURL(audioBlob),
+      isRecordingAudio: false
+    });
+    clearAudioChunks();
+    setAudioRecorder(null);
+  }, []);
+  var _a = useVideoRecorderStore(),
+    videoUrl = _a.videoUrl,
+    audioUrl = _a.audioUrl,
+    isRecordingVideo = _a.isRecordingVideo,
+    isRecordingAudio = _a.isRecordingAudio,
+    videoRecordingStopped = _a.videoRecordingStopped,
+    videoRecordingIntentionallyStopped = _a.videoRecordingIntentionallyStopped,
+    audioRecordingStopped = _a.audioRecordingStopped,
+    audioRecordingIntentionallyStopped = _a.audioRecordingIntentionallyStopped;
+  React.useEffect(function () {
+    if (videoRecordingStopped && videoRecordingIntentionallyStopped) {
+      processVideo();
+    }
+  }, [processVideo, videoRecordingIntentionallyStopped, videoRecordingStopped]);
+  React.useEffect(function () {
+    if (audioRecordingStopped && audioRecordingIntentionallyStopped) {
+      processAudio();
+    }
+  }, [audioRecordingIntentionallyStopped, audioRecordingStopped, processAudio]);
+  return React.useMemo(function () {
+    return {
+      isRecordingVideo: isRecordingVideo,
+      isRecordingAudio: isRecordingAudio,
+      videoRecordingUnintentionallyStopped: videoRecordingStopped && !videoRecordingIntentionallyStopped,
+      audioRecordingUnintentionallyStopped: audioRecordingStopped && !audioRecordingIntentionallyStopped,
+      videoUrl: videoUrl,
+      audioUrl: audioUrl
+    };
+  }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, isRecordingAudio, isRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
+};
+
 var ReadTextPrompt = function ReadTextPrompt(_a) {
   var onComplete = _a.onComplete,
     _b = _a.durationMs,