idmission-web-sdk 2.3.14 → 2.3.15

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.14';
+  var webSdkVersion = '2.3.15';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1147,11 +1147,11 @@
     if (!allowedAuthUrls.includes(url)) throw new Error('invalid auth url');
     exports.defaultAuthUrl = url;
   }
-  var initialState$6 = {
+  var initialState$7 = {
     authUrl: exports.defaultAuthUrl,
     sessionCheckState: 'READY'
   };
-  var AuthStateContext = /*#__PURE__*/React.createContext(initialState$6);
+  var AuthStateContext = /*#__PURE__*/React.createContext(initialState$7);
   var AuthDispatchContext = /*#__PURE__*/React.createContext(function () {});
   var reducer$4 = function reducer(state, action) {
     switch (action.type) {
@@ -1270,7 +1270,7 @@
     if (authUrl === void 0) {
       authUrl = exports.defaultAuthUrl;
     }
-    var _a = React.useReducer(reducer$4, _assign(_assign({}, initialState$6), {
+    var _a = React.useReducer(reducer$4, _assign(_assign({}, initialState$7), {
         authUrl: authUrl
       })),
       state = _a[0],
@@ -13502,7 +13502,7 @@
     }, [fallbacks, i18n.language, t, verbiage]);
   }
 
-  var initialState$5 = {
+  var initialState$6 = {
     videoRef: {
       current: null
     },
@@ -13525,9 +13525,9 @@
   };
   var createCameraStore = function createCameraStore(config) {
     var store = createStore(function (set, get) {
-      return _assign(_assign(_assign({}, initialState$5), config), {
+      return _assign(_assign(_assign({}, initialState$6), config), {
         reset: function reset() {
-          return set(_assign(_assign({}, initialState$5), config));
+          return set(_assign(_assign({}, initialState$6), config));
         },
         setConfig: function setConfig(config) {
           return set(config);
@@ -14907,7 +14907,7 @@
     };
   }
 
-  var initialState$4 = {
+  var initialState$5 = {
     initialDrawComplete: false,
     redrawing: false,
     guideRectX: 0,
@@ -15267,7 +15267,7 @@
           });
         }
       case 'resetWizard':
-        return _assign(_assign({}, initialState$4), {
+        return _assign(_assign({}, initialState$5), {
           dispatch: state.dispatch,
           allowUploadingDocumentsFromStorage: state.allowUploadingDocumentsFromStorage,
           captureState: state.allowUploadingDocumentsFromStorage ? 'initializing' : 'capturing',
@@ -15279,7 +15279,7 @@
     }
   };
   var useIdCaptureStore = create$1()(devtools(function (set) {
-    return _assign(_assign({}, initialState$4), {
+    return _assign(_assign({}, initialState$5), {
       dispatch: function dispatch(action) {
         return set(function (state) {
           return _reducer(state, action);
@@ -20838,7 +20838,7 @@
   var StyledButtonsRow$6 = styled(ButtonsRow$2)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
   var templateObject_1$m, templateObject_2$i, templateObject_3$d, templateObject_4$8, templateObject_5$5;
 
-  var initialState$3 = {
+  var initialState$4 = {
     busy: false,
     frame: null,
     prediction: null
@@ -20893,7 +20893,7 @@
       width = _k === void 0 ? 1 : _k,
       _l = _j.height,
       height = _l === void 0 ? 1 : _l;
-    var _m = React.useReducer(reducer$3, initialState$3),
+    var _m = React.useReducer(reducer$3, initialState$4),
       _o = _m[0],
       busy = _o.busy,
       prediction = _o.prediction,
@@ -21003,7 +21003,7 @@
   var Container$6 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
   var templateObject_1$l;
 
-  var initialState$2 = {
+  var initialState$3 = {
     frame: null,
     face: null,
     requestState: 'CAPTURING',
@@ -21020,7 +21020,7 @@
     var _a, _b;
     switch (action.type) {
       case 'resetLivenessCheck':
-        return _assign(_assign({}, initialState$2), {
+        return _assign(_assign({}, initialState$3), {
           timesLivenessCheckFailed: state.timesLivenessCheckFailed
         });
       case 'guidanceUnsatisfied':
@@ -21128,7 +21128,7 @@
       checkLiveness = _m.checkLiveness,
       submissionError = _m.submissionError;
     var modelError = useSelfieGuidanceModelsContext().error;
-    var _o = React.useReducer(reducer$2, initialState$2),
+    var _o = React.useReducer(reducer$2, initialState$3),
       state = _o[0],
       dispatch = _o[1];
     var _p = React.useState(null),
@@ -23251,120 +23251,141 @@
   function clearAudioChunks() {
     audioChunks = [];
   }
-  var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
+  var initialState$2 = {
+    videoUrl: null,
+    audioUrl: null,
+    isRecordingVideo: false,
+    isRecordingAudio: false,
+    videoRecordingStopped: false,
+    audioRecordingStopped: false,
+    videoRecordingIntentionallyStopped: false,
+    audioRecordingIntentionallyStopped: false,
+    mergeAVStreams: false
+  };
+  var useVideoRecorderStore = create$1()(devtools(function (set, get) {
+    return _assign(_assign({}, initialState$2), {
+      startRecordingVideo: function startRecordingVideo(camera, audioStream) {
+        var _a, _b, _c;
+        var videoStream = get().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), (_c = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getTracks()) !== null && _c !== void 0 ? _c : [], true)) : camera.stream;
+        if (!videoStream) return;
+        clearVideoChunks();
+        setVideoRecorder(null);
+        set({
+          isRecordingVideo: true,
+          videoRecordingStopped: false,
+          videoRecordingIntentionallyStopped: false
+        });
+        var videoRecorder = new MediaRecorder(videoStream, {
+          videoBitsPerSecond: 270000,
+          audioBitsPerSecond: 32000
+        });
+        setVideoRecorder(videoRecorder);
+        videoRecorder.ondataavailable = function (e) {
+          videoChunks.push(e.data);
+        };
+        videoRecorder.onstop = function () {
+          set({
+            videoRecordingStopped: true
+          });
+        };
+        videoRecorder.start(1000);
+        setTimeout(function () {
+          var videoRecorder = getVideoRecorder();
+          if (!videoRecorder || videoRecorder.state === 'inactive') {
+            log('media recorder is inactive!');
+            // TODO: figure out what to do here
+          }
+        }, 100);
+      },
+      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(audioStream) {
+        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(1000);
+      },
+      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;
     }
-    var _a = React.useState(null),
-      videoUrl = _a[0],
-      setVideoUrl = _a[1];
-    var _b = React.useState(null),
-      audioUrl = _b[0],
-      setAudioUrl = _b[1];
-    var _c = React.useState(false),
-      isRecordingVideo = _c[0],
-      setIsRecordingVideo = _c[1];
-    var _d = React.useState(false),
-      isRecordingAudio = _d[0],
-      setIsRecordingAudio = _d[1];
-    var _e = React.useState(false),
-      videoRecordingStopped = _e[0],
-      setVideoRecordingStopped = _e[1];
-    var _f = React.useState(false),
-      audioRecordingStopped = _f[0],
-      setAudioRecordingStopped = _f[1];
-    var _g = React.useState(false),
-      videoRecordingIntentionallyStopped = _g[0],
-      setVideoRecordingIntentionallyStopped = _g[1];
-    var _h = React.useState(false),
-      audioRecordingIntentionallyStopped = _h[0],
-      setAudioRecordingIntentionallyStopped = _h[1];
-    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]);
+    React.useEffect(function () {
+      return useVideoRecorderStore.setState({
+        mergeAVStreams: mergeAVStreams
+      });
+    }, [mergeAVStreams]);
     var processVideo = React.useCallback(function () {
       var videoBlob = new Blob(videoChunks, {
         type: 'video/mp4'
       });
-      setVideoUrl(URL.createObjectURL(videoBlob));
+      useVideoRecorderStore.setState({
+        videoUrl: URL.createObjectURL(videoBlob),
+        isRecordingVideo: false
+      });
       clearVideoChunks();
-      setIsRecordingVideo(false);
       setVideoRecorder(null);
-      camera === null || camera === void 0 ? void 0 : camera.release();
-    }, [camera]);
+    }, []);
     var processAudio = React.useCallback(function () {
-      var _a;
       var audioBlob = new Blob(audioChunks, {
         type: 'audio/mp4'
       });
-      setAudioUrl(URL.createObjectURL(audioBlob));
-      clearAudioChunks();
-      setIsRecordingAudio(false);
-      setAudioRecorder(null);
-      (_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;
-      clearVideoChunks();
-      setIsRecordingVideo(true);
-      setVideoRecordingStopped(false);
-      setVideoRecordingIntentionallyStopped(false);
-      var videoRecorder = new MediaRecorder(videoStream, {
-        videoBitsPerSecond: 270000,
-        audioBitsPerSecond: 32000
+      useVideoRecorderStore.setState({
+        audioUrl: URL.createObjectURL(audioBlob),
+        isRecordingAudio: false
       });
-      setVideoRecorder(videoRecorder);
-      videoRecorder.ondataavailable = function (e) {
-        videoChunks.push(e.data);
-      };
-      videoRecorder.onstop = function () {
-        setVideoRecordingStopped(true);
-      };
-      videoRecorder.start(1000);
-      setTimeout(function () {
-        var _a;
-        if (((_a = getVideoRecorder()) === null || _a === void 0 ? void 0 : _a.state) === 'inactive') {
-          log('media recorder is inactive!');
-          // TODO: figure out what to do here
-        }
-      }, 100);
-    }, [getVideoStream]);
-    var startRecordingAudio = React.useCallback(function () {
-      if (mergeAVStreams) return;
-      if (!audioStream) return;
       clearAudioChunks();
-      setIsRecordingAudio(true);
-      setAudioRecordingStopped(false);
-      setAudioRecordingIntentionallyStopped(false);
-      var audioRecorder = new MediaRecorder(audioStream, {
-        audioBitsPerSecond: 32000
-      });
-      setAudioRecorder(audioRecorder);
-      audioRecorder.ondataavailable = function (e) {
-        audioChunks.push(e.data);
-      };
-      audioRecorder.onstop = function () {
-        setAudioRecordingStopped(true);
-      };
-      audioRecorder.start(1000);
-    }, [audioStream, mergeAVStreams]);
-    var stopRecordingVideo = React.useCallback(function () {
-      setVideoRecordingIntentionallyStopped(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.
-      }
-    }, []);
-    var stopRecordingAudio = React.useCallback(function () {
-      setAudioRecordingIntentionallyStopped(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.
-      }
+      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();
@@ -23375,25 +23396,16 @@
         processAudio();
       }
     }, [audioRecordingIntentionallyStopped, audioRecordingStopped, processAudio]);
-    var clearRecordedData = React.useCallback(function () {
-      clearVideoChunks();
-      clearAudioChunks();
-    }, []);
     return React.useMemo(function () {
       return {
         isRecordingVideo: isRecordingVideo,
         isRecordingAudio: isRecordingAudio,
-        startRecordingVideo: startRecordingVideo,
-        startRecordingAudio: startRecordingAudio,
-        stopRecordingVideo: stopRecordingVideo,
-        stopRecordingAudio: stopRecordingAudio,
-        clearRecordedData: clearRecordedData,
         videoRecordingUnintentionallyStopped: videoRecordingStopped && !videoRecordingIntentionallyStopped,
         audioRecordingUnintentionallyStopped: audioRecordingStopped && !audioRecordingIntentionallyStopped,
         videoUrl: videoUrl,
         audioUrl: audioUrl
       };
-    }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, clearRecordedData, isRecordingAudio, isRecordingVideo, startRecordingAudio, startRecordingVideo, stopRecordingAudio, stopRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
+    }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, isRecordingAudio, isRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
   };
 
   var signatureRecorder = null;
@@ -23407,25 +23419,6 @@
   var clearSignatureChunks = function clearSignatureChunks() {
     return signatureChunks = [];
   };
-  var recordingLock = false;
-  var setRecordingLock = function setRecordingLock(lock) {
-    return recordingLock = lock;
-  };
-  var recordingLockEngaged = function recordingLockEngaged() {
-    return recordingLock;
-  };
-  function waitForCanvasAvailable(canvasRef) {
-    if (canvasRef.current) return Promise.resolve(null);
-    return new Promise(function (resolve) {
-      var interval = setInterval(function () {
-        log('VideoSignatureContext: waiting for output canvas');
-        if (canvasRef.current) {
-          clearInterval(interval);
-          resolve(null);
-        }
-      }, 100);
-    });
-  }
   var videoSignatureInitialState = {
     startRecording: function startRecording() {
       return null;
@@ -23437,10 +23430,16 @@
       return null;
     },
     isRecording: false,
+    signaturePad: {
+      current: null
+    },
     signatureData: null,
     signatureDataUrl: null,
     signatureVideoData: null,
     signatureVideoUrl: null,
+    outputCanvas: {
+      current: null
+    },
     onAcceptClicked: function onAcceptClicked() {
       return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -23449,72 +23448,24 @@
       });
     }
   };
-  var VideoSignatureContext = /*#__PURE__*/React.createContext(videoSignatureInitialState);
-  function VideoSignatureContextProvider(_a) {
-    var _this = this;
-    var _b, _c;
-    var children = _a.children,
-      _d = _a.captureAudio,
-      captureAudio = _d === void 0 ? false : _d;
-    var signaturePad = React.useRef(null);
-    var _e = React.useState(null),
-      signatureData = _e[0],
-      setSignatureData = _e[1];
-    var _f = React.useState(null),
-      signatureDataUrl = _f[0],
-      setSignatureDataUrl = _f[1];
-    var _g = React.useState(null),
-      signatureVideoData = _g[0],
-      setSignatureVideoData = _g[1];
-    var _h = React.useState(null),
-      signatureVideoUrl = _h[0],
-      setSignatureVideoUrl = _h[1];
-    var _j = useCameraStore(),
-      camera = _j.camera,
-      videoRef = _j.videoRef,
-      audioStream = _j.audioStream;
-    var _k = useVideoRecorder(camera, audioStream, captureAudio),
-      isRecordingVideo = _k.isRecordingVideo,
-      startRecordingVideo = _k.startRecordingVideo,
-      stopRecordingVideo = _k.stopRecordingVideo,
-      startRecordingAudio = _k.startRecordingAudio,
-      stopRecordingAudio = _k.stopRecordingAudio,
-      clearRecordedVideoData = _k.clearRecordedData;
-    var outputCanvas = React.useRef(null);
-    var onRecordingStopped = React.useRef(function () {});
-    var _l = React.useState(false),
-      isRecording = _l[0],
-      setIsRecording = _l[1];
-    var startRecording = React.useCallback(function () {
-      return setIsRecording(true);
-    }, []);
-    var stopRecording = React.useCallback(function () {
-      return setIsRecording(false);
-    }, []);
-    var clearRecordedData = React.useCallback(function () {
-      var _a;
-      onRecordingStopped.current = function () {
-        setSignatureVideoUrl(null);
-        setSignatureVideoData(null);
-        setIsRecording(true);
-        onRecordingStopped.current = function () {};
-      };
-      setRecordingLock(false);
-      setIsRecording(false);
-      (_a = getSignatureRecorder()) === null || _a === void 0 ? void 0 : _a.stop();
-      setSignatureRecorder(null);
-    }, []);
-    React.useEffect(function () {
-      if (!isRecording) return;
-      if (recordingLockEngaged()) return;
-      setRecordingLock(true);
-      waitForCanvasAvailable(outputCanvas).then(function () {
+  var useVideoSignatureStore = create$1()(devtools(function (set, get) {
+    return _assign(_assign({}, videoSignatureInitialState), {
+      startRecording: function startRecording(camera, audioStream, captureAudio) {
         var _a;
+        if (captureAudio === void 0) {
+          captureAudio = false;
+        }
+        set({
+          isRecording: true
+        });
         clearSignatureChunks();
-        clearRecordedVideoData();
-        startRecordingVideo();
-        if (captureAudio) startRecordingAudio();
-        var stream = outputCanvas.current.captureStream(24 /* fps */);
+        useVideoRecorderStore.getState().clearRecordedData();
+        var _b = useVideoRecorderStore.getState(),
+          startRecordingVideo = _b.startRecordingVideo,
+          startRecordingAudio = _b.startRecordingAudio;
+        startRecordingVideo(camera, audioStream);
+        if (captureAudio) startRecordingAudio(audioStream);
+        var stream = get().outputCanvas.current.captureStream(24 /* fps */);
         var tracks = [stream.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);
@@ -23526,111 +23477,122 @@
         signatureRecorder.ondataavailable = function (event) {
           signatureChunks.push(event.data);
         };
+        signatureRecorder.start(1000);
+      },
+      stopRecording: function stopRecording() {
+        set({
+          isRecording: false
+        });
+        if (!signatureRecorder) return;
+        signatureRecorder.stop();
         signatureRecorder.onstop = function () {
           log('VideoSignatureContext: onstop');
           var blob = new Blob(signatureChunks, {
             type: 'video/mp4'
           });
-          setSignatureVideoData(blob);
-          setSignatureVideoUrl(URL.createObjectURL(blob));
+          useVideoSignatureStore.setState({
+            signatureVideoData: blob,
+            signatureVideoUrl: URL.createObjectURL(blob)
+          });
           clearSignatureChunks();
           setSignatureRecorder(null);
-          onRecordingStopped.current();
         };
-        signatureRecorder.start(1000);
+        useVideoRecorderStore.getState().stopRecording();
+      },
+      clearRecordedData: function clearRecordedData() {
+        var _a;
+        clearSignatureChunks();
+        useVideoRecorderStore.getState().stopRecordingVideo();
+        useVideoRecorderStore.getState().clearRecordedData();
+        (_a = getSignatureRecorder()) === null || _a === void 0 ? void 0 : _a.stop();
+        setSignatureRecorder(null);
+        set({
+          isRecording: false,
+          signatureVideoData: null,
+          signatureVideoUrl: null
+        });
+      }
+    });
+  }));
+  function VideoSignatureContextProvider(_a) {
+    var _b, _c;
+    var children = _a.children,
+      _d = _a.captureAudio,
+      captureAudio = _d === void 0 ? false : _d;
+    var _e = useCameraStore(),
+      camera = _e.camera,
+      videoRef = _e.videoRef;
+    var isRecordingVideo = useVideoRecorder(captureAudio).isRecordingVideo;
+    var outputCanvas = React.useRef(null);
+    React.useEffect(function () {
+      return useVideoSignatureStore.setState({
+        outputCanvas: outputCanvas
       });
-    }, [audioStream, captureAudio, clearRecordedVideoData, isRecording, startRecordingAudio, startRecordingVideo]);
+    }, []);
+    var isRecording = useVideoSignatureStore().isRecording;
+    // useEffect(() => {
+    //   if (!isRecording || !camera) return
+    //   waitForCanvasAvailable(outputCanvas).then(() => {
+    //     log('VideoSignatureContext: starting recording...')
+    //     clearSignatureChunks()
+    //     const { startRecordingVideo, startRecordingAudio } =
+    //       useVideoRecorderStore.getState()
+    //     startRecordingVideo(camera, audioStream)
+    //     if (captureAudio) startRecordingAudio(audioStream)
+    //     const stream = outputCanvas.current!.captureStream(24 /* fps */)
+    //     const tracks = [stream.getVideoTracks()[0]]
+    //     const audioTrack = audioStream?.getAudioTracks()?.[0]
+    //     if (audioTrack) tracks.push(audioTrack)
+    //     const signatureRecorder = new MediaRecorder(new MediaStream(tracks), {
+    //       videoBitsPerSecond: 270000,
+    //       audioBitsPerSecond: 32000,
+    //     })
+    //     setSignatureRecorder(signatureRecorder)
+    //     signatureRecorder.ondataavailable = (event) => {
+    //       signatureChunks.push(event.data)
+    //     }
+    //     signatureRecorder.start(1000)
+    //   })
+    // }, [audioStream, captureAudio, isRecording, camera])
     var animationFrame = React.useRef(0);
     React.useEffect(function () {
-      if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !camera || !isRecording || !isRecordingVideo) return;
+      if (!videoRef.current || !outputCanvas.current || !camera || !isRecording || !isRecordingVideo) return;
       var ctx = outputCanvas.current.getContext('2d');
       if (!ctx) return;
+      var signaturePad = useVideoSignatureStore.getState().signaturePad;
       animationFrame.current = requestAnimationFrame(function runFrame() {
-        return __awaiter(this, void 0, void 0, function () {
-          var _a, w, h, isPortrait, rect;
-          return __generator(this, function (_b) {
-            if (!signaturePad.current || !videoRef.current || !outputCanvas.current) {
-              cancelAnimationFrame(animationFrame.current);
-              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)];
-            ctx.drawImage(videoRef.current, 0, 0, w, h);
-            ctx.beginPath();
-            ctx.fillStyle = 'rgba(255,255,255,0.5)';
-            ctx.roundRect.apply(ctx, __spreadArray(__spreadArray([], rect, false), [16], false));
-            ctx.fill();
-            ctx.drawImage.apply(ctx, __spreadArray([signaturePad.current.getCanvas()], rect, false));
-            animationFrame.current = requestAnimationFrame(runFrame);
-            return [2 /*return*/];
-          });
-        });
+        if (!signaturePad.current || !videoRef.current || !outputCanvas.current) {
+          cancelAnimationFrame(animationFrame.current);
+          return;
+        }
+        var _a = [videoRef.current.videoWidth, videoRef.current.videoHeight],
+          w = _a[0],
+          h = _a[1];
+        var isPortrait = w < h;
+        outputCanvas.current.width = w;
+        outputCanvas.current.height = h;
+        var 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)];
+        ctx.drawImage(videoRef.current, 0, 0, w, h);
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,255,255,0.5)';
+        ctx.roundRect.apply(ctx, __spreadArray(__spreadArray([], rect, false), [16], false));
+        ctx.fill();
+        ctx.drawImage.apply(ctx, __spreadArray([signaturePad.current.getCanvas()], rect, false));
+        animationFrame.current = requestAnimationFrame(runFrame);
       });
       return function () {
-        cancelAnimationFrame(animationFrame.current);
+        return cancelAnimationFrame(animationFrame.current);
       };
     }, [camera, isRecording, isRecordingVideo, videoRef]);
-    var onAcceptClicked = React.useCallback(function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var signatureData, imageUrl;
-        var _a;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              log('VideoSignatureContext: onAcceptClicked');
-              if (!signaturePad.current) return [2 /*return*/];
-              log('VideoSignatureContext: building signature data...');
-              signatureData = buildSignatureData(signaturePad.current);
-              log('VideoSignatureContext: exporting signature image...');
-              return [4 /*yield*/, exportSignatureImage(signaturePad.current)];
-            case 1:
-              imageUrl = _b.sent();
-              if (imageUrl) signatureData.fileContent = dataUrlToBase64Sync(imageUrl);
-              log('VideoSignatureContext: setting signature data url...');
-              setSignatureDataUrl(imageUrl);
-              setSignatureData(signatureData);
-              log('VideoSignatureContext: stopping recording...');
-              stopRecordingVideo();
-              stopRecordingAudio();
-              log('VideoSignatureContext: stopping signature recorder...');
-              (_a = getSignatureRecorder()) === null || _a === void 0 ? void 0 : _a.stop();
-              return [2 /*return*/];
-          }
-        });
-      });
-    }, [stopRecordingAudio, stopRecordingVideo]);
-    var value = React.useMemo(function () {
-      return {
-        isRecording: isRecording,
-        startRecording: startRecording,
-        stopRecording: stopRecording,
-        clearRecordedData: clearRecordedData,
-        signaturePad: signaturePad,
-        signatureData: signatureData,
-        signatureDataUrl: signatureDataUrl,
-        signatureVideoData: signatureVideoData,
-        signatureVideoUrl: signatureVideoUrl,
-        onAcceptClicked: onAcceptClicked
-      };
-    }, [clearRecordedData, isRecording, onAcceptClicked, signatureData, signatureDataUrl, signatureVideoData, signatureVideoUrl, startRecording, stopRecording]);
-    return /*#__PURE__*/React.createElement(VideoSignatureContext.Provider, {
-      value: value
-    }, children, /*#__PURE__*/React.createElement(InvisibleCanvas, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(InvisibleCanvas, {
       ref: outputCanvas,
       width: (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth,
       height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
     }));
   }
-  function useVideoSignatureContext() {
-    var ctx = React.useContext(VideoSignatureContext);
-    if (!ctx) throw new Error('useVideoSignatureContext cannot be used without ContextProvider');
-    return ctx;
-  }
 
   function VideoSignatureGuides(_a) {
+    var _this = this;
     var _b = _a.requestedAction,
       requestedAction = _b === void 0 ? 'VERIFY_LIVENESS' : _b,
       _c = _a.faceGuideStatus,
@@ -23650,15 +23612,18 @@
       ref = _h.ref,
       width = _h.width,
       height = _h.height;
-    var _j = useVideoSignatureContext(),
-      signaturePad = _j.signaturePad,
-      onAcceptClicked = _j.onAcceptClicked;
-    var _k = React.useState(true),
-      signaturePadEmpty = _k[0],
-      setSignaturePadEmpty = _k[1];
-    var _l = React.useState(false),
-      signatureValid = _l[0],
-      setSignatureValid = _l[1];
+    var signaturePad = React.useRef(null);
+    var _j = React.useState(true),
+      signaturePadEmpty = _j[0],
+      setSignaturePadEmpty = _j[1];
+    var _k = React.useState(false),
+      signatureValid = _k[0],
+      setSignatureValid = _k[1];
+    React.useEffect(function () {
+      return useVideoSignatureStore.setState({
+        signaturePad: signaturePad
+      });
+    }, []);
     var verbiage = useTranslations(rawVerbiage, {
       signaturePadEmptyText: '',
       headTrackingUnsatisfiedText: '',
@@ -23675,13 +23640,41 @@
     var isSigning = requestedAction === 'CAPTURE_SIGNATURE';
     var canClear = isSigning && !signaturePadEmpty;
     var canSubmit = isSigning && signatureValid && headTrackingSatisfied;
-    var _m = React.useState(false),
-      emptyContentDismissed = _m[0],
-      setEmptyContentDismissed = _m[1];
+    var _l = React.useState(false),
+      emptyContentDismissed = _l[0],
+      setEmptyContentDismissed = _l[1];
     var displayEmptyState = requestedAction === 'CAPTURE_SIGNATURE' && signaturePadEmpty && !emptyContentDismissed;
     React.useEffect(function () {
       if (signaturePadEmpty) setEmptyContentDismissed(false);
     }, [signaturePadEmpty]);
+    var onAcceptClicked = React.useCallback(function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var signatureData, imageUrl;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              log('VideoSignatureContext: onAcceptClicked');
+              if (!signaturePad.current) return [2 /*return*/];
+              log('VideoSignatureContext: building signature data...');
+              signatureData = buildSignatureData(signaturePad.current);
+              log('VideoSignatureContext: exporting signature image...', signatureData);
+              return [4 /*yield*/, exportSignatureImage(signaturePad.current)];
+            case 1:
+              imageUrl = _a.sent();
+              if (imageUrl) signatureData.fileContent = dataUrlToBase64Sync(imageUrl);
+              log('VideoSignatureContext: setting signature data url...', imageUrl);
+              useVideoSignatureStore.setState({
+                signatureData: signatureData,
+                signatureDataUrl: imageUrl
+              });
+              log('VideoSignatureContext: stopping signature recorder...');
+              // getSignatureRecorder()?.stop()
+              useVideoSignatureStore.getState().stopRecording();
+              return [2 /*return*/];
+          }
+        });
+      });
+    }, []);
     return /*#__PURE__*/React.createElement(Container$3, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(Inner$1, {
@@ -23784,40 +23777,45 @@
       minSignaturePadPoints = _c === void 0 ? DEFAULT_MIN_SIGNATURE_PAD_POINTS : _c,
       _d = _a.headTrackingBoundaryPercentage,
       headTrackingBoundaryPercentage = _d === void 0 ? DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE : _d,
-      _e = _a.classNames,
-      classNames = _e === void 0 ? {} : _e,
-      _f = _a.colors,
-      colors = _f === void 0 ? {} : _f,
-      _g = _a.verbiage,
-      rawVerbiage = _g === void 0 ? {} : _g,
-      _h = _a.debugMode,
-      debugMode = _h === void 0 ? false : _h;
-    var _j = useCameraStore(useShallow(function (state) {
+      _e = _a.captureAudio,
+      captureAudio = _e === void 0 ? false : _e,
+      _f = _a.classNames,
+      classNames = _f === void 0 ? {} : _f,
+      _g = _a.colors,
+      colors = _g === void 0 ? {} : _g,
+      _h = _a.verbiage,
+      rawVerbiage = _h === void 0 ? {} : _h,
+      _j = _a.debugMode,
+      debugMode = _j === void 0 ? false : _j;
+    var _k = useCameraStore(useShallow(function (state) {
         return {
           camera: state.camera,
+          audioStream: state.audioStream,
           videoWidth: state.videoWidth,
           videoHeight: state.videoHeight
         };
       })),
-      camera = _j.camera,
-      videoWidth = _j.videoWidth,
-      videoHeight = _j.videoHeight;
-    var _k = useSelfieGuidanceModelsContext(),
-      onPredictionMade = _k.onPredictionMade,
-      startHeadTracking = _k.start,
-      stopHeadTracking = _k.stop;
-    var _l = useVideoSignatureContext(),
-      signatureData = _l.signatureData,
-      signatureDataUrl = _l.signatureDataUrl,
-      signatureVideoData = _l.signatureVideoData,
-      startRecording = _l.startRecording,
-      stopRecording = _l.stopRecording,
-      clearRecordedData = _l.clearRecordedData,
-      isRecording = _l.isRecording;
+      camera = _k.camera,
+      audioStream = _k.audioStream,
+      videoWidth = _k.videoWidth,
+      videoHeight = _k.videoHeight;
+    var _l = useSelfieGuidanceModelsContext(),
+      onPredictionMade = _l.onPredictionMade,
+      startHeadTracking = _l.start,
+      stopHeadTracking = _l.stop;
+    var _m = useVideoSignatureStore(),
+      signatureData = _m.signatureData,
+      signatureDataUrl = _m.signatureDataUrl,
+      signatureVideoData = _m.signatureVideoData,
+      startRecording = _m.startRecording,
+      stopRecording = _m.stopRecording,
+      clearRecordedData = _m.clearRecordedData,
+      isRecording = _m.isRecording;
     React.useEffect(function () {
-      startRecording();
+      if (!camera) return;
+      startRecording(camera, audioStream, captureAudio);
       return stopRecording;
-    }, [startRecording, stopRecording]);
+    }, [audioStream, camera, captureAudio, startRecording, stopRecording]);
     React.useEffect(function () {
       setTimeout(startHeadTracking, 1);
       return stopHeadTracking;
@@ -23832,15 +23830,15 @@
         onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
       }
     }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
-    var _m = React.useState(true),
-      headTrackingSatisfied = _m[0],
-      setHeadTrackingSatisfied = _m[1];
-    var _o = React.useState(null),
-      lastFace = _o[0],
-      setLastFace = _o[1];
-    var _p = React.useState(0),
-      numFramesWithoutFaces = _p[0],
-      setNumFramesWithoutFaces = _p[1];
+    var _o = React.useState(true),
+      headTrackingSatisfied = _o[0],
+      setHeadTrackingSatisfied = _o[1];
+    var _p = React.useState(null),
+      lastFace = _p[0],
+      setLastFace = _p[1];
+    var _q = React.useState(0),
+      numFramesWithoutFaces = _q[0],
+      setNumFramesWithoutFaces = _q[1];
     onPredictionMade(f(React.useCallback(function (_a) {
       var face = _a.face;
       if (!camera) return;
@@ -23851,12 +23849,12 @@
         return n + 1;
       });
     }, [camera, headTrackingBoundaryPercentage, videoHeight, videoWidth]), 16));
-    var _q = useResizeObserver(),
-      ref = _q.ref,
-      _r = _q.width,
-      width = _r === void 0 ? 1 : _r,
-      _s = _q.height,
-      height = _s === void 0 ? 1 : _s;
+    var _r = useResizeObserver(),
+      ref = _r.ref,
+      _s = _r.width,
+      width = _s === void 0 ? 1 : _s,
+      _t = _r.height,
+      height = _t === void 0 ? 1 : _t;
     var debugScalingDetails = useDebugScalingDetails({
       enabled: debugMode,
       pageWidth: width,
@@ -24073,6 +24071,7 @@
         return n + 1;
       });
       setCaptureState('CHECKING_LIVENESS');
+      useVideoSignatureStore.getState().clearRecordedData();
     }, [onRetryClicked]);
     var onExitSignatureCapture = React.useCallback(function () {
       setAttempt(function (n) {
@@ -24094,9 +24093,10 @@
       return /*#__PURE__*/React.createElement(VideoSignatureWizardGuides, _assign({}, props, {
         classNames: classNames === null || classNames === void 0 ? void 0 : classNames.guides,
         verbiage: verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides,
-        restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared
+        restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
+        captureAudio: captureAudio
       }));
-    }, [classNames === null || classNames === void 0 ? void 0 : classNames.guides, restartVideoOnSignaturePadCleared, verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides]);
+    }, [captureAudio, classNames === null || classNames === void 0 ? void 0 : classNames.guides, restartVideoOnSignaturePadCleared, verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides]);
     var onExitAfterFailureProp = faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onExitAfterFailure;
     var onExitAfterFailure = React.useCallback(function (resp, req) {
       onExitAfterFailureProp === null || onExitAfterFailureProp === void 0 ? void 0 : onExitAfterFailureProp(resp, req);
@@ -24148,6 +24148,7 @@
             headTrackingBoundaryPercentage: headTrackingBoundaryPercentage,
             restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
             guidesComponent: guidesComponent,
+            captureAudio: captureAudio,
             classNames: classNames,
             colors: colors,
             verbiage: verbiage,
@@ -24172,14 +24173,25 @@
     var status = _a.status,
       _b = _a.restartVideoOnSignaturePadCleared,
       restartVideoOnSignaturePadCleared = _b === void 0 ? true : _b,
-      props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared"]);
-    var clearRecordedData = useVideoSignatureContext().clearRecordedData;
+      _c = _a.captureAudio,
+      captureAudio = _c === void 0 ? false : _c,
+      props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared", "captureAudio"]);
+    var _d = useCameraStore(),
+      camera = _d.camera,
+      audioStream = _d.audioStream;
+    function onClear() {
+      if (!restartVideoOnSignaturePadCleared) return;
+      setTimeout(function () {
+        useVideoSignatureStore.getState().clearRecordedData();
+        setTimeout(function () {
+          useVideoSignatureStore.getState().startRecording(camera, audioStream, captureAudio);
+        }, 100);
+      }, 100);
+    }
     return /*#__PURE__*/React.createElement(VideoSignatureGuides, _assign({}, props, {
       faceGuideStatus: status,
-      requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS',
-      onClearSignaturePadClicked: restartVideoOnSignaturePadCleared ? function () {
-        return setTimeout(clearRecordedData, 100);
-      } : undefined
+      onClearSignaturePadClicked: onClear,
+      requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS'
     }));
   }
   var VideoSignatureWizardWithProviders = function VideoSignatureWizardWithProviders(props) {
@@ -24562,12 +24574,8 @@
       stopSelfieGuidance = _16.stop,
       onSelfiePredictionMade = _16.onPredictionMade,
       selfieModelError = _16.error;
-    var _17 = useVideoRecorder(camera, audioStream, mergeAVStreams),
+    var _17 = useVideoRecorder(mergeAVStreams),
       isRecordingVideo = _17.isRecordingVideo,
-      startRecordingVideo = _17.startRecordingVideo,
-      startRecordingAudio = _17.startRecordingAudio,
-      stopRecordingVideo = _17.stopRecordingVideo,
-      stopRecordingAudio = _17.stopRecordingAudio,
       videoRecordingUnintentionallyStopped = _17.videoRecordingUnintentionallyStopped,
       audioRecordingUnintentionallyStopped = _17.audioRecordingUnintentionallyStopped,
       videoUrl = _17.videoUrl,
@@ -24577,8 +24585,8 @@
       countdownRemaining = _18[0],
       setCountdownRemaining = _18[1];
     React.useEffect(function () {
-      if (!isRecordingVideo && !videoUrl) {
-        startRecordingVideo();
+      if (camera && !isRecordingVideo && !videoUrl) {
+        useVideoRecorderStore.getState().startRecordingVideo(camera, audioStream);
         setVideoStartsAt(new Date());
       }
       // if the mergeAVStreams flag is present, the audio stream is on the video
@@ -24589,7 +24597,7 @@
         releaseCameraAccess();
         onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl, audioUrl);
       }
-    }, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, releaseCameraAccess, startRecordingVideo, videoUrl]);
+    }, [audioStream, audioUrl, camera, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, releaseCameraAccess, videoUrl]);
     React.useEffect(function () {
       if (videoRecordingUnintentionallyStopped || audioRecordingUnintentionallyStopped || !!readTextPrompt && !microphoneReady) {
         onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
@@ -24684,13 +24692,13 @@
       var _a;
       if (translatedText) {
         setRequestedAction('READ_TEXT');
-        startRecordingAudio();
+        useVideoRecorderStore.getState().startRecordingAudio(audioStream);
         setIdCaptureVideoAudioStartsAt(new Date().getTime() - ((_a = videoStartsAt === null || videoStartsAt === void 0 ? void 0 : videoStartsAt.getTime()) !== null && _a !== void 0 ? _a : 0));
         setExpectedAudioText(translatedText);
       } else {
-        stopRecordingVideo();
+        useVideoRecorderStore.getState().stopRecordingVideo();
       }
-    }, [setExpectedAudioText, setIdCaptureVideoAudioStartsAt, startRecordingAudio, stopRecordingVideo, translatedText, videoStartsAt]);
+    }, [audioStream, setExpectedAudioText, setIdCaptureVideoAudioStartsAt, translatedText, videoStartsAt]);
     var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
     var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
     var faceBox = face === null || face === void 0 ? void 0 : face.box;
@@ -24760,9 +24768,9 @@
       };
     }, [isFlipping]);
     var stopRecording = React.useCallback(function () {
-      stopRecordingVideo();
-      stopRecordingAudio();
-    }, [stopRecordingAudio, stopRecordingVideo]);
+      useVideoRecorderStore.getState().stopRecordingVideo();
+      useVideoRecorderStore.getState().stopRecordingAudio();
+    }, []);
     var satisfied = !isFlipping && goodFramesThresholdMet && faceCentered && delaySatisfied;
     React.useEffect(function () {
       if (satisfied && !countdownStartedAt) {