idmission-web-sdk 2.3.21 → 2.3.23

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.21';
+  var webSdkVersion = '2.3.23';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -9354,14 +9354,13 @@
     });
   }
 
-  function useFrameLoop(fn, _a) {
-    var _b = _a.throttleMs,
-      throttleMs = _b === void 0 ? 0 : _b,
-      _c = _a.autoStart,
-      autoStart = _c === void 0 ? false : _c;
-    var _d = React.useState(false),
-      running = _d[0],
-      setRunning = _d[1];
+  function useFrameLoop(fn, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var _a = React.useState(false),
+      running = _a[0],
+      setRunning = _a[1];
     var startedAtRef = React.useRef(null);
     var loopId = React.useRef(0);
     var frameId = React.useRef(0);
@@ -9369,36 +9368,36 @@
       if (!running) return;
       var timer;
       var currentLoopId = loopId.current;
-      function renderPrediction() {
+      function hotLoop() {
         return __awaiter(this, void 0, void 0, function () {
           var start, timeRunning, took, amountToThrottle;
-          var _a, _b;
-          return __generator(this, function (_c) {
-            switch (_c.label) {
+          var _a, _b, _c;
+          return __generator(this, function (_d) {
+            switch (_d.label) {
               case 0:
                 if (currentLoopId !== loopId.current) return [2 /*return*/];
                 start = new Date().getTime();
                 timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
                 return [4 /*yield*/, fn(frameId.current, timeRunning)];
               case 1:
-                _c.sent();
+                _d.sent();
                 took = new Date().getTime() - start;
-                amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
+                amountToThrottle = Math.max(((_c = options.throttleMs) !== null && _c !== void 0 ? _c : 0) - took, 0);
                 timer = setTimeout(function () {
-                  frameId.current = requestAnimationFrame(renderPrediction);
+                  frameId.current = requestAnimationFrame(hotLoop);
                 }, amountToThrottle);
                 return [2 /*return*/];
             }
           });
         });
       }
-      renderPrediction().then();
+      void hotLoop();
       return function () {
         loopId.current += 1;
         if (frameId.current) cancelAnimationFrame(frameId.current);
         if (timer) clearTimeout(timer);
       };
-    }, [fn, running, throttleMs]);
+    }, [fn, running, options.throttleMs]);
     var start = React.useCallback(function () {
       startedAtRef.current = new Date();
       setRunning(true);
@@ -9409,11 +9408,9 @@
       startedAtRef.current = null;
     }, []);
     React.useEffect(function startAutomatically() {
-      if (autoStart) start();
-      return function () {
-        stop();
-      };
-    }, [autoStart, start, stop]);
+      if (options.autoStart) start();
+      return stop;
+    }, [options.autoStart, start, stop]);
     return {
       start: start,
       stop: stop
@@ -23236,9 +23233,6 @@
   var audioRecorder = null;
   var videoChunks = [];
   var audioChunks = [];
-  function getVideoRecorder() {
-    return videoRecorder;
-  }
   function setVideoRecorder(recorder) {
     videoRecorder = recorder;
   }
@@ -23266,20 +23260,22 @@
     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;
+        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), (_c = audioStream === null || audioStream === void 0 ? void 0 : audioStream.getTracks()) !== null && _c !== void 0 ? _c : [], true)) : camera.stream;
         if (!videoStream) return;
         clearVideoChunks();
-        setVideoRecorder(null);
+        videoRecorder = null;
         set({
           isRecordingVideo: true,
           videoRecordingStopped: false,
           videoRecordingIntentionallyStopped: false
         });
-        var videoRecorder = new MediaRecorder(videoStream, {
+        videoRecorder = new MediaRecorder(videoStream, {
           videoBitsPerSecond: 270000,
           audioBitsPerSecond: 32000
         });
-        setVideoRecorder(videoRecorder);
         videoRecorder.ondataavailable = function (e) {
           videoChunks.push(e.data);
         };
@@ -23290,12 +23286,14 @@
         };
         videoRecorder.start(100);
         setTimeout(function () {
-          var videoRecorder = getVideoRecorder();
           if (!videoRecorder || videoRecorder.state === 'inactive') {
             log('media recorder is inactive!');
             // TODO: figure out what to do here
           }
         }, 100);
+        if (audioStream && !mergeAVStreams) {
+          startRecordingAudio(audioStream);
+        }
       },
       stopRecordingVideo: function stopRecordingVideo() {
         set({
@@ -23413,16 +23411,7 @@
   };
 
   var signatureRecorder = null;
-  var getSignatureRecorder = function getSignatureRecorder() {
-    return signatureRecorder;
-  };
-  var setSignatureRecorder = function setSignatureRecorder(recorder) {
-    return signatureRecorder = recorder;
-  };
   var signatureChunks = [];
-  var clearSignatureChunks = function clearSignatureChunks() {
-    return signatureChunks = [];
-  };
   var videoSignatureInitialState = {
     startRecording: function startRecording() {
       return null;
@@ -23437,19 +23426,11 @@
     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) {
-          return [2 /*return*/];
-        });
-      });
+    onSignatureVideoCaptured: function onSignatureVideoCaptured() {
+      return null;
     }
   };
   var useVideoSignatureStore = create$1()(devtools(function (set, get) {
@@ -23459,25 +23440,22 @@
         if (captureAudio === void 0) {
           captureAudio = false;
         }
+        // set our flag and clear whatever we have recorded so far.
         set({
           isRecording: true
         });
-        clearSignatureChunks();
-        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]];
+        signatureChunks = [];
+        // start recording video and audio
+        useVideoRecorderStore.getState().startRecordingVideo(camera, captureAudio ? audioStream : undefined);
+        // 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 signatureRecorder = new MediaRecorder(new MediaStream(tracks), {
+        signatureRecorder = new MediaRecorder(new MediaStream(tracks), {
           videoBitsPerSecond: 270000,
           audioBitsPerSecond: 32000
         });
-        setSignatureRecorder(signatureRecorder);
         signatureRecorder.ondataavailable = function (event) {
           signatureChunks.push(event.data);
         };
@@ -23490,43 +23468,41 @@
         if (!signatureRecorder) return;
         signatureRecorder.stop();
         signatureRecorder.onstop = function () {
-          log('VideoSignatureContext: onstop');
           var blob = new Blob(signatureChunks, {
             type: 'video/mp4'
           });
-          useVideoSignatureStore.setState({
-            signatureVideoData: blob,
-            signatureVideoUrl: URL.createObjectURL(blob)
+          signatureChunks = [];
+          signatureRecorder = null;
+          var signaturePad = get().signaturePad.current;
+          if (!signaturePad) throw new Error('Signature pad not found');
+          var signatureData = buildSignatureData(signaturePad);
+          exportSignatureImage(signaturePad).then(function (imageUrl) {
+            if (imageUrl) signatureData.fileContent = dataUrlToBase64Sync(imageUrl);
+            get().onSignatureVideoCaptured(blob, signatureData, imageUrl);
           });
-          clearSignatureChunks();
-          setSignatureRecorder(null);
         };
         useVideoRecorderStore.getState().stopRecording();
       },
       clearRecordedData: function clearRecordedData() {
-        var _a;
-        clearSignatureChunks();
+        signatureChunks = [];
         useVideoRecorderStore.getState().stopRecordingVideo();
         useVideoRecorderStore.getState().clearRecordedData();
-        (_a = getSignatureRecorder()) === null || _a === void 0 ? void 0 : _a.stop();
-        setSignatureRecorder(null);
+        signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.stop();
+        signatureRecorder = null;
         set({
-          isRecording: false,
-          signatureVideoData: null,
-          signatureVideoUrl: null
+          isRecording: false
         });
       }
     });
   }));
   function VideoSignatureContextProvider(_a) {
+    var _this = this;
     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 videoRef = useCameraStore().videoRef;
+    useVideoRecorder(captureAudio);
     var outputCanvas = React.useRef(null);
     React.useEffect(function () {
       return useVideoSignatureStore.setState({
@@ -23538,36 +23514,35 @@
       useVideoSignatureStore.getState().clearRecordedData();
     }, []);
     var isRecording = useVideoSignatureStore().isRecording;
-    var animationFrame = React.useRef(0);
-    React.useEffect(function () {
-      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() {
-        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);
+    useFrameLoop(React.useCallback(function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var signaturePad, 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*/];
+          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
+          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));
+          ctx.fill();
+          // draw whatever the user has drawn on the signature pad
+          ctx.drawImage.apply(ctx, __spreadArray([signaturePad.current.getCanvas()], rect, false));
+          return [2 /*return*/];
+        });
       });
-      return function () {
-        return cancelAnimationFrame(animationFrame.current);
-      };
-    }, [camera, isRecording, isRecordingVideo, videoRef]);
+    }, [videoRef]), {
+      autoStart: isRecording,
+      throttleMs: 1000 / 24
+    });
     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,
@@ -23576,7 +23551,6 @@
   }
 
   function VideoSignatureGuides(_a) {
-    var _this = this;
     var _b = _a.requestedAction,
       requestedAction = _b === void 0 ? 'VERIFY_LIVENESS' : _b,
       _c = _a.faceGuideStatus,
@@ -23632,32 +23606,7 @@
       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*/];
-          }
-        });
-      });
+      useVideoSignatureStore.getState().stopRecording();
     }, []);
     return /*#__PURE__*/React.createElement(Container$3, {
       className: classNames.container
@@ -23751,7 +23700,7 @@
   var DEFAULT_MIN_SIGNATURE_PAD_POINTS = 10;
   var DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE = 0.01;
   var VideoSignatureCapture = function VideoSignatureCapture(_a) {
-    var onVideoCaptured = _a.onVideoCaptured,
+    var onSignatureVideoCaptured = _a.onSignatureVideoCaptured,
       onFaceNotDetected = _a.onFaceNotDetected,
       onExit = _a.onExit,
       _b = _a.restartVideoOnSignaturePadCleared,
@@ -23784,17 +23733,19 @@
       videoWidth = _k.videoWidth,
       videoHeight = _k.videoHeight;
     var _l = useSelfieGuidanceModelsContext(),
-      onPredictionMade = _l.onPredictionMade,
+      onHeadTrackingPredictionMade = _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 () {
+      useVideoSignatureStore.setState({
+        onSignatureVideoCaptured: onSignatureVideoCaptured
+      });
+    }, [onSignatureVideoCaptured]);
     React.useEffect(function () {
       if (!camera) return;
       startRecording(camera, audioStream, captureAudio);
@@ -23809,11 +23760,6 @@
     var verbiage = useTranslations(rawVerbiage, {
       guidanceMessageText: 'Please sign the box below'
     });
-    React.useEffect(function () {
-      if (signatureVideoData && signatureData && signatureDataUrl) {
-        onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
-      }
-    }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
     var _o = React.useState(true),
       headTrackingSatisfied = _o[0],
       setHeadTrackingSatisfied = _o[1];
@@ -23823,7 +23769,7 @@
     var _q = React.useState(0),
       numFramesWithoutFaces = _q[0],
       setNumFramesWithoutFaces = _q[1];
-    onPredictionMade(f(React.useCallback(function (_a) {
+    onHeadTrackingPredictionMade(f(React.useCallback(function (_a) {
       var face = _a.face;
       if (!camera) return;
       var nearBoundary = (face === null || face === void 0 ? void 0 : face.box.xMin) < videoWidth * headTrackingBoundaryPercentage || (face === null || face === void 0 ? void 0 : face.box.xMax) > videoWidth * (1 - headTrackingBoundaryPercentage) || (face === null || face === void 0 ? void 0 : face.box.yMin) < videoHeight * headTrackingBoundaryPercentage || (face === null || face === void 0 ? void 0 : face.box.yMax) > videoHeight * (1 - headTrackingBoundaryPercentage);
@@ -24045,6 +23991,7 @@
     var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
       setShowLoadingOverlay(false);
       setCaptureState('CHECKING_LIVENESS');
+      useVideoSignatureStore.getState().clearRecordedData();
     }, []);
     var _u = React.useState(0),
       attempt = _u[0],
@@ -24125,7 +24072,7 @@
           }));
         case 'CAPTURING_SIGNATURE':
           return /*#__PURE__*/React.createElement(VideoSignatureCapture, {
-            onVideoCaptured: onSignatureCaptureCompleted,
+            onSignatureVideoCaptured: onSignatureCaptureCompleted,
             onFaceNotDetected: onSignatureCaptureFacesNotDetected,
             onExit: onExitSignatureCapture,
             minSignaturePadPoints: minSignaturePadPoints,