idmission-web-sdk 2.3.14 → 2.3.16

package/dist/sdk2.esm.js

@@ -204,7 +204,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.14';
+var webSdkVersion = '2.3.16';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -822,11 +822,11 @@ function setDefaultAuthUrl(url) {
   if (!allowedAuthUrls.includes(url)) throw new Error('invalid auth url');
   defaultAuthUrl = url;
 }
-var initialState$6 = {
+var initialState$7 = {
   authUrl: defaultAuthUrl,
   sessionCheckState: 'READY'
 };
-var AuthStateContext = /*#__PURE__*/createContext(initialState$6);
+var AuthStateContext = /*#__PURE__*/createContext(initialState$7);
 var AuthDispatchContext = /*#__PURE__*/createContext(function () {});
 var reducer$4 = function reducer(state, action) {
   switch (action.type) {
@@ -945,7 +945,7 @@ function useAuthReducer(authUrl, sessionId) {
   if (authUrl === void 0) {
     authUrl = defaultAuthUrl;
   }
-  var _a = useReducer(reducer$4, _assign(_assign({}, initialState$6), {
+  var _a = useReducer(reducer$4, _assign(_assign({}, initialState$7), {
       authUrl: authUrl
     })),
     state = _a[0],
@@ -4742,7 +4742,7 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var initialState$5 = {
+var initialState$6 = {
   videoRef: {
     current: null
   },
@@ -4765,9 +4765,9 @@ var initialState$5 = {
 };
 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);
@@ -5784,7 +5784,7 @@ function remainingIdCaptureRequirements(captureRequirement, capturedDocuments, r
   });
 }
 
-var initialState$4 = {
+var initialState$5 = {
   initialDrawComplete: false,
   redrawing: false,
   guideRectX: 0,
@@ -6144,7 +6144,7 @@ var _reducer = function reducer(state, action) {
         });
       }
     case 'resetWizard':
-      return _assign(_assign({}, initialState$4), {
+      return _assign(_assign({}, initialState$5), {
         dispatch: state.dispatch,
         allowUploadingDocumentsFromStorage: state.allowUploadingDocumentsFromStorage,
         captureState: state.allowUploadingDocumentsFromStorage ? 'initializing' : 'capturing',
@@ -6156,7 +6156,7 @@ var _reducer = function reducer(state, action) {
   }
 };
 var useIdCaptureStore = create()(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);
@@ -11700,7 +11700,7 @@ var ImageContainer$6 = styled(OverlayImageContainer)(templateObject_4$8 || (temp
 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
@@ -11755,7 +11755,7 @@ var SelfieCapture = function SelfieCapture(_a) {
     width = _k === void 0 ? 1 : _k,
     _l = _j.height,
     height = _l === void 0 ? 1 : _l;
-  var _m = useReducer(reducer$3, initialState$3),
+  var _m = useReducer(reducer$3, initialState$4),
     _o = _m[0],
     busy = _o.busy,
     prediction = _o.prediction,
@@ -11865,7 +11865,7 @@ var SelfieCapture = function SelfieCapture(_a) {
 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',
@@ -11882,7 +11882,7 @@ var reducer$2 = function reducer(state, action) {
   var _a, _b;
   switch (action.type) {
     case 'resetLivenessCheck':
-      return _assign(_assign({}, initialState$2), {
+      return _assign(_assign({}, initialState$3), {
         timesLivenessCheckFailed: state.timesLivenessCheckFailed
       });
     case 'guidanceUnsatisfied':
@@ -11990,7 +11990,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     checkLiveness = _m.checkLiveness,
     submissionError = _m.submissionError;
   var modelError = useSelfieGuidanceModelsContext().error;
-  var _o = useReducer(reducer$2, initialState$2),
+  var _o = useReducer(reducer$2, initialState$3),
     state = _o[0],
     dispatch = _o[1];
   var _p = useState(null),
@@ -13345,120 +13345,141 @@ function clearVideoChunks() {
 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()(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 = useState(null),
-    videoUrl = _a[0],
-    setVideoUrl = _a[1];
-  var _b = useState(null),
-    audioUrl = _b[0],
-    setAudioUrl = _b[1];
-  var _c = useState(false),
-    isRecordingVideo = _c[0],
-    setIsRecordingVideo = _c[1];
-  var _d = useState(false),
-    isRecordingAudio = _d[0],
-    setIsRecordingAudio = _d[1];
-  var _e = useState(false),
-    videoRecordingStopped = _e[0],
-    setVideoRecordingStopped = _e[1];
-  var _f = useState(false),
-    audioRecordingStopped = _f[0],
-    setAudioRecordingStopped = _f[1];
-  var _g = useState(false),
-    videoRecordingIntentionallyStopped = _g[0],
-    setVideoRecordingIntentionallyStopped = _g[1];
-  var _h = useState(false),
-    audioRecordingIntentionallyStopped = _h[0],
-    setAudioRecordingIntentionallyStopped = _h[1];
-  var getVideoStream = 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]);
+  useEffect(function () {
+    return useVideoRecorderStore.setState({
+      mergeAVStreams: mergeAVStreams
+    });
+  }, [mergeAVStreams]);
   var processVideo = 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 = 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 = 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 = 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 = 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 = 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;
   useEffect(function () {
     if (videoRecordingStopped && videoRecordingIntentionallyStopped) {
       processVideo();
@@ -13469,25 +13490,16 @@ var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStr
       processAudio();
     }
   }, [audioRecordingIntentionallyStopped, audioRecordingStopped, processAudio]);
-  var clearRecordedData = useCallback(function () {
-    clearVideoChunks();
-    clearAudioChunks();
-  }, []);
   return 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;
@@ -13501,25 +13513,6 @@ var signatureChunks = [];
 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;
@@ -13531,10 +13524,16 @@ var videoSignatureInitialState = {
     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) {
@@ -13543,72 +13542,24 @@ var videoSignatureInitialState = {
     });
   }
 };
-var VideoSignatureContext = /*#__PURE__*/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 = useRef(null);
-  var _e = useState(null),
-    signatureData = _e[0],
-    setSignatureData = _e[1];
-  var _f = useState(null),
-    signatureDataUrl = _f[0],
-    setSignatureDataUrl = _f[1];
-  var _g = useState(null),
-    signatureVideoData = _g[0],
-    setSignatureVideoData = _g[1];
-  var _h = 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 = useRef(null);
-  var onRecordingStopped = useRef(function () {});
-  var _l = useState(false),
-    isRecording = _l[0],
-    setIsRecording = _l[1];
-  var startRecording = useCallback(function () {
-    return setIsRecording(true);
-  }, []);
-  var stopRecording = useCallback(function () {
-    return setIsRecording(false);
-  }, []);
-  var clearRecordedData = 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);
-  }, []);
-  useEffect(function () {
-    if (!isRecording) return;
-    if (recordingLockEngaged()) return;
-    setRecordingLock(true);
-    waitForCanvasAvailable(outputCanvas).then(function () {
+var useVideoSignatureStore = create()(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);
@@ -13620,111 +13571,122 @@ function VideoSignatureContextProvider(_a) {
       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 = useRef(null);
+  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 = useRef(0);
   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 = 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 = 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__default.createElement(VideoSignatureContext.Provider, {
-    value: value
-  }, children, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children, /*#__PURE__*/React__default.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 = 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,
@@ -13744,15 +13706,18 @@ function VideoSignatureGuides(_a) {
     ref = _h.ref,
     width = _h.width,
     height = _h.height;
-  var _j = useVideoSignatureContext(),
-    signaturePad = _j.signaturePad,
-    onAcceptClicked = _j.onAcceptClicked;
-  var _k = useState(true),
-    signaturePadEmpty = _k[0],
-    setSignaturePadEmpty = _k[1];
-  var _l = useState(false),
-    signatureValid = _l[0],
-    setSignatureValid = _l[1];
+  var signaturePad = useRef(null);
+  var _j = useState(true),
+    signaturePadEmpty = _j[0],
+    setSignaturePadEmpty = _j[1];
+  var _k = useState(false),
+    signatureValid = _k[0],
+    setSignatureValid = _k[1];
+  useEffect(function () {
+    return useVideoSignatureStore.setState({
+      signaturePad: signaturePad
+    });
+  }, []);
   var verbiage = useTranslations(rawVerbiage, {
     signaturePadEmptyText: '',
     headTrackingUnsatisfiedText: '',
@@ -13769,13 +13734,41 @@ function VideoSignatureGuides(_a) {
   var isSigning = requestedAction === 'CAPTURE_SIGNATURE';
   var canClear = isSigning && !signaturePadEmpty;
   var canSubmit = isSigning && signatureValid && headTrackingSatisfied;
-  var _m = useState(false),
-    emptyContentDismissed = _m[0],
-    setEmptyContentDismissed = _m[1];
+  var _l = useState(false),
+    emptyContentDismissed = _l[0],
+    setEmptyContentDismissed = _l[1];
   var displayEmptyState = requestedAction === 'CAPTURE_SIGNATURE' && signaturePadEmpty && !emptyContentDismissed;
   useEffect(function () {
     if (signaturePadEmpty) setEmptyContentDismissed(false);
   }, [signaturePadEmpty]);
+  var onAcceptClicked = 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__default.createElement(Container$3, {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(Inner$1, {
@@ -13878,40 +13871,45 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     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;
   useEffect(function () {
-    startRecording();
+    if (!camera) return;
+    startRecording(camera, audioStream, captureAudio);
     return stopRecording;
-  }, [startRecording, stopRecording]);
+  }, [audioStream, camera, captureAudio, startRecording, stopRecording]);
   useEffect(function () {
     setTimeout(startHeadTracking, 1);
     return stopHeadTracking;
@@ -13926,15 +13924,15 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
     }
   }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
-  var _m = useState(true),
-    headTrackingSatisfied = _m[0],
-    setHeadTrackingSatisfied = _m[1];
-  var _o = useState(null),
-    lastFace = _o[0],
-    setLastFace = _o[1];
-  var _p = useState(0),
-    numFramesWithoutFaces = _p[0],
-    setNumFramesWithoutFaces = _p[1];
+  var _o = useState(true),
+    headTrackingSatisfied = _o[0],
+    setHeadTrackingSatisfied = _o[1];
+  var _p = useState(null),
+    lastFace = _p[0],
+    setLastFace = _p[1];
+  var _q = useState(0),
+    numFramesWithoutFaces = _q[0],
+    setNumFramesWithoutFaces = _q[1];
   onPredictionMade(useThrottledCallback(useCallback(function (_a) {
     var face = _a.face;
     if (!camera) return;
@@ -13945,12 +13943,12 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       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,
@@ -14167,6 +14165,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
       return n + 1;
     });
     setCaptureState('CHECKING_LIVENESS');
+    useVideoSignatureStore.getState().clearRecordedData();
   }, [onRetryClicked]);
   var onExitSignatureCapture = useCallback(function () {
     setAttempt(function (n) {
@@ -14188,9 +14187,10 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     return /*#__PURE__*/React__default.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 = useCallback(function (resp, req) {
     onExitAfterFailureProp === null || onExitAfterFailureProp === void 0 ? void 0 : onExitAfterFailureProp(resp, req);
@@ -14242,6 +14242,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
           headTrackingBoundaryPercentage: headTrackingBoundaryPercentage,
           restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
           guidesComponent: guidesComponent,
+          captureAudio: captureAudio,
           classNames: classNames,
           colors: colors,
           verbiage: verbiage,
@@ -14266,14 +14267,25 @@ function VideoSignatureWizardGuides(_a) {
   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__default.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) {
@@ -14656,12 +14668,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     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,
@@ -14671,8 +14679,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     countdownRemaining = _18[0],
     setCountdownRemaining = _18[1];
   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
@@ -14683,7 +14691,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       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]);
   useEffect(function () {
     if (videoRecordingUnintentionallyStopped || audioRecordingUnintentionallyStopped || !!readTextPrompt && !microphoneReady) {
       onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
@@ -14778,13 +14786,13 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     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;
@@ -14854,9 +14862,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     };
   }, [isFlipping]);
   var stopRecording = useCallback(function () {
-    stopRecordingVideo();
-    stopRecordingAudio();
-  }, [stopRecordingAudio, stopRecordingVideo]);
+    useVideoRecorderStore.getState().stopRecordingVideo();
+    useVideoRecorderStore.getState().stopRecordingAudio();
+  }, []);
   var satisfied = !isFlipping && goodFramesThresholdMet && faceCentered && delaySatisfied;
   useEffect(function () {
     if (satisfied && !countdownStartedAt) {
@@ -15258,6 +15266,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
       return n + 1;
     });
     setCaptureState('CAPTURING_ID');
+    useVideoRecorderStore.getState().clearRecordedData();
   }, []);
   var isCapturingId = !skipIdCapture && ['LOADING', 'CAPTURING_ID'].includes(captureState);
   useEffect(function () {