idmission-web-sdk 1.0.271 → 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.271';
+var webSdkVersion = '1.0.273';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -13638,7 +13638,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     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 _m = useVideoRecorder(cameraRef.current),
     isRecording = _m.isRecording,
@@ -13651,8 +13651,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     signatureDataUrl = _p[0],
     setSignatureDataUrl = _p[1];
   var _q = React.useState(null),
-    signatureVideoData = _q[0];
-    _q[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*/];
         });