@smileid/web-components 11.0.0 → 11.0.2

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

@@ -1 +1 @@
-export { default as SmartSelfieCapture } from './SmartSelfieCapture';
+export { default as SmartSelfieCapture } from './SmartSelfieCapture';

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

@@ -1,13 +1,13 @@
-export const MESSAGES = {
-  'multiple-faces': 'Ensure only one face is visible',
-  'no-face': 'Position your face in the oval',
-  'out-of-bounds': 'Position your face in the oval',
-  'too-close': 'Move farther away',
-  'too-far': 'Move closer',
-  'neutral-expression': 'Neutral expression',
-  'smile-required': 'Smile!',
-  'open-mouth-smile': 'Wider smile - teeth visible',
-  initializing: 'Initializing...',
-};
-
-export type MessageKey = keyof typeof MESSAGES;
+export const MESSAGES = {
+  'multiple-faces': 'Ensure only one face is visible',
+  'no-face': 'Position your face in the oval',
+  'out-of-bounds': 'Position your face in the oval',
+  'too-close': 'Move farther away',
+  'too-far': 'Move closer',
+  'neutral-expression': 'Neutral expression',
+  'smile-required': 'Smile!',
+  'open-mouth-smile': 'Wider smile - teeth visible',
+  initializing: 'Initializing...',
+};
+
+export type MessageKey = keyof typeof MESSAGES;

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

@@ -1,105 +1,105 @@
-import { DrawingUtils, FaceLandmarker } from '@mediapipe/tasks-vision';
-
-/**
- * Create a cropped square canvas from video for face detection
- */
-export const createCroppedVideoFrame = (
-  videoElement: HTMLVideoElement,
-): HTMLCanvasElement | null => {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return null;
-
-  const sourceWidth = videoElement.videoWidth;
-  const sourceHeight = videoElement.videoHeight;
-
-  const squareSize = Math.min(sourceWidth, sourceHeight);
-  const cropX = (sourceWidth - squareSize) / 2;
-  const cropY = (sourceHeight - squareSize) / 2;
-
-  canvas.width = squareSize;
-  canvas.height = squareSize;
-
-  ctx.drawImage(
-    videoElement,
-    cropX,
-    cropY,
-    squareSize,
-    squareSize,
-    0,
-    0,
-    squareSize,
-    squareSize,
-  );
-
-  return canvas;
-};
-
-/**
- * Draw face mesh overlay on canvas
- */
-export const drawFaceMesh = (
-  canvas: HTMLCanvasElement,
-  landmarks: any[],
-  capturesTaken: number,
-  smileCheckpoint: number,
-): void => {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  const canvasWidth = canvas.width;
-  const canvasHeight = canvas.height;
-
-  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-  const drawingUtils = new DrawingUtils(ctx);
-
-  // use this if scaling is needed
-  // const scaleFactor = Math.sqrt(canvasWidth * canvasHeight) / 500;
-
-  landmarks.forEach((landmark) => {
-    if (!landmark || landmark.length === 0) return;
-
-    const outlineColor = 'rgba(162, 155, 254,0.4)';
-    const lineWidth = 2; // Math.max(1, scaleFactor * 2);
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
-    ctx.lineWidth = lineWidth;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    drawingUtils.drawLandmarks(landmark, {
-      color: 'rgba(9, 132, 227,0.7)',
-      lineWidth: 0.5,
-      radius: 0.5,
-    });
-    drawingUtils.drawConnectors(
-      landmark,
-      FaceLandmarker.FACE_LANDMARKS_FACE_OVAL,
-      {
-        color: outlineColor,
-        lineWidth,
-      },
-    );
-
-    const isInSmileZone = capturesTaken > 0 && capturesTaken >= smileCheckpoint;
-    if (isInSmileZone) {
-      drawingUtils.drawConnectors(
-        landmark,
-        FaceLandmarker.FACE_LANDMARKS_LIPS,
-        {
-          color: outlineColor,
-          lineWidth,
-        },
-      );
-    }
-  });
-};
-
-/**
- * Clear canvas completely
- */
-export const clearCanvas = (canvas: HTMLCanvasElement): void => {
-  const ctx = canvas.getContext('2d');
-  if (ctx) {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  }
-};
+import { DrawingUtils, FaceLandmarker } from '@mediapipe/tasks-vision';
+
+/**
+ * Create a cropped square canvas from video for face detection
+ */
+export const createCroppedVideoFrame = (
+  videoElement: HTMLVideoElement,
+): HTMLCanvasElement | null => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  const sourceWidth = videoElement.videoWidth;
+  const sourceHeight = videoElement.videoHeight;
+
+  const squareSize = Math.min(sourceWidth, sourceHeight);
+  const cropX = (sourceWidth - squareSize) / 2;
+  const cropY = (sourceHeight - squareSize) / 2;
+
+  canvas.width = squareSize;
+  canvas.height = squareSize;
+
+  ctx.drawImage(
+    videoElement,
+    cropX,
+    cropY,
+    squareSize,
+    squareSize,
+    0,
+    0,
+    squareSize,
+    squareSize,
+  );
+
+  return canvas;
+};
+
+/**
+ * Draw face mesh overlay on canvas
+ */
+export const drawFaceMesh = (
+  canvas: HTMLCanvasElement,
+  landmarks: any[],
+  capturesTaken: number,
+  smileCheckpoint: number,
+): void => {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const canvasWidth = canvas.width;
+  const canvasHeight = canvas.height;
+
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  const drawingUtils = new DrawingUtils(ctx);
+
+  // use this if scaling is needed
+  // const scaleFactor = Math.sqrt(canvasWidth * canvasHeight) / 500;
+
+  landmarks.forEach((landmark) => {
+    if (!landmark || landmark.length === 0) return;
+
+    const outlineColor = 'rgba(162, 155, 254,0.4)';
+    const lineWidth = 2; // Math.max(1, scaleFactor * 2);
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    drawingUtils.drawLandmarks(landmark, {
+      color: 'rgba(9, 132, 227,0.7)',
+      lineWidth: 0.5,
+      radius: 0.5,
+    });
+    drawingUtils.drawConnectors(
+      landmark,
+      FaceLandmarker.FACE_LANDMARKS_FACE_OVAL,
+      {
+        color: outlineColor,
+        lineWidth,
+      },
+    );
+
+    const isInSmileZone = capturesTaken > 0 && capturesTaken >= smileCheckpoint;
+    if (isInSmileZone) {
+      drawingUtils.drawConnectors(
+        landmark,
+        FaceLandmarker.FACE_LANDMARKS_LIPS,
+        {
+          color: outlineColor,
+          lineWidth,
+        },
+      );
+    }
+  });
+};
+
+/**
+ * Clear canvas completely
+ */
+export const clearCanvas = (canvas: HTMLCanvasElement): void => {
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
+};

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

@@ -1,129 +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;
-};
+/**
+ * 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

@@ -1,64 +1,64 @@
-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
-  const zoomOutFactor = 1;
-  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 = 0;
-
-  ctx.drawImage(
-    videoElement,
-    -offsetX,
-    -offsetY - verticalOffset,
-    sourceWidth,
-    sourceHeight,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  );
-
-  return canvas.toDataURL('image/jpeg');
-};
+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
+  const zoomOutFactor = 1;
+  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 = 0;
+
+  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

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