idmission-web-sdk 2.3.107 → 2.3.108

package/dist/components/video_signature_capture/VideoSignatureContext.d.ts

@@ -3,6 +3,10 @@ import { SignatureData } from '../signature_capture/data';
 import SignatureCanvas from 'react-signature-canvas';
 export type VideoSignatureMetadata = {
     mimeType?: string;
+    browserFeatures?: {
+        supportsRequestVideoFrameCallback?: boolean;
+        supportsRoundRect?: boolean;
+    };
     timingData?: {
         recordingStartRequestedAt?: number;
         recordingStartedAt?: number;
@@ -31,6 +35,8 @@ export type VideoSignatureState = {
     signatureValid: boolean;
     signatureStartedAt?: number;
     signatureEndedAt?: number;
+    supportsRequestVideoFrameCallback?: boolean;
+    supportsRoundRect?: boolean;
     onSignatureVideoCaptured: OnSignatureVideoCaptured;
 };
 export declare const useVideoSignatureStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<VideoSignatureState>, "setState"> & {

package/dist/components/video_signature_capture/VideoSignatureContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoSignatureContext.d.ts","sourceRoot":"","sources":["../../../src/components/video_signature_capture/VideoSignatureContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAcpD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE;QACX,yBAAyB,CAAC,EAAE,MAAM,CAAA;QAClC,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;KAC5B,CAAA;CACF,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,CACrC,SAAS,EAAE,IAAI,EACf,aAAa,EAAE,aAAa,GAAG,IAAI,EACnC,kBAAkB,EAAE,MAAM,GAAG,IAAI,EACjC,QAAQ,EAAE,sBAAsB,KAC7B,IAAI,CAAA;AAET,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,aAAa,EAAE,CACb,aAAa,CAAC,EAAE,aAAa,EAC7B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,KAC3B,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAE7B,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAEhD,iBAAiB,EAAE,OAAO,CAAA;IAC1B,cAAc,EAAE,OAAO,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB,wBAAwB,EAAE,wBAAwB,CAAA;CACnD,CAAA;AAaD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;EAkHlC,CAAA;AA2CD,MAAM,CAAC,OAAO,UAAU,6BAA6B,CAAC,EACpD,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,qBA8FA"}
+{"version":3,"file":"VideoSignatureContext.d.ts","sourceRoot":"","sources":["../../../src/components/video_signature_capture/VideoSignatureContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAcpD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE;QAChB,iCAAiC,CAAC,EAAE,OAAO,CAAA;QAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAC5B,CAAA;IACD,UAAU,CAAC,EAAE;QACX,yBAAyB,CAAC,EAAE,MAAM,CAAA;QAClC,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;KAC5B,CAAA;CACF,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,CACrC,SAAS,EAAE,IAAI,EACf,aAAa,EAAE,aAAa,GAAG,IAAI,EACnC,kBAAkB,EAAE,MAAM,GAAG,IAAI,EACjC,QAAQ,EAAE,sBAAsB,KAC7B,IAAI,CAAA;AAET,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,aAAa,EAAE,CACb,aAAa,CAAC,EAAE,aAAa,EAC7B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,KAC3B,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAE7B,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAEhD,iBAAiB,EAAE,OAAO,CAAA;IAC1B,cAAc,EAAE,OAAO,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC,CAAC,EAAE,OAAO,CAAA;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B,wBAAwB,EAAE,wBAAwB,CAAA;CACnD,CAAA;AAeD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;EAwIlC,CAAA;AA2CD,MAAM,CAAC,OAAO,UAAU,6BAA6B,CAAC,EACpD,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,qBA4DA"}

package/dist/sdk2.cjs.development.js

@@ -236,7 +236,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.107';
+var webSdkVersion = '2.3.108';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14421,6 +14421,8 @@ var videoSignatureInitialState = {
   },
   signaturePadEmpty: true,
   signatureValid: false,
+  supportsRequestVideoFrameCallback: undefined,
+  supportsRoundRect: undefined,
   onSignatureVideoCaptured: function onSignatureVideoCaptured() {
     return null;
   }
@@ -14467,7 +14469,7 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
           });
         }
       };
-      signatureRecorder.start(100);
+      signatureRecorder.start(250);
       set({
         recordingStartRequestedAt: performance.now()
       });
@@ -14487,7 +14489,7 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
               _a.sent();
               signatureRecorder.onstop = function () {
                 return __awaiter(_this, void 0, void 0, function () {
-                  var recordingStoppedAt, mimeType, blob, _a, onSignatureVideoCaptured, recordingStartRequestedAt, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, recordingStopRequestedAt, lastChunkReceivedAt;
+                  var recordingStoppedAt, mimeType, blob, _a, onSignatureVideoCaptured, recordingStartRequestedAt, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, recordingStopRequestedAt, lastChunkReceivedAt, supportsRequestVideoFrameCallback, supportsRoundRect;
                   return __generator(this, function (_b) {
                     recordingStoppedAt = performance.now();
                     set({
@@ -14499,18 +14501,22 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
                     });
                     signatureChunks = [];
                     signatureRecorder = null;
-                    _a = get(), onSignatureVideoCaptured = _a.onSignatureVideoCaptured, recordingStartRequestedAt = _a.recordingStartRequestedAt, recordingStartedAt = _a.recordingStartedAt, firstChunkReceivedAt = _a.firstChunkReceivedAt, signatureStartedAt = _a.signatureStartedAt, signatureEndedAt = _a.signatureEndedAt, recordingStopRequestedAt = _a.recordingStopRequestedAt, lastChunkReceivedAt = _a.lastChunkReceivedAt;
+                    _a = get(), onSignatureVideoCaptured = _a.onSignatureVideoCaptured, recordingStartRequestedAt = _a.recordingStartRequestedAt, recordingStartedAt = _a.recordingStartedAt, firstChunkReceivedAt = _a.firstChunkReceivedAt, signatureStartedAt = _a.signatureStartedAt, signatureEndedAt = _a.signatureEndedAt, recordingStopRequestedAt = _a.recordingStopRequestedAt, lastChunkReceivedAt = _a.lastChunkReceivedAt, supportsRequestVideoFrameCallback = _a.supportsRequestVideoFrameCallback, supportsRoundRect = _a.supportsRoundRect;
                     onSignatureVideoCaptured(blob, signatureData !== null && signatureData !== void 0 ? signatureData : null, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, {
                       mimeType: mimeType,
+                      browserFeatures: {
+                        supportsRoundRect: supportsRoundRect,
+                        supportsRequestVideoFrameCallback: supportsRequestVideoFrameCallback
+                      },
                       timingData: {
-                        recordingStartRequestedAt: recordingStartRequestedAt,
-                        recordingStartedAt: recordingStartedAt,
-                        firstChunkReceivedAt: firstChunkReceivedAt,
-                        signatureStartedAt: signatureStartedAt,
-                        signatureEndedAt: signatureEndedAt,
-                        recordingStopRequestedAt: recordingStopRequestedAt,
-                        recordingStoppedAt: recordingStoppedAt,
-                        lastChunkReceivedAt: lastChunkReceivedAt
+                        recordingStartRequestedAt: recordingStartRequestedAt ? Math.ceil(recordingStartRequestedAt) : 0,
+                        recordingStartedAt: recordingStartedAt ? Math.ceil(recordingStartedAt) : 0,
+                        firstChunkReceivedAt: firstChunkReceivedAt ? Math.ceil(firstChunkReceivedAt) : 0,
+                        signatureStartedAt: signatureStartedAt ? Math.ceil(signatureStartedAt) : 0,
+                        signatureEndedAt: signatureEndedAt ? Math.ceil(signatureEndedAt) : 0,
+                        recordingStopRequestedAt: recordingStopRequestedAt ? Math.ceil(recordingStopRequestedAt) : 0,
+                        recordingStoppedAt: Math.ceil(recordingStoppedAt),
+                        lastChunkReceivedAt: lastChunkReceivedAt ? Math.ceil(lastChunkReceivedAt) : 0
                       }
                     });
                     return [2 /*return*/];
@@ -14535,7 +14541,9 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
         signaturePadEmpty: true,
         signatureValid: false,
         signatureStartedAt: undefined,
-        signatureEndedAt: undefined
+        signatureEndedAt: undefined,
+        supportsRequestVideoFrameCallback: undefined,
+        supportsRoundRect: undefined
       });
     }
   });
@@ -14577,8 +14585,7 @@ function waitForOneMoreChunk(delayMs, checkEveryMs, timeoutMs) {
   });
 }
 function VideoSignatureContextProvider(_a) {
-  var _this = this;
-  var _b, _c, _d, _e;
+  var _b, _c;
   var children = _a.children;
   var videoRef = useCameraStore().videoRef;
   var outputCanvas = React.useRef(null);
@@ -14587,98 +14594,59 @@ function VideoSignatureContextProvider(_a) {
       outputCanvas: outputCanvas
     });
   }, []);
-  var signatureVideoRef = React.useRef(null);
-  var frameCheckCanvas = React.useRef(null);
-  var signaturePadEmpty = useVideoSignatureStore().signaturePadEmpty;
-  var blankCheckPassed = React.useRef(false);
-  React.useEffect(function () {
-    if (signaturePadEmpty) blankCheckPassed.current = false;
-  }, [signaturePadEmpty]);
   var drawOutputFrame = React.useCallback(function () {
-    return __awaiter(_this, void 0, void 0, function () {
-      var ctx, _a, w, h, isPortrait, rect;
-      return __generator(this, function (_b) {
-        if (!outputCanvas.current || !signatureVideoRef.current || !videoRef.current) return [2 /*return*/];
-        ctx = outputCanvas.current.getContext('2d');
-        if (!ctx) return [2 /*return*/];
-        _a = [videoRef.current.videoWidth, videoRef.current.videoHeight], w = _a[0], h = _a[1];
-        isPortrait = w < h;
-        outputCanvas.current.width = w;
-        outputCanvas.current.height = h;
-        rect = [w * (isPortrait ? 0.02 : 0.15),
-        // x
-        h * (isPortrait ? 0.15 : 0.25),
-        // y
-        w * (isPortrait ? 0.96 : 0.7),
-        //  width
-        h * (isPortrait ? 0.7 : 0.5) //   height
-        ];
-        ctx.drawImage(videoRef.current, 0, 0, w, h);
-        ctx.beginPath();
-        ctx.fillStyle = 'rgba(255,255,255,0.5)';
-        if (typeof ctx.roundRect === 'function') {
-          ctx.roundRect.apply(ctx, __spreadArray(__spreadArray([], rect, false), [16], false));
-        } else if (typeof ctx.rect === 'function') {
-          ctx.rect.apply(ctx, rect);
-        }
-        ctx.fill();
-        if (signatureVideoRef.current && blankCheckPassed.current) {
-          ctx.drawImage.apply(ctx, __spreadArray([signatureVideoRef.current], rect, false));
-        }
-        return [2 /*return*/];
-      });
+    if (!outputCanvas.current || !videoRef.current) return;
+    var ctx = outputCanvas.current.getContext('2d');
+    if (!ctx) 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),
+    // x
+    h * (isPortrait ? 0.15 : 0.25),
+    // y
+    w * (isPortrait ? 0.96 : 0.7),
+    //  width
+    h * (isPortrait ? 0.7 : 0.5) //   height
+    ];
+    ctx.drawImage(videoRef.current, 0, 0, w, h);
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,255,255,0.5)';
+    var supportsRoundRect = typeof ctx.roundRect === 'function';
+    if (supportsRoundRect) {
+      ctx.roundRect.apply(ctx, __spreadArray(__spreadArray([], rect, false), [16], false));
+    } else if (typeof ctx.rect === 'function') {
+      ctx.rect.apply(ctx, rect);
+    }
+    ctx.fill();
+    useVideoSignatureStore.setState({
+      supportsRoundRect: supportsRoundRect
     });
-  }, [videoRef, outputCanvas]);
-  var checkBlankAndDrawOutputFrame = React.useCallback(function () {
-    blankCheckPassed.current || (blankCheckPassed.current = !isVideoBlank(signatureVideoRef.current, frameCheckCanvas.current));
-    drawOutputFrame();
-  }, [drawOutputFrame, signatureVideoRef]);
-  useVideoFrameLoop(signatureVideoRef, checkBlankAndDrawOutputFrame);
-  useVideoFrameLoop(videoRef, drawOutputFrame);
-  var _f = useVideoSignatureStore(),
-    signaturePad = _f.signaturePad,
-    recordingStartedAt = _f.recordingStartedAt;
-  React.useEffect(function () {
-    var _a;
-    if (!signaturePad.current || !recordingStartedAt) return;
-    (_a = signatureVideoRef.current).srcObject || (_a.srcObject = signaturePad.current.getCanvas().captureStream(24));
-  }, [recordingStartedAt, signaturePad]);
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, children, /*#__PURE__*/React__namespace.default.createElement("video", {
-    ref: signatureVideoRef,
-    autoPlay: true,
-    playsInline: true,
-    muted: true,
-    style: {
-      display: 'none'
+    // Always use direct canvas drawing
+    var _b = useVideoSignatureStore.getState(),
+      signaturePad = _b.signaturePad,
+      signaturePadEmpty = _b.signaturePadEmpty;
+    if (signaturePad.current && !signaturePadEmpty) {
+      var signatureCanvas = signaturePad.current.getCanvas();
+      ctx.drawImage.apply(ctx, __spreadArray([signatureCanvas], rect, false));
     }
-  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
-    ref: frameCheckCanvas,
+  }, [videoRef]);
+  useVideoFrameLoop(videoRef, drawOutputFrame);
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, children, /*#__PURE__*/React__namespace.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
-  }), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
-    ref: outputCanvas,
-    width: (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoWidth,
-    height: (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.videoHeight
   }));
 }
-function isVideoBlank(video, canvas) {
-  if (!video || !canvas) return true;
-  var ctx2 = canvas.getContext('2d');
-  if (!ctx2) return true;
-  ctx2.drawImage(video, 0, 0, canvas.width, canvas.height);
-  return isCanvasBlank(canvas);
-}
-function isCanvasBlank(canvas) {
-  var context = canvas.getContext('2d');
-  if (!context) return true;
-  var pixelBuffer = new Uint32Array(context.getImageData(0, 0, canvas.width, canvas.height).data.buffer);
-  var result = !pixelBuffer.some(function (color) {
-    return color !== 0;
-  });
-  return result;
-}
 function requestVideoFrameCallback(video, onFrame) {
-  if (typeof (video === null || video === void 0 ? void 0 : video.requestVideoFrameCallback) === 'function') {
+  var supportsRequestVideoFrameCallback = typeof (video === null || video === void 0 ? void 0 : video.requestVideoFrameCallback) === 'function';
+  useVideoSignatureStore.setState({
+    supportsRequestVideoFrameCallback: supportsRequestVideoFrameCallback
+  });
+  if (supportsRequestVideoFrameCallback) {
     var rafId_1 = video.requestVideoFrameCallback(onFrame);
     return function () {
       return video.cancelVideoFrameCallback(rafId_1);