@smileid/web-components 2.0.1 → 10.0.0

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,
+  };
+};