@smileid/web-components 10.0.3 → 10.0.5

package/lib/components/selfie/src/smartselfie-capture/hooks/useCamera.ts

@@ -1,12 +1,54 @@
-import { useRef, useState } from 'preact/hooks';
+import { useRef, useState, useEffect } from 'preact/hooks';
 
-export const useCamera = () => {
+export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const streamRef = useRef<MediaStream | null>(null);
-  const [facingMode, setFacingMode] = useState<'user' | 'environment'>('user');
+  const [facingMode, setFacingMode] = useState(initialFacingMode);
   const [agentSupported, setAgentSupported] = useState(false);
+  const onCameraSwitchCallbackRef = useRef<(() => void) | null>(null);
+  const isSwitchingCameraRef = useRef(false);
+  const timeoutIdsRef = useRef<Set<NodeJS.Timeout>>(new Set());
 
-  const startCamera = async () => {
+  const registerCameraSwitchCallback = (callback: () => void) => {
+    onCameraSwitchCallbackRef.current = callback;
+  };
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return undefined;
+
+    const handleVideoReady = () => {
+      if (isSwitchingCameraRef.current && onCameraSwitchCallbackRef.current) {
+        const timeoutId = setTimeout(() => {
+          onCameraSwitchCallbackRef.current?.();
+          isSwitchingCameraRef.current = false;
+          timeoutIdsRef.current.delete(timeoutId);
+        }, 100);
+        timeoutIdsRef.current.add(timeoutId);
+      }
+    };
+
+    video.addEventListener('loadedmetadata', handleVideoReady);
+
+    return () => {
+      video.removeEventListener('loadedmetadata', handleVideoReady);
+      timeoutIdsRef.current.forEach((timeoutId) => clearTimeout(timeoutId));
+      timeoutIdsRef.current.clear();
+    };
+  }, [videoRef.current?.src]);
+
+  useEffect(
+    () => () => {
+      timeoutIdsRef.current.forEach((timeoutId) => clearTimeout(timeoutId));
+      timeoutIdsRef.current.clear();
+    },
+    [],
+  );
+
+  const startCamera = async (
+    targetFacingMode?: CameraFacingMode,
+    callback?: (cameraName?: string) => void,
+  ) => {
     try {
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => track.stop());
@@ -18,10 +60,24 @@ export const useCamera = () => {
       }
 
       const stream = await navigator.mediaDevices.getUserMedia({
-        video: { facingMode },
+        video: { facingMode: targetFacingMode || facingMode },
       });
       streamRef.current = stream;
 
+      const track = stream.getVideoTracks()[0];
+      const settings = track.getSettings();
+      const actualFacingMode = settings.facingMode as
+        | CameraFacingMode
+        | undefined;
+
+      const requestedFacingMode = targetFacingMode || facingMode;
+
+      if (actualFacingMode && actualFacingMode !== requestedFacingMode) {
+        setFacingMode(actualFacingMode);
+      } else if (actualFacingMode && actualFacingMode !== facingMode) {
+        setFacingMode(actualFacingMode);
+      }
+
       const devices = await navigator.mediaDevices.enumerateDevices();
       const videoDevice = devices.find(
         (device) =>
@@ -29,16 +85,12 @@ export const useCamera = () => {
           stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,
       );
 
-      const smartCameraWeb = document.querySelector('smart-camera-web');
-      smartCameraWeb?.dispatchEvent(
-        new CustomEvent('metadata.camera-name', {
-          detail: { cameraName: videoDevice?.label },
-        }),
-      );
+      callback?.(videoDevice?.label);
 
       if (videoRef.current) {
         videoRef.current.srcObject = stream;
         await videoRef.current.play();
+        // Video ready callback will be handled by useEffect
       }
     } catch (error) {
       console.error('Failed to start camera:', error);
@@ -47,23 +99,114 @@ export const useCamera = () => {
 
   const switchCamera = async () => {
     const newFacingMode = facingMode === 'user' ? 'environment' : 'user';
-    setFacingMode(newFacingMode);
+    isSwitchingCameraRef.current = true;
 
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-      streamRef.current = null;
+    const previousFacingMode = facingMode;
+    try {
+      setFacingMode(newFacingMode);
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+      }
+
+      await startCamera(newFacingMode);
+    } catch (error) {
+      setFacingMode(previousFacingMode);
+      isSwitchingCameraRef.current = false;
+
+      try {
+        await startCamera(previousFacingMode);
+      } catch (restoreError) {
+        console.error('Failed to restore previous camera:', restoreError);
+      }
     }
+  };
+
+  const detectBrowserEngine = () => {
+    const userAgent = navigator.userAgent.toLowerCase();
+
+    const isGecko =
+      userAgent.includes('firefox') ||
+      (userAgent.includes('gecko') &&
+        !userAgent.includes('chrome') &&
+        !userAgent.includes('edge'));
 
-    await startCamera();
+    const hasFirefoxFeatures =
+      'mozInnerScreenX' in window ||
+      'mozInputSource' in window ||
+      'mozPaintCount' in window ||
+      typeof (window as any).InstallTrigger !== 'undefined';
+
+    const supportsMozCSS =
+      CSS.supports &&
+      (CSS.supports('-moz-appearance', 'none') ||
+        CSS.supports('-moz-user-select', 'none'));
+
+    return {
+      isGecko: isGecko || hasFirefoxFeatures || supportsMozCSS,
+      isChromium:
+        userAgent.includes('chrome') ||
+        userAgent.includes('chromium') ||
+        userAgent.includes('edge'),
+      isWebKit: userAgent.includes('webkit') && !userAgent.includes('chrome'),
+    };
   };
 
   const checkAgentSupport = async () => {
     try {
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const videoDevices = devices.filter(
-        (device) => device.kind === 'videoinput',
-      );
-      setAgentSupported(videoDevices.length > 1);
+      const isMobile =
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent,
+        ) ||
+        (navigator.maxTouchPoints && navigator.maxTouchPoints > 1);
+
+      // mobile devices generally support both cameras
+      // also, ios crashes if we try to check for cameras
+      if (isMobile) {
+        setAgentSupported(true);
+        return;
+      }
+
+      const { isGecko } = detectBrowserEngine();
+
+      let userCameraId: string | null = null;
+      let environmentCameraId: string | null = null;
+
+      // test if we can get a user-facing camera
+      try {
+        const userStream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'user' },
+        });
+        userCameraId =
+          userStream.getVideoTracks()[0].getSettings().deviceId ?? null;
+        userStream.getTracks().forEach((track) => track.stop());
+      } catch (error) {
+        // no user-facing camera available
+      }
+
+      // test if we can get an environment-facing camera
+      try {
+        const envStream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'environment' },
+        });
+        environmentCameraId =
+          envStream.getVideoTracks()[0].getSettings().deviceId ?? null;
+        envStream.getTracks().forEach((track) => track.stop());
+      } catch (error) {
+        // no environment-facing camera available
+      }
+
+      const hasBothCameras =
+        userCameraId &&
+        environmentCameraId &&
+        userCameraId !== environmentCameraId;
+
+      if (!hasBothCameras) {
+        setAgentSupported(false);
+        return;
+      }
+
+      setAgentSupported(!isGecko);
     } catch (error) {
       setAgentSupported(false);
     }
@@ -90,5 +233,6 @@ export const useCamera = () => {
     switchCamera,
     checkAgentSupport,
     stopCamera,
+    registerCameraSwitchCallback,
   };
 };

package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts

@@ -1,6 +1,7 @@
 import { useRef } from 'preact/hooks';
 import { useSignal, useComputed } from '@preact/signals';
 import { FaceLandmarker } from '@mediapipe/tasks-vision';
+import { throttle } from 'lodash';
 import {
   calculateFaceSize,
   isFaceInBounds,
@@ -29,6 +30,7 @@ interface UseFaceCaptureProps {
   minFaceSize: number;
   maxFaceSize: number;
   smileCooldown: number;
+  getFacingMode: () => CameraFacingMode;
 }
 
 export const useFaceCapture = ({
@@ -41,6 +43,7 @@ export const useFaceCapture = ({
   minFaceSize,
   maxFaceSize,
   smileCooldown,
+  getFacingMode,
 }: UseFaceCaptureProps) => {
   const faceLandmarkerRef = useRef<FaceLandmarker | null>(null);
   const animationFrameRef = useRef<number | null>(null);
@@ -58,6 +61,7 @@ export const useFaceCapture = ({
   const currentMouthOpen = useSignal(0);
   const lastSmileTime = useSignal(0);
   const alertTitle = useSignal('');
+  const isInitializing = useSignal(true);
 
   const isCapturing = useSignal(false);
   const isPaused = useSignal(false);
@@ -81,19 +85,36 @@ export const useFaceCapture = ({
       !multipleFaces.value,
   );
 
+  const updateAlertImmediate = (messageKey: MessageKey | null) => {
+    if (messageKey && MESSAGES[messageKey]) {
+      alertTitle.value = MESSAGES[messageKey];
+    } else {
+      alertTitle.value = '';
+    }
+  };
+
+  const updateAlert = useRef(
+    throttle((messageKey: MessageKey | null) => {
+      updateAlertImmediate(messageKey);
+    }, 300),
+  ).current;
+
   const initializeFaceLandmarker = async () => {
     try {
+      const isAlreadyLoaded =
+        window.__smileIdentityMediapipe?.loaded &&
+        window.__smileIdentityMediapipe?.instance;
+
+      if (!isAlreadyLoaded) {
+        isInitializing.value = true;
+        updateAlertImmediate('initializing');
+      }
+
       faceLandmarkerRef.current = await getMediapipeInstance();
+      isInitializing.value = false;
     } catch (error) {
       console.error('Failed to initialize MediaPipe:', error);
-    }
-  };
-
-  const updateAlert = (messageKey: MessageKey | null) => {
-    if (messageKey && MESSAGES[messageKey]) {
-      alertTitle.value = MESSAGES[messageKey];
-    } else {
-      alertTitle.value = '';
+      isInitializing.value = false;
     }
   };
 
@@ -110,7 +131,6 @@ export const useFaceCapture = ({
       if (container) {
         canvasRef.current.style.left = '50%';
         canvasRef.current.style.top = '50%';
-        canvasRef.current.style.transform = 'translate(-50%, -50%) scaleX(-1)';
       }
     }
   };
@@ -119,9 +139,7 @@ export const useFaceCapture = ({
     const isInNeutralZone = capturesTaken.value < neutralZone.value;
     const isInSmileZone = capturesTaken.value >= smileCheckpoint.value;
 
-    if (isInNeutralZone && currentSmileScore.value >= smileThreshold) {
-      updateAlert('neutral-expression');
-    } else if (isInNeutralZone) {
+    if (isInNeutralZone) {
       alertTitle.value = 'Capturing...';
     } else if (isInSmileZone) {
       const timeSinceSmile = Date.now() - lastSmileTime.value;
@@ -143,7 +161,9 @@ export const useFaceCapture = ({
   };
 
   const updateAlerts = () => {
-    if (multipleFaces.value) {
+    if (isInitializing.value) {
+      updateAlertImmediate('initializing');
+    } else if (multipleFaces.value) {
       updateAlert('multiple-faces');
     } else if (!faceDetected.value) {
       updateAlert('no-face');
@@ -173,7 +193,21 @@ export const useFaceCapture = ({
       return;
     }
 
+    // ensure video has valid dimensions before processing
+    if (
+      videoRef.current.videoWidth <= 0 ||
+      videoRef.current.videoHeight <= 0 ||
+      videoRef.current.readyState < 2
+    ) {
+      animationFrameRef.current = requestAnimationFrame(detectFace);
+      return;
+    }
+
     try {
+      if (isInitializing.value) {
+        isInitializing.value = false;
+      }
+
       const croppedCanvas = createCroppedVideoFrame(videoRef.current);
       const detectionSource = croppedCanvas || videoRef.current;
 
@@ -359,6 +393,7 @@ export const useFaceCapture = ({
         images: [...livenessImages, referenceImage],
         referenceImage: referencePhoto.value,
         previewImage: referencePhoto.value,
+        facingMode: getFacingMode(),
         meta: { libraryVersion: COMPONENTS_VERSION },
       };
 
@@ -368,11 +403,6 @@ export const useFaceCapture = ({
         }),
       );
 
-      const smartCameraWeb = document.querySelector('smart-camera-web');
-      smartCameraWeb?.dispatchEvent(
-        new CustomEvent('metadata.selfie-capture-end'),
-      );
-
       hasFinishedCapture.value = true;
     }
   };
@@ -424,13 +454,8 @@ export const useFaceCapture = ({
         return;
       }
 
-      const isInNeutralZone = capturesTaken.value < neutralZone.value;
       const isInSmileZone = capturesTaken.value >= smileCheckpoint.value;
 
-      if (isInNeutralZone && currentSmileScore.value >= smileThreshold) {
-        return;
-      }
-
       if (isInSmileZone) {
         const timeSinceSmile = Date.now() - lastSmileTime.value;
         if (timeSinceSmile > smileCooldown) {
@@ -474,6 +499,21 @@ export const useFaceCapture = ({
     capturesTaken.value = 0;
     countdown.value = totalCaptures.value;
 
+    const smartCameraWeb = document.querySelector('smart-camera-web');
+    smartCameraWeb?.dispatchEvent(
+      new CustomEvent('metadata.selfie-capture-start'),
+    );
+    smartCameraWeb?.dispatchEvent(
+      new CustomEvent('metadata.selfie-origin', {
+        detail: {
+          imageOrigin: {
+            environment: 'back_camera',
+            user: 'front_camera',
+          }[getFacingMode()],
+        },
+      }),
+    );
+
     startCaptureInterval();
   };
 
@@ -515,6 +555,23 @@ export const useFaceCapture = ({
       clearInterval(captureTimerRef.current);
     }
     stopDetectionLoop();
+    updateAlert.cancel();
+  };
+
+  const resetFaceDetectionState = () => {
+    faceDetected.value = false;
+    faceInBounds.value = false;
+    faceProximity.value = 'good';
+    multipleFaces.value = false;
+    faceLandmarks.value = [];
+    currentSmileScore.value = 0;
+    currentFaceSize.value = 0;
+    currentMouthOpen.value = 0;
+    lastSmileTime.value = 0;
+
+    if (canvasRef.current) {
+      clearCanvas(canvasRef.current);
+    }
   };
 
   return {
@@ -529,6 +586,7 @@ export const useFaceCapture = ({
     currentMouthOpen,
     lastSmileTime,
     alertTitle,
+    isInitializing,
     isReadyToCapture,
 
     isCapturing,
@@ -554,5 +612,6 @@ export const useFaceCapture = ({
     handleCancel,
     handleClose,
     cleanup,
+    resetFaceDetectionState,
   };
 };

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

@@ -6,7 +6,8 @@ export const MESSAGES = {
   'too-far': 'Move closer',
   'neutral-expression': 'Neutral expression',
   'smile-required': 'Smile!',
-  'open-mouth-smile': 'Bigger smile!',
+  'open-mouth-smile': 'Wider smile - teeth visible',
+  initializing: 'Initializing...',
 };
 
 export type MessageKey = keyof typeof MESSAGES;

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

@@ -10,6 +10,23 @@ declare global {
   }
 }
 
+const hasFP16Support = () => {
+  const canvas = document.createElement('canvas');
+  const gl =
+    canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+  if (!gl) return false;
+
+  const hasHalfFloatExt = (gl as any).getExtension('OES_texture_half_float');
+  const hasHalfFloatLinear = (gl as any).getExtension(
+    'OES_texture_half_float_linear',
+  );
+  const hasColorBufferHalfFloat = (gl as any).getExtension(
+    'EXT_color_buffer_half_float',
+  );
+
+  return !!(hasHalfFloatExt && hasColorBufferHalfFloat && hasHalfFloatLinear);
+};
+
 export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
   if (!window.__smileIdentityMediapipe) {
     window.__smileIdentityMediapipe = {
@@ -38,7 +55,7 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
       const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
         baseOptions: {
           modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
-          delegate: 'GPU',
+          delegate: hasFP16Support() ? 'GPU' : 'CPU',
         },
         outputFaceBlendshapes: true,
         runningMode: 'VIDEO',

package/lib/components/signature-pad/package.json

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

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -10,8 +10,14 @@ const COMPONENTS_VERSION = packageJson.version;
 
 function scwTemplateString() {
   return `
+  <style>
+    :host {
+      display: block;
+      height: 100%;
+    }
+  </style>
   ${styles(this.themeColor)}
-  <div>
+  <div style="height: 100%;">
     <camera-permission ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}></camera-permission>
     <selfie-capture-screens ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
       ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests}

package/lib/styles/src/styles.js

@@ -260,6 +260,9 @@ ${typography}
 
   #document-capture-instructions-screen,
   #back-of-document-capture-instructions-screen {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 1rem;
     display: flex;
     flex-direction: column;
     max-block-size: 100%;
@@ -287,22 +290,33 @@ ${typography}
     padding-bottom: 2rem;
   }
 
+  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions {
+    height: 100%;
+    display: block;
+  }
+
   .instructions-wrapper {
     display: inline-flex;
     flex-direction: column;
-    gap: 1.5rem;
-    margin-block-start: 2rem;
-    margin-block-end: 2rem;
+    gap: 1rem;
+  }
+  
+  @media (min-width: 40rem) {
+    .instructions-wrapper {
+      gap: 1.75rem;
+    }
   }
+
   .instructions {
     display: flex;
     align-items: center;
     text-align: initial;
+    gap: 0.5rem;
   }
 
   .instructions svg {
     flex-shrink: 0;
-    margin-inline-end: 2rem;
+    margin-inline-end: 0.25rem;
   }
 
   .instructions p {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "10.0.3",
+  "version": "10.0.5",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -76,6 +76,7 @@
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
     "@preact/signals": "^2.1.1",
     "@tabler/icons-preact": "^3.34.0",
+    "lodash": "^4.17.21",
     "preact": "^10.26.9",
     "preact-custom-element": "^4.3.0",
     "preact-router": "^4.1.2",
@@ -84,6 +85,7 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.2",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^20.11.24",
     "@types/preact-custom-element": "^4.0.4",
     "@typescript-eslint/eslint-plugin": "^7.18.0",