idmission-web-sdk 2.0.1 → 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.1';
+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 = {
@@ -2496,7 +2524,7 @@ var defaultFocusThresholds = {
 var models = {};
 function loadFocusModel(modelAssetPath) {
   return tslib.__awaiter(this, void 0, void 0, function () {
-    var id, _a, _b, _c, _d, emptyFrame;
+    var id, _a, _b, _c, _d;
     return tslib.__generator(this, function (_e) {
       switch (_e.label) {
         case 0:
@@ -2522,9 +2550,6 @@ function loadFocusModel(modelAssetPath) {
           }])];
         case 3:
           _a[_b] = _e.sent();
-          emptyFrame = document.createElement('canvas');
-          models[id].classifyForVideo(emptyFrame, performance.now());
-          emptyFrame.remove();
           return [2 /*return*/, models[id]];
       }
     });
@@ -2546,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));
@@ -2556,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 () {
@@ -2568,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]);
@@ -2748,24 +2788,12 @@ 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;
 function loadFaceDetector() {
   return tslib.__awaiter(this, void 0, void 0, function () {
-    var _a, _b, emptyFrame;
+    var _a, _b;
     return tslib.__generator(this, function (_c) {
       switch (_c.label) {
         case 0:
@@ -2788,9 +2816,6 @@ function loadFaceDetector() {
           }])];
         case 3:
           detector = _c.sent();
-          emptyFrame = document.createElement('canvas');
-          detector.detectForVideo(emptyFrame, performance.now());
-          emptyFrame.remove();
           return [2 /*return*/, detector];
       }
     });
@@ -2810,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.'));
@@ -2820,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 () {
@@ -2832,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]);
@@ -3113,7 +3153,7 @@ function loadDocumentDetector(modelAssetPath, scoreThreshold) {
     scoreThreshold = defaultDocumentDetectionScoreThreshold;
   }
   return tslib.__awaiter(this, void 0, void 0, function () {
-    var id, _a, _b, _c, _d, emptyFrame;
+    var id, _a, _b, _c, _d;
     return tslib.__generator(this, function (_e) {
       switch (_e.label) {
         case 0:
@@ -3140,9 +3180,6 @@ function loadDocumentDetector(modelAssetPath, scoreThreshold) {
           }])];
         case 3:
           _a[_b] = _e.sent();
-          emptyFrame = document.createElement('canvas');
-          detectors[id].detectForVideo(emptyFrame, performance.now());
-          emptyFrame.remove();
           return [2 /*return*/, detectors[id]];
       }
     });
@@ -3166,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));
@@ -3176,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 () {
@@ -3188,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]);