idmission-web-sdk 1.0.272 → 1.0.273

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.272';
+var webSdkVersion = '1.0.273';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -13625,34 +13625,34 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     classNames = _f === void 0 ? {} : _f,
     _g = _a.colors,
     colors = _g === void 0 ? {} : _g,
-    _j = _a.verbiage,
-    rawVerbiage = _j === void 0 ? {} : _j,
-    _k = _a.debugMode,
-    debugMode = _k === void 0 ? false : _k;
-  var _l = React.useContext(CameraStateContext),
-    cameraRef = _l.cameraRef,
-    videoRef = _l.videoRef;
-  var _m = useResizeObserver__default['default'](),
-    ref = _m.ref;
-    _m.width;
-    _m.height;
+    _h = _a.verbiage,
+    rawVerbiage = _h === void 0 ? {} : _h,
+    _j = _a.debugMode,
+    debugMode = _j === void 0 ? false : _j;
+  var _k = React.useContext(CameraStateContext),
+    cameraRef = _k.cameraRef,
+    videoRef = _k.videoRef;
+  var _l = useResizeObserver__default['default'](),
+    ref = _l.ref,
+    width = _l.width,
+    height = _l.height;
   var signaturePad = React.useRef(null);
   var signatureRecorder = React.useRef(null);
-  // const recordedChunks = useRef<BlobPart[]>([])
+  var recordedChunks = React.useRef([]);
   var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
-  var _o = useVideoRecorder(cameraRef.current),
-    isRecording = _o.isRecording,
-    startRecording = _o.startRecording,
-    stopRecording = _o.stopRecording;
+  var _m = useVideoRecorder(cameraRef.current),
+    isRecording = _m.isRecording,
+    startRecording = _m.startRecording,
+    stopRecording = _m.stopRecording;
+  var _o = React.useState(null),
+    signatureData = _o[0],
+    setSignatureData = _o[1];
   var _p = React.useState(null),
-    signatureData = _p[0],
-    setSignatureData = _p[1];
+    signatureDataUrl = _p[0],
+    setSignatureDataUrl = _p[1];
   var _q = React.useState(null),
-    signatureDataUrl = _q[0],
-    setSignatureDataUrl = _q[1];
-  var _r = React.useState(null),
-    signatureVideoData = _r[0];
-    _r[1];
+    signatureVideoData = _q[0],
+    setSignatureVideoData = _q[1];
   colors.guidanceMessageBackgroundColor || (colors.guidanceMessageBackgroundColor = '#ccc');
   colors.guidanceMessageTextColor || (colors.guidanceMessageTextColor = 'black');
   var verbiage = useTranslations(rawVerbiage, {
@@ -13667,6 +13667,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     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:
@@ -13684,6 +13685,24 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
               _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*/];
           }
         });
@@ -13711,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*/];
         });
@@ -13740,9 +13752,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       cancelAnimationFrame(animationFrame.current);
     };
   }, [cameraRef, isRecording, onFaceNotDetected, videoRef]);
-  var _s = React.useState(0),
-    numFramesWithoutFaces = _s[0],
-    setNumFramesWithoutFaces = _s[1];
+  var _r = React.useState(0),
+    numFramesWithoutFaces = _r[0],
+    setNumFramesWithoutFaces = _r[1];
   React.useEffect(function () {
     onPredictionMade(function (faces) {
       setNumFramesWithoutFaces(function (n) {
@@ -13778,7 +13790,14 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
     ref: ref,
     className: classNames.canvasInner
-  }), /*#__PURE__*/React__default['default'].createElement(SignatureButtonsContainer, {
+  }, /*#__PURE__*/React__default['default'].createElement(SignatureCanvas__default['default'], {
+    ref: signaturePad,
+    canvasProps: {
+      width: width,
+      height: height,
+      className: classNames.canvas
+    }
+  })), /*#__PURE__*/React__default['default'].createElement(SignatureButtonsContainer, {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
     variant: "secondary",