idmission-web-sdk 2.0.2 → 2.0.3

package/dist/lib/models/helpers.d.ts

@@ -1,4 +1,5 @@
 import { BoundingBox } from '@mediapipe/tasks-vision';
+import { MutableRefObject } from 'react';
 export declare function convertBoundingBox(box?: BoundingBox): {
     xMin: number;
     xMax: number;
@@ -7,3 +8,4 @@ export declare function convertBoundingBox(box?: BoundingBox): {
     width: number;
     height: number;
 };
+export declare function waitForVideoReady(videoRef: MutableRefObject<HTMLVideoElement | null>, checkEveryMs?: number): Promise<void>;

package/dist/sdk2.cjs.development.js

@@ -49,7 +49,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '2.0.2';
+var webSdkVersion = '2.0.3';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -2481,6 +2481,34 @@ function giveUpAfter(maxTime) {
   });
 }
 
+function convertBoundingBox(box) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  return {
+    xMin: (_a = box === null || box === void 0 ? void 0 : box.originX) !== null && _a !== void 0 ? _a : 0,
+    xMax: ((_b = box === null || box === void 0 ? void 0 : box.originX) !== null && _b !== void 0 ? _b : 0) + ((_c = box === null || box === void 0 ? void 0 : box.width) !== null && _c !== void 0 ? _c : 0),
+    yMin: (_d = box === null || box === void 0 ? void 0 : box.originY) !== null && _d !== void 0 ? _d : 0,
+    yMax: ((_e = box === null || box === void 0 ? void 0 : box.originY) !== null && _e !== void 0 ? _e : 0) + ((_f = box === null || box === void 0 ? void 0 : box.height) !== null && _f !== void 0 ? _f : 0),
+    width: (_g = box === null || box === void 0 ? void 0 : box.width) !== null && _g !== void 0 ? _g : 0,
+    height: (_h = box === null || box === void 0 ? void 0 : box.height) !== null && _h !== void 0 ? _h : 0
+  };
+}
+function waitForVideoReady(videoRef, checkEveryMs) {
+  if (checkEveryMs === void 0) {
+    checkEveryMs = 100;
+  }
+  return new Promise(function (resolve) {
+    var _a;
+    if (((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) === 4) return resolve();
+    var interval = setInterval(function () {
+      var _a;
+      if (((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) === 4) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, checkEveryMs);
+  });
+}
+
 var defaultFocusModelPath = "https://websdk-cdn-dev.idmission.com/assets/models/focusmp20240523/model_float16.tflite";
 var defaultFocusModelLoadTimeoutMs = 45000;
 var defaultFocusThresholds = {
@@ -2519,16 +2547,9 @@ function loadFocusModel(modelAssetPath) {
               delegate: modelCapabilities.delegate
             },
             runningMode: 'VIDEO'
-          }])
-          // const emptyFrame = document.createElement('canvas')
-          // models[id].classifyForVideo(emptyFrame, performance.now())
-          // emptyFrame.remove()
-          ];
+          }])];
         case 3:
           _a[_b] = _e.sent();
-          // const emptyFrame = document.createElement('canvas')
-          // models[id].classifyForVideo(emptyFrame, performance.now())
-          // emptyFrame.remove()
           return [2 /*return*/, models[id]];
       }
     });
@@ -2550,7 +2571,9 @@ function useLoadFocusModel(_a) {
   var _f = React.useState(null),
     modelError = _f[0],
     setModelError = _f[1];
+  var videoRef = React.useContext(CameraStateContext).videoRef;
   React.useEffect(function loadModel() {
+    var _this = this;
     setReady(false);
     function handleDownloadProgress(event) {
       setModelDownloadProgress(progressToPercentage(event.detail));
@@ -2560,9 +2583,22 @@ function useLoadFocusModel(_a) {
       setModelError(new Error('Model loading time limit exceeded.'));
     }, modelLoadTimeoutMs);
     loadFocusModel(modelPath).then(function (loadedModel) {
-      model.current = loadedModel;
-      setModelDownloadProgress(100);
-      setReady(true);
+      return tslib.__awaiter(_this, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              model.current = loadedModel;
+              setModelDownloadProgress(100);
+              clearTimeout(modelLoadTimeout);
+              return [4 /*yield*/, waitForVideoReady(videoRef)];
+            case 1:
+              _a.sent();
+              loadedModel.classifyForVideo(videoRef.current, performance.now());
+              setReady(true);
+              return [2 /*return*/];
+          }
+        });
+      });
     })["catch"](function (e) {
       setModelError(e);
     })["finally"](function () {
@@ -2572,7 +2608,7 @@ function useLoadFocusModel(_a) {
       clearTimeout(modelLoadTimeout);
       document.removeEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
     };
-  }, [modelPath, modelLoadTimeoutMs]);
+  }, [modelPath, modelLoadTimeoutMs, videoRef]);
   React.useEffect(function handleModelError() {
     modelError && (onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError));
   }, [modelError, onModelError]);
@@ -2752,18 +2788,6 @@ K("FACEDETECTION_TESSELATION",[[127,34],[34,139],[139,127],[11,0],[0,37],[37,11]
 [256,341],[341,452],[452,256],[414,413],[413,463],[463,414],[286,441],[441,414],[414,286],[286,258],[258,441],[441,286],[258,257],[257,442],[442,258],[257,259],[259,443],[443,257],[259,260],[260,444],[444,259],[260,467],[467,445],[445,260],[309,459],[459,250],[250,309],[305,289],[289,290],[290,305],[305,290],[290,460],[460,305],[401,376],[376,435],[435,401],[309,250],[250,392],[392,309],[376,411],[411,433],[433,376],[453,341],[341,464],[464,453],[357,453],[453,465],[465,357],[343,357],[357,412],[412,
 343],[437,343],[343,399],[399,437],[344,360],[360,440],[440,344],[420,437],[437,456],[456,420],[360,420],[420,363],[363,360],[361,401],[401,288],[288,361],[265,372],[372,353],[353,265],[390,339],[339,249],[249,390],[339,448],[448,255],[255,339]]);K("VERSION","0.4.1646425229");}).call(commonjsGlobal);
 
-function convertBoundingBox(box) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  return {
-    xMin: (_a = box === null || box === void 0 ? void 0 : box.originX) !== null && _a !== void 0 ? _a : 0,
-    xMax: ((_b = box === null || box === void 0 ? void 0 : box.originX) !== null && _b !== void 0 ? _b : 0) + ((_c = box === null || box === void 0 ? void 0 : box.width) !== null && _c !== void 0 ? _c : 0),
-    yMin: (_d = box === null || box === void 0 ? void 0 : box.originY) !== null && _d !== void 0 ? _d : 0,
-    yMax: ((_e = box === null || box === void 0 ? void 0 : box.originY) !== null && _e !== void 0 ? _e : 0) + ((_f = box === null || box === void 0 ? void 0 : box.height) !== null && _f !== void 0 ? _f : 0),
-    width: (_g = box === null || box === void 0 ? void 0 : box.width) !== null && _g !== void 0 ? _g : 0,
-    height: (_h = box === null || box === void 0 ? void 0 : box.height) !== null && _h !== void 0 ? _h : 0
-  };
-}
-
 var defaultFaceDetectorModelPath = 'https://websdk-cdn-dev.idmission.com/assets/models/blazeface20240207/blaze_face_short_range.tflite';
 var defaultSelfieCaptureModelLoadTimeoutMs = 45000;
 var detector;
@@ -2789,16 +2813,9 @@ function loadFaceDetector() {
               delegate: modelCapabilities.delegate
             },
             runningMode: 'VIDEO'
-          }])
-          // const emptyFrame = document.createElement('canvas')
-          // detector.detectForVideo(emptyFrame, performance.now())
-          // emptyFrame.remove()
-          ];
+          }])];
         case 3:
           detector = _c.sent();
-          // const emptyFrame = document.createElement('canvas')
-          // detector.detectForVideo(emptyFrame, performance.now())
-          // emptyFrame.remove()
           return [2 /*return*/, detector];
       }
     });
@@ -2818,7 +2835,9 @@ function useLoadFaceDetector(_a) {
   var _e = React.useState(null),
     modelError = _e[0],
     setModelError = _e[1];
+  var videoRef = React.useContext(CameraStateContext).videoRef;
   React.useEffect(function loadModel() {
+    var _this = this;
     setReady(false);
     var modelLoadTimeout = setTimeout(function () {
       setModelError(new Error('Model loading time limit exceeded.'));
@@ -2828,9 +2847,22 @@ function useLoadFaceDetector(_a) {
     }
     document.addEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
     loadFaceDetector().then(function (model) {
-      detector.current = model;
-      setModelDownloadProgress(100);
-      setReady(true);
+      return tslib.__awaiter(_this, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              detector.current = model;
+              setModelDownloadProgress(100);
+              clearTimeout(modelLoadTimeout);
+              return [4 /*yield*/, waitForVideoReady(videoRef)];
+            case 1:
+              _a.sent();
+              model.detectForVideo(videoRef.current, performance.now());
+              setReady(true);
+              return [2 /*return*/];
+          }
+        });
+      });
     })["catch"](function (e) {
       setModelError(e);
     })["finally"](function () {
@@ -2840,7 +2872,7 @@ function useLoadFaceDetector(_a) {
       clearTimeout(modelLoadTimeout);
       document.removeEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
     };
-  }, [modelLoadTimeoutMs]);
+  }, [modelLoadTimeoutMs, videoRef]);
   React.useEffect(function handleModelError() {
     modelError && (onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError));
   }, [modelError, onModelError]);
@@ -3145,16 +3177,9 @@ function loadDocumentDetector(modelAssetPath, scoreThreshold) {
             },
             scoreThreshold: scoreThreshold,
             runningMode: 'VIDEO'
-          }])
-          // const emptyFrame = document.createElement('canvas')
-          // detectors[id].detectForVideo(emptyFrame, performance.now())
-          // emptyFrame.remove()
-          ];
+          }])];
         case 3:
           _a[_b] = _e.sent();
-          // const emptyFrame = document.createElement('canvas')
-          // detectors[id].detectForVideo(emptyFrame, performance.now())
-          // emptyFrame.remove()
           return [2 /*return*/, detectors[id]];
       }
     });
@@ -3178,7 +3203,9 @@ function useLoadDocumentDetector(_a) {
   var _g = React.useState(null),
     modelError = _g[0],
     setModelError = _g[1];
+  var videoRef = React.useContext(CameraStateContext).videoRef;
   React.useEffect(function loadModel() {
+    var _this = this;
     setReady(false);
     function handleDownloadProgress(event) {
       setModelDownloadProgress(progressToPercentage(event.detail));
@@ -3188,9 +3215,22 @@ function useLoadDocumentDetector(_a) {
       setModelError(new Error('Model loading time limit exceeded.'));
     }, modelLoadTimeoutMs);
     loadDocumentDetector(modelPath, scoreThreshold).then(function (model) {
-      detector.current = model;
-      setModelDownloadProgress(100);
-      setReady(true);
+      return tslib.__awaiter(_this, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              detector.current = model;
+              setModelDownloadProgress(100);
+              clearTimeout(modelLoadTimeout);
+              return [4 /*yield*/, waitForVideoReady(videoRef)];
+            case 1:
+              _a.sent();
+              model.detectForVideo(videoRef.current, performance.now());
+              setReady(true);
+              return [2 /*return*/];
+          }
+        });
+      });
     })["catch"](function (e) {
       setModelError(e);
     })["finally"](function () {
@@ -3200,7 +3240,7 @@ function useLoadDocumentDetector(_a) {
       clearTimeout(modelLoadTimeout);
       document.removeEventListener('idmission.preloadProgress.documentDetection', handleDownloadProgress);
     };
-  }, [modelLoadTimeoutMs, modelPath, scoreThreshold]);
+  }, [modelLoadTimeoutMs, modelPath, scoreThreshold, videoRef]);
   React.useEffect(function handleModelError() {
     modelError && (onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError));
   }, [modelError, onModelError]);