idmission-web-sdk 1.0.268 → 1.0.269

package/dist/sdk2.cjs.development.js

@@ -51,7 +51,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.268';
+var webSdkVersion = '1.0.269';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -13643,8 +13643,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var _m = useVideoRecorder(cameraRef.current),
     isRecording = _m.isRecording,
     startRecording = _m.startRecording,
-    stopRecording = _m.stopRecording,
-    videoUrl = _m.videoUrl;
+    stopRecording = _m.stopRecording;
   var _o = React.useState(null),
     signatureData = _o[0],
     setSignatureData = _o[1];
@@ -13662,32 +13661,54 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     clearBtnText: 'Clear'
   });
   var outputCanvas = React.useRef(null);
+  var recordingLock = React.useRef(false);
   React.useEffect(function () {
-    // delay 100ms to make sure outputCanvas has rendered.
-    setTimeout(function () {
-      if (!isRecording && !videoUrl && !!outputCanvas.current) {
-        startRecording();
-        var stream = outputCanvas.current.captureStream(25 /* fps */);
-        signatureRecorder.current = new MediaRecorder(stream, {
-          videoBitsPerSecond: 270000
-        });
-        signatureRecorder.current.start();
-        signatureRecorder.current.ondataavailable = function (event) {
-          var _a;
-          recordedChunks.current.push(event.data);
-          if (((_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
-            signatureRecorder.current.stop();
+    if (recordingLock.current) return;
+    recordingLock.current = true;
+    (function () {
+      return tslib.__awaiter(void 0, void 0, void 0, function () {
+        var stream;
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!!outputCanvas.current) return [3 /*break*/, 2];
+              return [4 /*yield*/, new Promise(function (resolve) {
+                var interval = setInterval(function () {
+                  if (outputCanvas.current) {
+                    clearInterval(interval);
+                    resolve(null);
+                  }
+                }, 10);
+              })];
+            case 1:
+              _a.sent();
+              _a.label = 2;
+            case 2:
+              startRecording();
+              stream = outputCanvas.current.captureStream(24 /* fps */);
+              signatureRecorder.current = new MediaRecorder(stream, {
+                videoBitsPerSecond: 270000
+              });
+              signatureRecorder.current.start();
+              signatureRecorder.current.ondataavailable = function (event) {
+                var _a;
+                recordedChunks.current.push(event.data);
+                if (((_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
+                  signatureRecorder.current.stop();
+                }
+              };
+              signatureRecorder.current.onstop = function () {
+                var blob = new Blob(recordedChunks.current, {
+                  type: 'video/mp4'
+                });
+                setSignatureVideoData(blob);
+              };
+              return [2 /*return*/];
           }
-        };
-        signatureRecorder.current.onstop = function () {
-          var blob = new Blob(recordedChunks.current, {
-            type: 'video/mp4'
-          });
-          setSignatureVideoData(blob);
-        };
-      }
-    }, 100);
-  }, [isRecording, startRecording, videoUrl]);
+        });
+      });
+    })();
+  }, [startRecording]);
   React.useEffect(function () {
     if (signatureVideoData && signatureData && signatureDataUrl) {
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
@@ -13709,26 +13730,19 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     if (!ctx) return;
     animationFrame.current = requestAnimationFrame(function runFrame() {
       return tslib.__awaiter(this, void 0, void 0, function () {
+        var rect;
         return tslib.__generator(this, function (_a) {
           if (!signaturePad.current || !videoRef.current || !outputCanvas.current) {
             cancelAnimationFrame(animationFrame.current);
             return [2 /*return*/];
           }
-          // const rect: [number, number, number, number] = [
-          //   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(...rect, 16)
-          // ctx.fill()
-          //
-          // ctx.drawImage(signaturePad.current.getCanvas(), ...rect)
+          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, tslib.__spreadArray(tslib.__spreadArray([], rect, false), [16], false));
+          ctx.fill();
+          ctx.drawImage.apply(ctx, tslib.__spreadArray([signaturePad.current.getCanvas()], rect, false));
           animationFrame.current = requestAnimationFrame(runFrame);
           return [2 /*return*/];
         });