@smileid/web-components 2.0.2 → 10.0.0

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

@@ -0,0 +1,224 @@
+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;
+          padding-block: 2rem;
+        }
+      `}</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,
+  };
+};