@smileid/web-components 2.0.2 → 10.0.2

package/lib/components/selfie/src/smartselfie-capture/utils/faceDetection.ts

@@ -0,0 +1,129 @@
+/**
+ * Calculate the size of a face relative to the video frame
+ */
+export const calculateFaceSize = (landmarks: any): number => {
+  if (!landmarks || landmarks.length === 0) return 0;
+
+  const face = landmarks[0];
+
+  if (!face || face.length === 0) return 0;
+
+  // Get bounding box of face landmarks
+  let minX = 1;
+  let maxX = 0;
+  let minY = 1;
+  let maxY = 0;
+
+  face.forEach((landmark: any) => {
+    if (
+      landmark &&
+      typeof landmark.x === 'number' &&
+      typeof landmark.y === 'number'
+    ) {
+      minX = Math.min(minX, landmark.x);
+      maxX = Math.max(maxX, landmark.x);
+      minY = Math.min(minY, landmark.y);
+      maxY = Math.max(maxY, landmark.y);
+    }
+  });
+
+  // Calculate face size as percentage of video area
+  const faceWidth = maxX - minX;
+  const faceHeight = maxY - minY;
+  const faceSize = Math.max(faceWidth, faceHeight);
+
+  return faceSize;
+};
+
+/**
+ * Check if a face is positioned within the oval bounds
+ */
+export const isFaceInBounds = (
+  landmarks: any,
+  videoAspectRatio: number,
+): boolean => {
+  if (!landmarks || landmarks.length === 0) return false;
+
+  const face = landmarks[0];
+
+  let minX = 1;
+  let maxX = 0;
+  let minY = 1;
+  let maxY = 0;
+  face.forEach((landmark: any) => {
+    minX = Math.min(minX, landmark.x);
+    maxX = Math.max(maxX, landmark.x);
+    minY = Math.min(minY, landmark.y);
+    maxY = Math.max(maxY, landmark.y);
+  });
+
+  const ovalCenterX = 0.5;
+  const ovalCenterY = 0.6;
+
+  const isLandscape = videoAspectRatio > 1;
+  let ovalWidth;
+  let ovalHeight;
+  if (isLandscape) {
+    ovalWidth = 0.4;
+    ovalHeight = 0.3;
+  } else {
+    ovalWidth = 0.35;
+    ovalHeight = 0.5;
+  }
+
+  const faceCenterX = (minX + maxX) / 2;
+  const faceCenterY = (minY + maxY) / 2;
+
+  const centerTolerance = 0.2;
+  const centerOvalWidth = ovalWidth * (1 + centerTolerance);
+  const centerOvalHeight = ovalHeight * (1 + centerTolerance);
+
+  const checkPointInCenterOval = (x: number, y: number) => {
+    const dx = (x - ovalCenterX) / centerOvalWidth;
+    const dy = (y - ovalCenterY) / centerOvalHeight;
+    return dx * dx + dy * dy <= 1;
+  };
+  const centerInBounds = checkPointInCenterOval(faceCenterX, faceCenterY);
+
+  const toleranceX = 0.2;
+  const toleranceY = 0.1;
+  const adjustedOvalWidth = ovalWidth * (1 + toleranceX);
+  const adjustedOvalHeight = ovalHeight * (1 + toleranceY);
+
+  const checkPointInExpandedOval = (x: number, y: number) => {
+    const dx = (x - ovalCenterX) / adjustedOvalWidth;
+    const dy = (y - ovalCenterY) / adjustedOvalHeight;
+    return dx * dx + dy * dy <= 1;
+  };
+
+  const topLeft = checkPointInExpandedOval(minX, minY);
+  const topRight = checkPointInExpandedOval(maxX, minY);
+  const bottomLeft = checkPointInExpandedOval(minX, maxY);
+  const bottomRight = checkPointInExpandedOval(maxX, maxY);
+
+  return centerInBounds && topLeft && topRight && bottomLeft && bottomRight;
+};
+
+/**
+ * Calculate mouth opening using face landmarks
+ */
+export const calculateMouthOpening = (landmarks: any): number => {
+  if (!landmarks || landmarks.length === 0) return 0;
+
+  const face = landmarks[0];
+  if (!face || face.length === 0) return 0;
+
+  // MediaPipe face landmark indices for mouth
+  const upperLipCenter = face[13]; // Upper lip center
+  const lowerLipCenter = face[14]; // Lower lip center
+
+  if (!upperLipCenter || !lowerLipCenter) return 0;
+
+  const mouthHeight = Math.abs(lowerLipCenter.y - upperLipCenter.y);
+
+  const faceTop = Math.min(...face.map((p: any) => p.y));
+  const faceBottom = Math.max(...face.map((p: any) => p.y));
+  const faceHeight = faceBottom - faceTop;
+
+  return faceHeight > 0 ? mouthHeight / faceHeight : 0;
+};

package/lib/components/selfie/src/smartselfie-capture/utils/imageCapture.ts

@@ -0,0 +1,65 @@
+export const captureImageFromVideo = (
+  videoElement: HTMLVideoElement,
+  isReference: boolean = false,
+): string | null => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  const isPortrait = videoElement.videoHeight > videoElement.videoWidth;
+
+  if (isReference) {
+    if (isPortrait) {
+      canvas.width = 480;
+      canvas.height = Math.max(
+        640,
+        (canvas.width * videoElement.videoHeight) / videoElement.videoWidth,
+      );
+    } else {
+      canvas.width = 640;
+      canvas.height = Math.max(
+        480,
+        (canvas.width * videoElement.videoHeight) / videoElement.videoWidth,
+      );
+    }
+  } else if (isPortrait) {
+    canvas.width = 240;
+    canvas.height = Math.max(
+      320,
+      (canvas.width * videoElement.videoHeight) / videoElement.videoWidth,
+    );
+  } else {
+    canvas.width = 320;
+    canvas.height = Math.max(
+      240,
+      (canvas.width * videoElement.videoHeight) / videoElement.videoWidth,
+    );
+  }
+
+  // capture more of the user's head and avoid clipping
+  // zoom out only for high resolution (>720p) webcams
+  const zoomOutFactor = videoElement.videoHeight > 720 ? 1.3 : 1.0;
+  const sourceWidth = videoElement.videoWidth * zoomOutFactor;
+  const sourceHeight = videoElement.videoHeight * zoomOutFactor;
+
+  // center the zoomed out area
+  const offsetX = (sourceWidth - videoElement.videoWidth) / 2;
+  const offsetY = (sourceHeight - videoElement.videoHeight) / 2;
+
+  // vertical offset to shift up and capture full head
+  const verticalOffset = videoElement.videoHeight * 0.05;
+
+  ctx.drawImage(
+    videoElement,
+    -offsetX,
+    -offsetY - verticalOffset,
+    sourceWidth,
+    sourceHeight,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  );
+
+  return canvas.toDataURL('image/jpeg');
+};

package/lib/components/selfie/src/smartselfie-capture/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './faceDetection';
+export * from './canvas';
+export * from './imageCapture';
+export * from './alertMessages';

package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts

@@ -0,0 +1,60 @@
+import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';
+
+declare global {
+  interface Window {
+    __smileIdentityMediapipe?: {
+      instance: FaceLandmarker | null;
+      loading: Promise<FaceLandmarker> | null;
+      loaded: boolean;
+    };
+  }
+}
+
+export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
+  if (!window.__smileIdentityMediapipe) {
+    window.__smileIdentityMediapipe = {
+      instance: null,
+      loading: null,
+      loaded: false,
+    };
+  }
+
+  const mediapipeGlobal = window.__smileIdentityMediapipe;
+
+  if (mediapipeGlobal.loaded && mediapipeGlobal.instance) {
+    return mediapipeGlobal.instance;
+  }
+
+  if (mediapipeGlobal.loading) {
+    return mediapipeGlobal.loading;
+  }
+
+  mediapipeGlobal.loading = (async () => {
+    try {
+      const vision = await FilesetResolver.forVisionTasks(
+        'https://web-models.smileidentity.com/mediapipe-tasks-vision-wasm',
+      );
+
+      const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
+        baseOptions: {
+          modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
+          delegate: 'GPU',
+        },
+        outputFaceBlendshapes: true,
+        runningMode: 'VIDEO',
+        numFaces: 2,
+      });
+
+      mediapipeGlobal.instance = faceLandmarker;
+      mediapipeGlobal.loaded = true;
+      mediapipeGlobal.loading = null;
+
+      return faceLandmarker;
+    } catch (error) {
+      mediapipeGlobal.loading = null;
+      throw error;
+    }
+  })();
+
+  return mediapipeGlobal.loading;
+};

package/{src → lib}/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "2.0.2",
+  "version": "10.0.2",
   "private": "true",
   "exports": {
     ".": "./index.js"

package/{src → lib}/components/smart-camera-web/src/README.md

@@ -51,7 +51,6 @@ import '@smileid/web-components/smart-camera-web';
 After installation and necessary imports:
 
 1. Add the desired markup to your page/component:
-
    - **For Selfie Capture / Liveness Images**:
 
      ```html

package/{src → lib}/styles/src/styles.js

@@ -260,7 +260,6 @@ ${typography}
 
   #document-capture-instructions-screen,
   #back-of-document-capture-instructions-screen {
-    padding-block: 2rem;
     display: flex;
     flex-direction: column;
     max-block-size: 100%;

package/package.json

@@ -1,36 +1,70 @@
 {
   "name": "@smileid/web-components",
-  "version": "2.0.2",
-  "main": "index.js",
+  "version": "10.0.2",
+  "private": false,
+  "main": "dist/esm/main.js",
+  "module": "dist/esm/main.js",
+  "types": "dist/types/main.d.ts",
   "exports": {
-    ".": "./index.js",
-    "./combobox": "./src/components/combobox/src/index.js",
-    "./document-capture": "./src/components/document/src/index.js",
-    "./end-user-consent": "./src/components/end-user-consent/src/index.js",
-    "./navigation": "./src/components/navigation/src/index.js",
-    "./selfie-capture": "./src/components/selfie/src/index.js",
-    "./signature-pad": "./src/components/signature-pad/src/index.js",
-    "./totp-consent": "./src/components/totp-consent/src/index.js",
-    "./smart-camera-web": "./src/components/smart-camera-web/src/SmartCameraWeb.js"
+    ".": {
+      "types": "./dist/types/main.d.ts",
+      "import": "./dist/esm/main.js"
+    },
+    "./combobox": {
+      "types": "./dist/types/combobox.d.ts",
+      "import": "./dist/esm/combobox.js"
+    },
+    "./document-capture": {
+      "types": "./dist/types/document.d.ts",
+      "import": "./dist/esm/document.js"
+    },
+    "./end-user-consent": {
+      "types": "./dist/types/end-user-consent.d.ts",
+      "import": "./dist/esm/end-user-consent.js"
+    },
+    "./navigation": {
+      "types": "./dist/types/navigation.d.ts",
+      "import": "./dist/esm/navigation.js"
+    },
+    "./selfie-capture": {
+      "types": "./dist/types/selfie.d.ts",
+      "import": "./dist/esm/selfie.js"
+    },
+    "./signature-pad": {
+      "types": "./dist/types/signature-pad.d.ts",
+      "import": "./dist/esm/signature-pad.js"
+    },
+    "./totp-consent": {
+      "types": "./dist/types/totp-consent.d.ts",
+      "import": "./dist/esm/totp-consent.js"
+    },
+    "./smart-camera-web": {
+      "types": "./dist/types/smart-camera-web.d.ts",
+      "import": "./dist/esm/smart-camera-web.js"
+    }
   },
   "files": [
-    "./src/components/",
-    "./src/domain/",
-    "./src/styles/",
+    "./lib/components/",
+    "./lib/domain/",
+    "./lib/styles/",
+    "./dist/",
     "./README.md",
-    "index.js",
     "package.json"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production node esbuild.js",
-    "build:dev": "cross-env NODE_ENV=development node esbuild.js",
-    "clean": "rm -rf build dist",
+    "build": "npm run build:iife && npm run build:esm",
+    "build:esm": "vite build",
+    "build:iife": "cross-env BUILD_FORMAT=iife vite build",
+    "build:stats": "cross-env GENERATE_STATS=true vite build --mode=production && echo Bundle analysis generated at dist/bundle-analysis.html",
+    "dev": "vite",
+    "preview": "vite preview",
     "prepublishOnly": "npm run build",
-    "lint:fix": "eslint . --ext .js --fix",
+    "lint:fix": "eslint . --ext .js,.ts,.tsx --fix",
     "lint:html": "npx prettier --write $(git ls-files '*.html')",
-    "lint": "eslint . --ext .js",
-    "start": "npm run build:dev && npx serve -p 8000 dist",
-    "test": "npx cypress run"
+    "lint": "eslint . --ext .js,.ts,.tsx",
+    "start": "vite build --watch",
+    "test": "npx cypress run",
+    "type-check": "tsc --noEmit"
   },
   "description": "A collection of Web Components used by SmileID",
   "keywords": [
@@ -39,20 +73,38 @@
   "type": "module",
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
   "dependencies": {
+    "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
+    "@preact/signals": "^2.1.1",
+    "@tabler/icons-preact": "^3.34.0",
+    "preact": "^10.26.9",
+    "preact-custom-element": "^4.3.0",
+    "preact-router": "^4.1.2",
     "signature_pad": "^5.0.2",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@types/node": "^20.11.24",
+    "@types/preact-custom-element": "^4.0.4",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.15.0",
-    "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.3.3"
+    "glob": "^10.3.10",
+    "prettier": "^3.6.2",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-tsconfig-paths": "^1.4.1"
   }
 }

package/src/index.js

@@ -1,5 +0,0 @@
-import DocumentCaptureScreens from './components/document/src';
-import SelfieCaptureScreens from './components/selfie/src';
-import SmartCameraWeb from './components/smart-camera-web/src/SmartCameraWeb';
-
-export { DocumentCaptureScreens, SelfieCaptureScreens, SmartCameraWeb };