idmission-web-sdk 2.3.21 → 2.3.23

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.21';
+var webSdkVersion = '2.3.23';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -3449,14 +3449,13 @@ function applyNonMaxSuppression(detectedObjects, isGoodBox) {
   });
 }
 
-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 = useState(false),
-    running = _d[0],
-    setRunning = _d[1];
+function useFrameLoop(fn, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _a = useState(false),
+    running = _a[0],
+    setRunning = _a[1];
   var startedAtRef = useRef(null);
   var loopId = useRef(0);
   var frameId = useRef(0);
@@ -3464,36 +3463,36 @@ function useFrameLoop(fn, _a) {
     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 = useCallback(function () {
     startedAtRef.current = new Date();
     setRunning(true);
@@ -3504,11 +3503,9 @@ function useFrameLoop(fn, _a) {
     startedAtRef.current = null;
   }, []);
   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
@@ -13330,9 +13327,6 @@ var videoRecorder = null;
 var audioRecorder = null;
 var videoChunks = [];
 var audioChunks = [];
-function getVideoRecorder() {
-  return videoRecorder;
-}
 function setVideoRecorder(recorder) {
   videoRecorder = recorder;
 }
@@ -13360,20 +13354,22 @@ 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;
+      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);
       };
@@ -13384,12 +13380,14 @@ var useVideoRecorderStore = create()(devtools(function (set, get) {
       };
       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({
@@ -13507,16 +13505,7 @@ var useVideoRecorder = function useVideoRecorder(mergeAVStreams) {
 };
 
 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;
@@ -13531,19 +13520,11 @@ var videoSignatureInitialState = {
   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()(devtools(function (set, get) {
@@ -13553,25 +13534,22 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
       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);
       };
@@ -13584,43 +13562,41 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
       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 = useRef(null);
   useEffect(function () {
     return useVideoSignatureStore.setState({
@@ -13632,36 +13608,35 @@ function VideoSignatureContextProvider(_a) {
     useVideoSignatureStore.getState().clearRecordedData();
   }, []);
   var isRecording = useVideoSignatureStore().isRecording;
-  var animationFrame = useRef(0);
-  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(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__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,
@@ -13670,7 +13645,6 @@ function VideoSignatureContextProvider(_a) {
 }
 
 function VideoSignatureGuides(_a) {
-  var _this = this;
   var _b = _a.requestedAction,
     requestedAction = _b === void 0 ? 'VERIFY_LIVENESS' : _b,
     _c = _a.faceGuideStatus,
@@ -13726,32 +13700,7 @@ function VideoSignatureGuides(_a) {
     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*/];
-        }
-      });
-    });
+    useVideoSignatureStore.getState().stopRecording();
   }, []);
   return /*#__PURE__*/React__default.createElement(Container$3, {
     className: classNames.container
@@ -13845,7 +13794,7 @@ var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4
 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,
@@ -13878,17 +13827,19 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     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;
+  useEffect(function () {
+    useVideoSignatureStore.setState({
+      onSignatureVideoCaptured: onSignatureVideoCaptured
+    });
+  }, [onSignatureVideoCaptured]);
   useEffect(function () {
     if (!camera) return;
     startRecording(camera, audioStream, captureAudio);
@@ -13903,11 +13854,6 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var verbiage = useTranslations(rawVerbiage, {
     guidanceMessageText: 'Please sign the box below'
   });
-  useEffect(function () {
-    if (signatureVideoData && signatureData && signatureDataUrl) {
-      onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
-    }
-  }, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
   var _o = useState(true),
     headTrackingSatisfied = _o[0],
     setHeadTrackingSatisfied = _o[1];
@@ -13917,7 +13863,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var _q = useState(0),
     numFramesWithoutFaces = _q[0],
     setNumFramesWithoutFaces = _q[1];
-  onPredictionMade(useThrottledCallback(useCallback(function (_a) {
+  onHeadTrackingPredictionMade(useThrottledCallback(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);
@@ -14139,6 +14085,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
   var onSignatureCaptureFacesNotDetected = useCallback(function () {
     setShowLoadingOverlay(false);
     setCaptureState('CHECKING_LIVENESS');
+    useVideoSignatureStore.getState().clearRecordedData();
   }, []);
   var _u = useState(0),
     attempt = _u[0],
@@ -14219,7 +14166,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
         }));
       case 'CAPTURING_SIGNATURE':
         return /*#__PURE__*/React__default.createElement(VideoSignatureCapture, {
-          onVideoCaptured: onSignatureCaptureCompleted,
+          onSignatureVideoCaptured: onSignatureCaptureCompleted,
           onFaceNotDetected: onSignatureCaptureFacesNotDetected,
           onExit: onExitSignatureCapture,
           minSignaturePadPoints: minSignaturePadPoints,