@smileid/web-components 2.0.2 → 10.0.2

package/lib/components/selfie/src/smartselfie-capture/OvalProgress.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+interface OvalProgressProps {
+  progress: number;
+  duration?: number;
+  themeColor?: string;
+}
+
+const OvalProgress = ({
+  progress,
+  duration = 1000,
+  themeColor = '#001096',
+}: OvalProgressProps) => {
+  const pathRef = useRef<SVGPathElement>(null);
+  const prevProgress = useRef(progress);
+
+  useEffect(() => {
+    const path = pathRef.current;
+    if (!path) return;
+
+    const pathLength = path.getTotalLength();
+    path.style.opacity = progress > 0 ? '1' : '0';
+    const fromOffset = pathLength * (1 - prevProgress.current);
+    const toOffset = pathLength * (1 - progress);
+
+    // If no change, skip
+    if (fromOffset === toOffset) return;
+
+    path.style.transition = 'none';
+    path.style.strokeDasharray = `${pathLength} ${pathLength}`;
+    path.style.strokeDashoffset = `${fromOffset}`;
+
+    // Force style flush
+    path.getBoundingClientRect();
+
+    path.style.transition = `stroke-dashoffset ${duration}ms ease-out`;
+    path.style.strokeDashoffset = `${toOffset}`;
+
+    prevProgress.current = progress;
+  }, [progress, duration]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+      }}
+    >
+      <svg
+        viewBox="0 0 285 380"
+        preserveAspectRatio="xMidYMid meet"
+        style={{ width: '100%', height: '100%' }}
+      >
+        {/* id is referenced by parent */}
+        <clipPath id="selfie-clip-path" clipPathUnits="objectBoundingBox">
+          <path d="M0.085 0.382 C0.087 0.357 0.092 0.294 0.131 0.236 C0.200 0.133 0.340 0.063 0.501 0.063 C0.730 0.063 0.915 0.205 0.915 0.382 C0.915 0.424 0.899 0.513 0.891 0.549 C0.882 0.588 0.871 0.626 0.857 0.664 C0.792 0.825 0.639 0.937 0.501 0.937 C0.314 0.937 0.182 0.755 0.144 0.666 C0.126 0.624 0.110 0.557 0.107 0.547 C0.092 0.485 0.081 0.439 0.085 0.382 Z" />
+        </clipPath>
+        <path
+          d="M142.693 24C208.319 24 261 77.97 261 145.008C261 160.97 256.319 194.788 254.129 208.356C251.64 223.188 248.348 237.875 244.27 252.35C225.747 313.203 182.328 356 142.693 356C89.414 356 51.871 286.667 41.016 252.948C35.937 236.987 31.356 211.748 30.559 207.857C26.277 184.114 22.991 166.556 24.285 145.008C24.883 135.631 26.277 111.789 37.431 89.742C57.049 50.636 96.983 24 142.693 24Z"
+          stroke={themeColor}
+          fill="none"
+          style={{ strokeWidth: '8' }}
+        />
+        <path
+          ref={pathRef}
+          d="M142.693 24C208.319 24 261 77.97 261 145.008C261 160.97 256.319 194.788 254.129 208.356C251.64 223.188 248.348 237.875 244.27 252.35C225.747 313.203 182.328 356 142.693 356C89.414 356 51.871 286.667 41.016 252.948C35.937 236.987 31.356 211.748 30.559 207.857C26.277 184.114 22.991 166.556 24.285 145.008C24.883 135.631 26.277 111.789 37.431 89.742C57.049 50.636 96.983 24 142.693 24Z"
+          stroke="#22c55e"
+          style={{ strokeWidth: '8' }}
+          fill="none"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default OvalProgress;

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -0,0 +1,223 @@
+import { useRef, useEffect } from 'preact/hooks';
+import register from 'preact-custom-element';
+import type { FunctionComponent } from 'preact';
+
+import { getBoolProp } from '../../../../utils/props';
+import { useFaceCapture, useCamera } from './hooks';
+import { CameraPreview } from './components/CameraPreview';
+import { AlertDisplay } from './components/AlertDisplay';
+import { CaptureControls } from './components/CaptureControls';
+
+import '../../../navigation/src';
+import '../../../attribution/PoweredBySmileId';
+
+interface Props {
+  interval?: number;
+  duration?: number;
+  'theme-color'?: string;
+  'show-navigation'?: string | boolean;
+  'allow-agent-mode'?: string | boolean;
+  'show-agent-mode-for-tests'?: string | boolean;
+  'hide-attribution'?: string | boolean;
+  'disable-image-tests'?: string | boolean;
+}
+
+const SmartSelfieCapture: FunctionComponent<Props> = ({
+  interval = 350,
+  duration = 2800,
+  'theme-color': themeColor = '#001096',
+  'show-navigation': showNavigationProp = false,
+  'allow-agent-mode': allowAgentModeProp = false,
+  'show-agent-mode-for-tests': showAgentModeForTestsProp = false,
+  'hide-attribution': hideAttributionProp = false,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const navigationRef = useRef<HTMLElement | null>(null);
+
+  const showNavigation = getBoolProp(showNavigationProp);
+  const allowAgentMode = getBoolProp(allowAgentModeProp);
+  const showAgentModeForTests = getBoolProp(showAgentModeForTestsProp);
+  const hideAttribution = getBoolProp(hideAttributionProp);
+
+  const smileCooldown = 300;
+  const smileThreshold = 0.25;
+  const mouthOpenThreshold = 0.05;
+  const minFaceSize = 0.35;
+  const maxFaceSize = 0.5;
+
+  const camera = useCamera();
+
+  const faceCapture = useFaceCapture({
+    videoRef: camera.videoRef,
+    canvasRef,
+    interval,
+    duration,
+    smileThreshold,
+    mouthOpenThreshold,
+    minFaceSize,
+    maxFaceSize,
+    smileCooldown,
+  });
+
+  useEffect(() => {
+    const initializeCamera = async () => {
+      await camera.startCamera();
+      await camera.checkAgentSupport();
+      await faceCapture.initializeFaceLandmarker();
+
+      setTimeout(() => {
+        faceCapture.setupCanvas();
+        faceCapture.startDetectionLoop();
+      }, 500);
+    };
+
+    initializeCamera();
+
+    return () => {
+      faceCapture.stopDetectionLoop();
+      camera.stopCamera();
+      faceCapture.cleanup();
+    };
+  }, []);
+
+  useEffect(() => {
+    const navigation = navigationRef.current;
+
+    if (navigation && showNavigation) {
+      const handleNavigationBack = () => {
+        faceCapture.handleCancel();
+      };
+
+      const handleNavigationClose = () => {
+        faceCapture.handleClose();
+      };
+
+      navigation.addEventListener('navigation.back', handleNavigationBack);
+      navigation.addEventListener('navigation.close', handleNavigationClose);
+
+      return () => {
+        navigation.removeEventListener('navigation.back', handleNavigationBack);
+        navigation.removeEventListener(
+          'navigation.close',
+          handleNavigationClose,
+        );
+      };
+    }
+    return undefined;
+  }, [showNavigation]);
+
+  return (
+    <div className="smartselfie-capture">
+      {showNavigation && (
+        // @ts-ignore
+        <smileid-navigation ref={navigationRef} theme-color={themeColor} />
+      )}
+
+      <CameraPreview
+        videoRef={camera.videoRef}
+        canvasRef={canvasRef}
+        facingMode={camera.facingMode}
+        multipleFaces={faceCapture.multipleFaces.value}
+        progress={
+          faceCapture.capturesTaken.value > 0
+            ? faceCapture.capturesTaken.value / faceCapture.totalCaptures.value
+            : 0
+        }
+        interval={interval}
+        themeColor={themeColor}
+      />
+
+      <AlertDisplay alertTitle={faceCapture.alertTitle.value} />
+
+      {!faceCapture.isCapturing.value &&
+        !faceCapture.hasFinishedCapture.value && (
+          <CaptureControls
+            isCapturing={faceCapture.isCapturing.value}
+            hasFinishedCapture={faceCapture.hasFinishedCapture.value}
+            isReadyToCapture={faceCapture.isReadyToCapture.value}
+            allowAgentMode={allowAgentMode}
+            agentSupported={camera.agentSupported}
+            showAgentModeForTests={showAgentModeForTests}
+            facingMode={camera.facingMode}
+            themeColor={themeColor}
+            onStartCapture={faceCapture.startCapture}
+            onSwitchCamera={camera.switchCamera}
+          />
+        )}
+
+      {/* @ts-ignore */}
+      {!hideAttribution && <powered-by-smile-id />}
+
+      <style>{`
+        * {
+          box-sizing: border-box;
+        }
+
+        button {
+          padding: 10px 20px;
+          background: ${themeColor || '#001096'};
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        button:disabled {
+          background: #ccc;
+          cursor: not-allowed;
+        }
+
+        button.btn-primary {
+          background-color: ${themeColor || '#001096'};
+          border-radius: 2.5rem;
+          color: white;
+          border: none;
+          height: 3.125rem;
+          display: inline-block;
+          padding: 0.75rem 1.5rem;
+          text-align: center;
+          font-size: 1.125rem;
+          font-weight: 600;
+          font-family: "DM Sans", sans-serif;
+          cursor: pointer;
+        }
+        
+        button.btn-primary:hover {
+          background-color: #2d2b2a;
+        }
+          
+        button.btn-primary:disabled {
+          background-color: #666;
+          cursor: not-allowed;
+        }
+
+        .smartselfie-capture {
+          font-family: sans-serif;
+          max-width: 356px;
+          margin: 0 auto;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+if (!customElements.get('smartselfie-capture')) {
+  register(
+    SmartSelfieCapture,
+    'smartselfie-capture',
+    [
+      'interval',
+      'duration',
+      'theme-color',
+      'show-navigation',
+      'allow-agent-mode',
+      'show-agent-mode-for-tests',
+      'hide-attribution',
+      'disable-image-tests',
+    ],
+    { shadow: true },
+  );
+}
+
+export default SmartSelfieCapture;

package/lib/components/selfie/src/smartselfie-capture/components/AlertDisplay.tsx

@@ -0,0 +1,34 @@
+import type { FunctionComponent } from 'preact';
+
+interface AlertDisplayProps {
+  alertTitle: string;
+}
+
+export const AlertDisplay: FunctionComponent<AlertDisplayProps> = ({
+  alertTitle,
+}) =>
+  alertTitle ? (
+    <>
+      <div className="alert-message">
+        <div className="alert-title">{alertTitle}</div>
+      </div>
+
+      <style>{`
+        .alert-message {
+          margin-top: 1.5rem;
+          color: #000;
+          color: #151F72;
+          padding: 0.5rem 1.5rem;
+          border-radius: 4px;
+          text-align: start;
+          width: 100%;
+        }
+
+        .alert-title {
+          font-size: 16px;
+          font-weight: bold;
+          text-align: center;
+        }
+      `}</style>
+    </>
+  ) : null;

package/lib/components/selfie/src/smartselfie-capture/components/CameraPreview.tsx

@@ -0,0 +1,97 @@
+import type { FunctionComponent, Ref } from 'preact';
+import OvalProgress from '../OvalProgress';
+
+interface CameraPreviewProps {
+  videoRef: Ref<HTMLVideoElement>;
+  canvasRef: Ref<HTMLCanvasElement>;
+  facingMode: 'user' | 'environment';
+  multipleFaces: boolean;
+  progress: number;
+  interval: number;
+  themeColor: string;
+}
+
+export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
+  videoRef,
+  canvasRef,
+  facingMode,
+  multipleFaces,
+  progress,
+  interval,
+  themeColor,
+}) => (
+  <>
+    <div className="camera-preview-container">
+      <div
+        className="video-wrapper"
+        style={{
+          clipPath: multipleFaces ? 'none' : 'url(#selfie-clip-path)',
+        }}
+      >
+        <div className="video-container">
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            muted
+            className={`camera-video ${facingMode === 'user' ? 'mirror' : ''}`}
+          />
+          <canvas
+            ref={canvasRef}
+            className={`camera-canvas ${facingMode === 'user' ? 'mirror' : ''}`}
+          />
+        </div>
+      </div>
+      {!multipleFaces && (
+        <OvalProgress
+          progress={progress}
+          duration={interval}
+          themeColor={themeColor}
+        />
+      )}
+    </div>
+
+    <style>{`
+      .camera-preview-container {
+        position: relative;
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+      }
+
+      .video-wrapper {
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+        position: relative;
+        aspect-ratio: 3 / 4;
+        overflow: hidden;
+      }
+
+      .video-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .camera-video,
+      .camera-canvas {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .camera-video.mirror,
+      .camera-canvas.mirror {
+        transform: translate(-50%, -50%) scaleX(-1);
+      }
+
+      .camera-canvas {
+        pointer-events: none;
+      }
+    `}</style>
+  </>
+);

package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx

@@ -0,0 +1,74 @@
+import type { FunctionComponent } from 'preact';
+
+interface CaptureControlsProps {
+  isCapturing: boolean;
+  hasFinishedCapture: boolean;
+  isReadyToCapture: boolean;
+  allowAgentMode: boolean;
+  agentSupported: boolean;
+  showAgentModeForTests: boolean;
+  facingMode: 'user' | 'environment';
+  themeColor?: string;
+  onStartCapture: () => void;
+  onSwitchCamera: () => void;
+}
+
+export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
+  isCapturing,
+  hasFinishedCapture,
+  isReadyToCapture,
+  allowAgentMode,
+  agentSupported,
+  showAgentModeForTests,
+  facingMode,
+  themeColor = '#001096',
+  onStartCapture,
+  onSwitchCamera,
+}) => (
+  <>
+    <div className="controls">
+      <button
+        class="btn-primary"
+        onClick={onStartCapture}
+        disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
+      >
+        Start Capture
+      </button>
+
+      {allowAgentMode && (agentSupported || showAgentModeForTests) && (
+        <button
+          onClick={onSwitchCamera}
+          className="agent-mode-btn"
+          disabled={isCapturing || hasFinishedCapture}
+        >
+          {facingMode === 'user' ? 'Agent Mode Off' : 'Agent Mode On'}
+        </button>
+      )}
+    </div>
+
+    <style>{`
+      .controls {
+        margin: 1.5rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        justify-content: center;
+      }
+
+      .agent-mode-btn {
+        padding: 8px 16px;
+        font-size: 14px;
+        background: ${themeColor};
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .agent-mode-btn:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+    `}</style>
+  </>
+);

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

@@ -0,0 +1,3 @@
+export * from './CameraPreview';
+export * from './AlertDisplay';
+export * from './CaptureControls';

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

@@ -0,0 +1,23 @@
+/**
+ * The type of image submitted in the job request
+ * @readonly
+ * @enum {number}
+ */
+export const ImageType = {
+  /** ID_CARD_BACK_IMAGE_BASE64 Base64 encoded back of ID card image (.jpg or .png) */
+  ID_CARD_BACK_IMAGE_BASE64: 7,
+  /** ID_CARD_BACK_IMAGE_FILE Back of ID card image in .png or .jpg file format */
+  ID_CARD_BACK_IMAGE_FILE: 5,
+  /** ID_CARD_IMAGE_BASE64 Base64 encoded ID card image (.png or .jpg) */
+  ID_CARD_IMAGE_BASE64: 3,
+  /** ID_CARD_IMAGE_FILE ID card image in .png or .jpg file format */
+  ID_CARD_IMAGE_FILE: 1,
+  /** LIVENESS_IMAGE_BASE64 Base64 encoded liveness image (.jpg or .png) */
+  LIVENESS_IMAGE_BASE64: 6,
+  /** LIVENESS_IMAGE_FILE Liveness image in .png or .jpg file format */
+  LIVENESS_IMAGE_FILE: 4,
+  /** SELFIE_IMAGE_BASE64 Base64 encoded selfie image (.png or .jpg) */
+  SELFIE_IMAGE_BASE64: 2,
+  /** SELFIE_IMAGE_FILE Selfie image in .png or .jpg file format */
+  SELFIE_IMAGE_FILE: 0,
+};

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

@@ -0,0 +1,2 @@
+export * from './useCamera';
+export * from './useFaceCapture';

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

@@ -0,0 +1,94 @@
+import { useRef, useState } from 'preact/hooks';
+
+export const useCamera = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const [facingMode, setFacingMode] = useState<'user' | 'environment'>('user');
+  const [agentSupported, setAgentSupported] = useState(false);
+
+  const startCamera = async () => {
+    try {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+      }
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = null;
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode },
+      });
+      streamRef.current = stream;
+
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevice = devices.find(
+        (device) =>
+          device.kind === 'videoinput' &&
+          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 },
+        }),
+      );
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+      }
+    } catch (error) {
+      console.error('Failed to start camera:', error);
+    }
+  };
+
+  const switchCamera = async () => {
+    const newFacingMode = facingMode === 'user' ? 'environment' : 'user';
+    setFacingMode(newFacingMode);
+
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+
+    await startCamera();
+  };
+
+  const checkAgentSupport = async () => {
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(
+        (device) => device.kind === 'videoinput',
+      );
+      setAgentSupported(videoDevices.length > 1);
+    } catch (error) {
+      setAgentSupported(false);
+    }
+  };
+
+  const stopCamera = () => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+
+    if (videoRef.current) {
+      videoRef.current.srcObject = null;
+      videoRef.current.load();
+    }
+  };
+
+  return {
+    videoRef,
+    streamRef,
+    facingMode,
+    agentSupported,
+    startCamera,
+    switchCamera,
+    checkAgentSupport,
+    stopCamera,
+  };
+};