biometry-sdk 1.2.6 → 1.3.0

package/README.md

@@ -1,22 +1,23 @@
 # biometry-sdk
 
 ## Overview
-The **Biometry Web SDK** is a software development kit designed to simplify the integration of Biometry's API services into your web application. Providing tools, UI components, and utilities enables biometric onboarding (face and voice), liveness checks, and user consent.
+The **Biometry Web SDK** is a software development kit designed to simplify the integration of Biometry's API services into your web application. Providing tools, UI components, and utilities enables biometric enrollment (face and voice), liveness checks, and user consent.
 
 ## Table of Contents:
 - [Installation](#installation)
 - [Basic Usage (Direct SDK Methods)](#basic-usage-direct-sdk-methods)
-  - [Consent](#1-give-consent)
-  - [Face Onboarding](#2-face-onboarding)
-  - [Voice Onboarding](#3-voice-onboarding)
+  - [Consents](#1-consents)
+    - [1.1 Give Authorization Consent](#11-give-authorization-consent)
+    - [1.2 Give Storage Consent](#12-give-storage-consent)
+  - [Face Enrollment](#2-face-enrollment)
+  - [Voice Enrollment](#3-voice-enrollment)
   - [Process Video](#4-process-video)
 - [Advanced Usage And Best Practices](#advanced-usage-and-best-practices)
   - [Typical FaceMatch Flow](#typical-facematch-flow)
-  - [Use Cases with processVideoRequestId and usePrefilledVideo](#use-cases-with-processVideoRequestId-and-usePrefilledVideo)
   - [Error Handling](#error-handling)
   - [Security And Privacy Considerations](#security-and-privacy-considerations)
 - [UI Components](#ui-components)
-  - [Face Onboarding Component](#face-onboarding-component)
+  - [Face Enrollment Component](#face-enrollment-component)
   - [Process Video Component](#process-video-component)
 - [License](#license)
 - [More Information](#more-information)
@@ -40,36 +41,49 @@ const sdk = new BiometrySDK('YOUR_API_KEY');
 ### Example
 You can find an example in the example/ directory. The example demonstrates how you might integrate the BiometrySDK in a React component with the state.
 
-### 1. Give Consent
-You **must** obtain user consent before performing any biometric operations:
+### 1. Consents
+#### 1.1 Give Authorization Consent
+You **must** obtain user authorization consent before performing any biometric operations (Face Recognition, Voice Recognition, etc.):
   ```javascript
-  await sdk.giveConsent(true, 'John Doe');
+  await sdk.giveAuthorizationConsent(true, 'John Doe');
   // or
-  sdk.giveConsent(true, 'John Doe').then(() => {
+  sdk.giveAuthorizationConsent(true, 'John Doe').then(() => {
     console.log('Consent given');
   });
   ```
 - The first argument (`true`) indicates that the user has granted consent.
 - The second argument is the user’s full name (used for record-keeping within Biometry).
 
-### 2. Face Onboarding
-Onboard a user’s face for future recognition or matching:
+#### 1.2 Give Storage Consent
+You **must** obtain user consent before storing biometric data (Face Enrollment, Voice Enrollment):
+  ```javascript
+  await sdk.giveStorageConsent(true, 'John Doe');
+  // or
+  sdk.giveStorageConsent(true, 'John Doe').then(() => {
+    console.log('Consent given');
+  });
+  ```
+- The first argument (`true`) indicates that the user has granted consent.
+- The second argument is the user’s full name (used for record-keeping within Biometry).
+
+### 2. Face Enrollment
+Enroll a user’s face for future recognition or matching:
   ```javascript
   const faceFile = new File([/* face image bytes */], 'face.jpg', { type: 'image/jpeg' });
   
-  // Onboard face
-  const faceResponse = await sdk.onboardFace(faceFile, 'John Doe');
-  console.log('Face Onboarding Response:', faceResponse);
+  await sdk.giveStorageConsent(true, 'John Doe');
+  const faceResponse = await sdk.enrollFace(faceFile, 'John Doe');
+  console.log('Face Enrollment Response:', faceResponse);
   ```
 
-### 3. Voice Onboarding
+### 3. Voice Enrollment
 Enroll a user’s voice for future authentication checks:
   ```javascript
   const voiceFile = new File([/* voice audio bytes */], 'voice.wav', { type: 'audio/wav' });
 
-  await sdk.giveConsent(true, 'John Doe');
-  const voiceResponse = await sdk.onboardVoice(voiceFile, 'John Doe');
-  console.log('Voice Onboarding Response:', voiceResponse);
+  await sdk.giveStorageConsent(true, 'John Doe');
+  const voiceResponse = await sdk.enrollVoice(voiceFile, 'John Doe');
+  console.log('Voice Enrollment Response:', voiceResponse);
   ```
 ### 4. Process Video
 Process a user’s video for liveness checks and identity authorization:
@@ -78,22 +92,77 @@ Process a user’s video for liveness checks and identity authorization:
   const phrase = "one two three four five six";
   const userFullName = 'John Doe';
   
-  await sdk.giveConsent(true, userFullName);
+  await sdk.giveAuthorizationConsent(true, userFullName);
   
   try {
     const response = await sdk.processVideo(videoFile, phrase, userFullName);
     console.log('Process Video Response:', response);
   
-    // The response headers or body may include a processVideoRequestId (for reuse).
-    const { requestId: processVideoRequestId } = response;
+    // Retrieve the processVideoRequestId from the *response headers* called x-request-id.
+  } catch (error) {
+    console.error('Error processing video:', error);
+  }
+  ```
+#### Additional
+- `processVideoRequestId`: After calling `sdk.processVideo()`, you typically receive a unique ID (`x-request-id`). You can pass this `processVideoRequestId` into subsequent calls (e.g., `faceMatch`) to reference the previously uploaded video frames.
+- `usePrefilledVideo`: When set to `true`, indicates that the SDK should reuse the video already on file from a previous `processVideo` call rather than requiring a new upload.
+### 5. Face match
+Use matchFaces to compare a reference image (e.g., a document or a captured selfie) with a face from a video:
+  ```javascript
+    /**
+   * matchFaces(
+   *   image: File,
+   *   video?: File,
+   *   userFullName?: string,
+   *   processVideoRequestId?: string,
+   *   usePrefilledVideo?: boolean,
+   *   requestUserProvidedId?: string
+   * ): Promise<FaceMatchResponse>
+   */
+  const faceFile = new File([/* face image bytes */], 'face.jpg', { type: 'image/jpeg' });
+  const videoFile = new File([/* file parts */], 'video.mp4', { type: 'video/mp4' });
+  const userFullName = 'John Doe';
+
+  const faceMatchResponse = await sdk.faceMatch(
+    faceFile,
+    videoFile,
+    userFullName
+  );
+  // OR
+  const faceMatchResponse = await sdk.faceMatch(
+    faceFile,              // The image containing the user's face (doc or selfie)
+    null,                  // No local video provided (we're reusing the old one)
+    'John Doe',
+    processVideoRequestId, // From the /process-video response headers
+    true                   // usePrefilledVideo
+  );
+  ```
+
+### 6. Sessions
+Session is a way to group transactions together. It is useful when you want to group transactions that are related to each other. For example, you can start a session and then use the session ID to link transactions within a unified group.
+  ```javascript
+  const sessionId = await sdk.startSession();
+
+  const videoFile = new File([/* file parts */], 'video.mp4', { type: 'video/mp4' });
+  const phrase = "one two three four five six";
+  const userFullName = 'John Doe';
+    
+  await sdk.giveAuthorizationConsent(true, userFullName, { sessionId });
+    
+  try {
+    const response = await sdk.processVideo(videoFile, phrase, userFullName, { sessionId });
+    console.log('Process Video Response:', response);
+    
+    // Retrieve the processVideoRequestId from the *response headers* called x-request-id.
   } catch (error) {
     console.error('Error processing video:', error);
   }
   ```
+
 ## Advanced Usage And Best Practices
 ### Typical FaceMatch Flow
-One common advanced scenario involves document authentication in onboarding face and face matching:
-1. Face Onboarding: Capture the user’s live face or the user uploads a picture of their identity document (front side with the face)
+One common advanced scenario involves document authentication in enrollment face and face matching:
+1. Face Enrollment: Capture the user’s live face or the user uploads a picture of their identity document (front side with the face)
 2. Process Video: Capture the user’s live face
 3. Face Match: Compare the extracted face from the document with the user’s live face to verify identity.
 
@@ -102,13 +171,13 @@ Below is a possible flow (method names in your SDK may vary slightly depending o
   // 1. Acquire user consent
   await sdk.giveConsent(true, userFullName);
   
-  // 2. Onboard or capture the user’s face
-  //    (Either using onboardFace or processVideo, depending on your user flow)
+  // 2. Enroll or capture the user’s face
+  //    (Either using enrollFace or processVideo, depending on your user flow)
   const userFaceFile = new File([/* user selfie bytes */], 'image.jpg', { type: 'image/jpeg' });
   const userVideoFile = new File([/* user selfie bytes */], 'video.mp4', { type: 'video/*' });
-  const onboardResponse = await sdk.onboardFace(userFaceFile, userFullName);
+  const enrollResponse = await sdk.enrollFace(userFaceFile, userFullName);
   
-  // 3. Face Match (Compare video face with user’s onboarded face)
+  // 3. Face Match (Compare video face with user’s enrolled face)
   const faceMatchResponse = await sdk.faceMatch(
     userFaceFile,
     userVideoFile,
@@ -123,27 +192,13 @@ Below is a possible flow (method names in your SDK may vary slightly depending o
   }
   ```
 
-### Use Cases with processVideoRequestId and usePrefilledVideo
-- `processVideoRequestId`: After calling `sdk.processVideo()`, you typically receive a unique ID (`x-request-id`). You can pass this `processVideoRequestId` into subsequent calls (e.g., `faceMatch`) to reference the previously uploaded video frames.
-- `usePrefilledVideo`: When set to `true`, indicates that the SDK should reuse the video already on file from a previous `processVideo` call rather than requiring a new upload.
-Example:
-  ```javascript
-  const { x-request-id } = await sdk.processVideo(videoFile, phrase, userFullName);
-  
-  // Later on, we can reuse that video for face match or advanced checks
-  const faceMatchResp = await sdk.faceMatch(null, null, userFullName, {
-    processVideoRequestId: requestId,
-    usePrefilledVideo: true
-  });
-  ```
-Here, `faceMatch` might not require new face data if it can extract frames from the previously uploaded video.
 ### Error Handling
 All SDK calls can throw errors for various reasons:
 - Network/Connection Issues
 - Invalid File Types
-- No Face Detected (Face Onboarding)
-- No Speech Detected (Voice Onboarding)
-- Multiple Faces Detected (Face Onboarding)
+- No Face Detected (Face Enrollment)
+- No Speech Detected (Voice Enrollment)
+- Multiple Faces Detected (Face Enrollment)
 - Liveness Check Failure (Process Video)
 
 Always wrap calls in try/catch and provide user-friendly messages or fallback logic.
@@ -166,9 +221,6 @@ Always wrap calls in try/catch and provide user-friendly messages or fallback lo
 In addition to direct SDK methods, the Biometry Web SDK offers reusable Web Components that handle user interactions (camera, video recording, error states) automatically.
 The Biometry Web SDK includes reusable, customizable web components for crucial features. These components are easy to embed into your application and handle the most common biometric operations with minimal setup.
 
-### Face Onboarding Component
-This component provides an intuitive interface for onboarding users with their cameras. It integrates directly with the `BiometrySDK backend`, managing camera capture, consent checks, and error handling.
-
 ### Integration
 **Option 1: Using npm (Recommended for full SDK usage)**
 1. Install the SDK package via **npm**:
@@ -180,26 +232,14 @@ This component provides an intuitive interface for onboarding users with their c
     // index.js
     import './node_modules/biometry-sdk/dist/biometry-sdk.esm.js';
     ```
-3. Connect the script to your **HTML file** and use the component:
-    ```html
-    <script type="module" src="./index.js"></script>
-    
-    <biometry-onboarding
-      api-key="your-api-key"
-      user-fullname="John Doe">
-    </biometry-onboarding>
-    ```
-    
 **Option 2: Using CDN (Quick Integration)**
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/biometry-sdk/dist/biometry-sdk.esm.js"></script>
-
-<biometry-onboarding
-  api-key="your-api-key"
-  user-fullname="John Doe">
-</biometry-onboarding>
 ```
 
+### Face Enrollment Component
+This component provides an intuitive interface for enrollment users with their cameras. It integrates directly with the `BiometrySDK backend`, managing camera capture, consent checks, and error handling.
+
 ### Usage
 **Required attributes:**
 - `api-key`: Your Biometry API key.
@@ -212,15 +252,15 @@ This component provides an intuitive interface for onboarding users with their c
 
 **Basic Usage**
 ```html
-<biometry-onboarding
+<biometry-enrollment
   api-key="your-api-key"
   user-fullname="John Doe">
-</biometry-onboarding>
+</biometry-enrollment>
 ```
 
 **Advanced Usage**
 ```html
-<biometry-onboarding
+<biometry-enrollment
   api-key="your-api-key"
   user-fullname="John Doe">
   
@@ -229,41 +269,17 @@ This component provides an intuitive interface for onboarding users with their c
   
   <!-- Custom Status Messages -->
   <div slot="loading">Please wait while we process your photo...</div>
-  <div slot="success">Congratulations! You have been onboarded.</div>
+  <div slot="success">Congratulations! You have been enrolled.</div>
   <div slot="error-no-face">No face detected. Make sure your face is visible.</div>
   <div slot="error-multiple-faces">Multiple faces detected. Please try again alone.</div>
   <div slot="error-not-centered">Align your face with the center of the screen.</div>
   <div slot="error-other">Oops! Something went wrong. Please try again.</div>
-</biometry-onboarding>
+</biometry-enrollment>
 ```
 
 ### Process Video Component
 The **Process Video** component enables you to record, upload, and process a video within your application. It integrates with Biometry's services to check liveness and authorize the user.
 
-### Integration
-**Option 1: Install via npm**
-1. To include the component in your project, install the biometry-sdk package:
-   ```bash
-    npm install biometry-sdk
-    ```
-2. After installation, import the component into your project:
-   ```javascript
-    // index.js
-    import './node_modules/biometry-sdk/dist/biometry-sdk.esm.js';
-    ```
-3. Include the component in your HTML:
-   You can skip the npm installation and include the component directly in your HTML:
-   ```html
-    <script type="module" src="./index.js"></script>
-    
-    <process-video ...></process-video>
-   ```
-**Option 2: Using CDN (Quick Integration)**
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/biometry-sdk/dist/biometry-sdk.esm.js"></script>
-
-<process-video ...></process-video>
-```
 ### Usage
 **Basic Usage**
 ```html
@@ -315,36 +331,47 @@ For more detailed information on Biometry’s API endpoints, parameters, and res
   ```bash
   npm install biometry-sdk
   ```
-- **Consent**: (Required before onboarding/processing)
+- **Consent**: (Required before enrollment/processing)
   ```javascript
   sdk.giveConsent(true, userFullName)
   ```
-- **Voice Onboarding**:
+- **Voice Enrollment**:
+  ```javascript
+  sdk.enrollVoice(file, userFullName)
+  ```
+- **Face Enrollment**:
   ```javascript
-  sdk.onbaordVoice(file, userFullName)
+  sdk.enrollFace(file, userFullName)
   ```
-- **Face Onboarding**:
+- **Face match (basic):**
   ```javascript
-  sdk.onboardFace(file, userFullName)
+  sdk.faceMatch(image, video, userFullName);
   ```
-- Face match
+- **Face match (advanced w/ reusing video or linking IDs):**
   ```javascript
-  sdk.faceMatch(image, video, userFullName, { ...options });
+  sdk.faceMatch(
+    image,                   // Reference image file that contains user's face.
+    video,                   // Video file that contains user's face.
+    userFullName,
+    processVideoRequestId,   // ID from the response header of /process-video endpoint.
+    usePrefilledVideo        // Pass true to use the video from the process-video endpoint.
+  );
   ```
-- Process Video (basic):
+- **Process Video (basic):**
   ```javascript
   sdk.processVideo(file, phrase, userFullName);
   ```
-- Process Video (advanced w/ reusing video or linking IDs):
+- **Process Video (advanced w/ reusing video or linking IDs):**
   ```javascript
-  sdk.processVideo(null, phrase, userFullName, {
-  usePrefilledVideo: true,
-  processVideoRequestId: 'YOUR_REQUEST_ID',
-  requestUserProvidedId: 'YOUR_CUSTOM_ID'
-  });
+  sdk.processVideo(
+    video, // Video file that you want to process
+    phrase,
+    userFullName,
+    requestUserProvidedId // An optional user-provided ID to link transactions within a unified group
+  );
   ```
-- UI Components:
-  - `<biometry-onboarding ...>` (face onboarding)
-  - `<process-video ...>` (video onboarding)
-With these **direct SDK methods**, **UI components**, and advanced **best practices** (faceOnboard + faceMatch flows, reuse of video, error handling), you can build robust, privacy-conscious biometric solutions on your web application.
-  
+- **UI Components:**
+  - `<biometry-enrollment ...>` (face enrollment)
+  - `<process-video ...>` (video enrollment)
+With these **direct SDK methods**, **UI components**, and advanced **best practices** (faceEnroll + faceMatch flows, reuse of video, error handling), you can build robust, privacy-conscious biometric solutions on your web application.
+  

package/dist/components/biometry-onboarding.d.ts

@@ -1,26 +1 @@
-export declare class BiometryOnboarding extends HTMLElement {
-    private readonly shadow;
-    private sdk;
-    private videoElement;
-    private canvasElement;
-    private captureButton;
-    private resultCode?;
-    private description?;
-    constructor();
-    static get observedAttributes(): string[];
-    get apiKey(): string | null;
-    set apiKey(value: string | null);
-    get userFullname(): string | null;
-    set userFullname(value: string | null);
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    validateAttributes(): void;
-    init(): void;
-    private cleanup;
-    private initializeSDK;
-    private toggleState;
-    private attachSlotListeners;
-    private setupCamera;
-    private capturePhoto;
-}
+export {};

package/dist/components/biometry-onboarding.js

@@ -0,0 +1,233 @@
+import { BiometrySDK } from "../sdk.js";
+import { BiometryAttributes, BiometryOnboardingState } from "../types.js";
+class BiometryOnboarding extends HTMLElement {
+    constructor() {
+        super();
+        this.videoElement = null;
+        this.canvasElement = null;
+        this.captureButton = null;
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.sdk = null;
+        this.toggleState = this.toggleState.bind(this);
+        this.capturePhoto = this.capturePhoto.bind(this);
+    }
+    static get observedAttributes() {
+        return Object.values(BiometryAttributes);
+    }
+    get apiKey() {
+        return this.getAttribute("api-key");
+    }
+    set apiKey(value) {
+        if (value) {
+            this.setAttribute("api-key", value);
+        }
+        else {
+            this.removeAttribute("api-key");
+        }
+    }
+    get userFullname() {
+        return this.getAttribute("user-fullname");
+    }
+    set userFullname(value) {
+        if (value) {
+            this.setAttribute("user-fullname", value);
+        }
+        else {
+            this.removeAttribute("user-fullname");
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "api-key" || name === "user-fullname") {
+            this.validateAttributes();
+        }
+    }
+    connectedCallback() {
+        this.validateAttributes();
+        this.init();
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    validateAttributes() {
+        if (!this.apiKey) {
+            console.error("API key is required.");
+            this.toggleState(BiometryOnboardingState.ErrorOther);
+            return;
+        }
+        if (!this.userFullname) {
+            console.error("User fullname is required.");
+            this.toggleState(BiometryOnboardingState.ErrorOther);
+            return;
+        }
+    }
+    init() {
+        this.shadow.innerHTML = `
+    <style>
+      .wrapper {
+        position: relative;
+      }
+      video {
+        transform: scaleX(-1); /* Flip video for preview */
+        max-width: 100%;
+        border-radius: var(--border-radius, 8px);
+      }
+      canvas {
+        display: none;
+      }
+    </style>
+    <div class="wrapper">
+      <slot name="video">
+        <video id="video" autoplay playsinline></video>
+      </slot>
+      <slot name="canvas">
+        <canvas id="canvas" style="display: none;"></canvas>
+      </slot>
+      <slot name="button">
+        <button id="button">Capture Photo</button>
+      </slot>
+      <div class="status">
+        <slot name="loading" class="loading"></slot>
+        <slot name="success" class="success"></slot>
+        <slot name="error-no-face" class="error-no-face"></slot>
+        <slot name="error-multiple-faces" class="error-multiple-faces"></slot>
+        <slot name="error-not-centered" class="error-not-centered"></slot>
+        <slot name="error-other" class="error-other"></slot>
+      </div>
+    </div>
+  `;
+        this.initializeSDK();
+        this.attachSlotListeners();
+        this.setupCamera();
+        this.toggleState("");
+    }
+    cleanup() {
+        var _a;
+        if ((_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.srcObject) {
+            const tracks = this.videoElement.srcObject.getTracks();
+            tracks.forEach((track) => track.stop());
+        }
+        if (this.videoElement) {
+            this.videoElement.srcObject = null;
+        }
+    }
+    initializeSDK() {
+        if (this.apiKey) {
+            this.sdk = new BiometrySDK(this.apiKey);
+        }
+        else {
+            this.toggleState(BiometryOnboardingState.ErrorOther);
+            console.error("API key is required to initialize the SDK.");
+        }
+    }
+    toggleState(state) {
+        const slots = [
+            BiometryOnboardingState.Loading,
+            BiometryOnboardingState.Success,
+            BiometryOnboardingState.ErrorNoFace,
+            BiometryOnboardingState.ErrorMultipleFaces,
+            BiometryOnboardingState.ErrorNotCentered,
+            BiometryOnboardingState.ErrorOther,
+        ];
+        slots.forEach((slotName) => {
+            const slot = this.shadow.querySelector(`slot[name="${slotName}"]`);
+            if (slot) {
+                slot.style.display = slotName === state ? "block" : "none";
+            }
+        });
+    }
+    attachSlotListeners() {
+        const videoSlot = this.shadow.querySelector('slot[name="video"]');
+        const canvasSlot = this.shadow.querySelector('slot[name="canvas"]');
+        const buttonSlot = this.shadow.querySelector('slot[name="button"]');
+        const assignedVideoElements = videoSlot.assignedElements();
+        this.videoElement = (assignedVideoElements.length > 0 ? assignedVideoElements[0] : null) || this.shadow.querySelector("#video");
+        const assignedCanvasElements = canvasSlot.assignedElements();
+        this.canvasElement = (assignedCanvasElements.length > 0 ? assignedCanvasElements[0] : null) || this.shadow.querySelector("#canvas");
+        const assignedButtonElements = buttonSlot.assignedElements();
+        this.captureButton = (assignedButtonElements.length > 0 ? assignedButtonElements[0] : null) || this.shadow.querySelector("#button");
+        if (!this.videoElement) {
+            console.error("Video element is missing.");
+            return;
+        }
+        if (!this.captureButton) {
+            console.error("Capture button is missing.");
+            return;
+        }
+        else {
+            this.captureButton.addEventListener("click", this.capturePhoto);
+        }
+    }
+    setupCamera() {
+        if (!this.videoElement) {
+            console.error("Video element is missing.");
+            return;
+        }
+        navigator.mediaDevices
+            .getUserMedia({ video: true })
+            .then((stream) => {
+            this.videoElement.srcObject = stream;
+        })
+            .catch((error) => {
+            console.error("Error accessing camera:", error);
+        });
+    }
+    async capturePhoto() {
+        try {
+            if (!this.videoElement || !this.canvasElement || !this.sdk) {
+                console.error("Essential elements or SDK are not initialized.");
+                return;
+            }
+            const context = this.canvasElement.getContext("2d");
+            this.canvasElement.width = this.videoElement.videoWidth;
+            this.canvasElement.height = this.videoElement.videoHeight;
+            context.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
+            this.toggleState("loading");
+            this.canvasElement.toBlob(async (blob) => {
+                try {
+                    if (!blob) {
+                        console.error("Failed to capture photo.");
+                        this.toggleState(BiometryOnboardingState.ErrorOther);
+                        return;
+                    }
+                    const file = new File([blob], "onboard-face.jpg", { type: "image/jpeg" });
+                    try {
+                        const response = await this.sdk.onboardFace(file, this.userFullname);
+                        const result = response.data.onboard_result;
+                        this.resultCode = result === null || result === void 0 ? void 0 : result.code;
+                        this.description = (result === null || result === void 0 ? void 0 : result.description) || "Unknown error occurred.";
+                        switch (this.resultCode) {
+                            case 0:
+                                this.toggleState(BiometryOnboardingState.Success);
+                                break;
+                            case 1:
+                                this.toggleState(BiometryOnboardingState.ErrorNoFace);
+                                break;
+                            case 2:
+                                this.toggleState(BiometryOnboardingState.ErrorMultipleFaces);
+                                break;
+                            case 3:
+                                this.toggleState(BiometryOnboardingState.ErrorNotCentered);
+                                break;
+                            default:
+                                this.toggleState(BiometryOnboardingState.ErrorOther);
+                        }
+                        console.log("Onboarding result:", result);
+                    }
+                    catch (error) {
+                        console.error("Error onboarding face:", error);
+                        this.toggleState(BiometryOnboardingState.ErrorOther);
+                    }
+                }
+                catch (error) {
+                    console.error("Error in toBlob callback:", error);
+                    this.toggleState(BiometryOnboardingState.ErrorOther);
+                }
+            }, "image/jpeg");
+        }
+        catch (error) {
+            console.error("Error capturing photo:", error);
+            this.toggleState(BiometryOnboardingState.ErrorOther);
+        }
+    }
+}
+customElements.define("biometry-onboarding", BiometryOnboarding);

package/dist/index.d.ts

@@ -1,4 +1,2 @@
 export * from './sdk';
 export * from './types';
-export { BiometryOnboarding } from './components/biometry-onboarding';
-export { ProcessVideoComponent } from './components/process-video';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './sdk';
+export * from './types';