biometry-sdk 1.2.1 → 1.2.2

package/README.md

@@ -1,16 +1,25 @@
 # biometry-sdk
 
 ## Overview
-The **Biometry Web SDK** is a software development kit (SDK) designed to facilitate the integration of Biometry's API services.
+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.
+
 
 ## Features
-- **Consent management**: Ask a permission to store their biometric data for authentication using Biometry.
-- **Voice onboarding**: Onboard voice for Voice Recognition.
+- **Consent Management**:
+  - Ask a permission to store their biometric data for authentication using Biometry.
+  - Collect user permission to store their biometric data for authentication using Biometry.
+  - Important: You must obtain consent before performing any onboarding or video processing.
+- **Voice onboarding**:
+  - Enroll a user’s voice, creating a voice model for future authentication.
 - **Face onboarding**: Onboard face for face recognition.
-  - Includes a customizable **Face Onboarding UI Component** for streamlined user interactions.
-- **Face match**: Compares extracted image from user’s personal document with the frame from the `/process-video.`
-- **Process video**: Process the video through Biometry services to check liveness and authorize user.
-  - (UI Component for this feature coming soon)
+  - Onboard a user’s face for facial recognition.
+  - **Face Onboarding UI Component:** A ready-to-use, customizable component for capturing and processing face data.
+- **Face match**:
+  - Compares an extracted image from a user’s personal document to an image frame captured during onboarding or  `/process-video.`
+- **Process video**:
+  - Checks user liveness and authorizes users based on video input.
+  - **Process Video UI Component:** A ready-to-use, customizable component for capturing and processing video.
+
 
 ## Installation
 ```bash
@@ -33,31 +42,30 @@ console.log(response);
 
 ## Example
 
-You can find an example in the example/ directory. The example demonstrates how to integrate the SDK into a React app.
-
+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. 
 ## UI Components
-The **Biometry Web SDK** includes reusable and customizable web components for key features. These components make it simple to add biometric functionalities to your application.
+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
-The `Face Onboarding` component provides an intuitive interface for onboarding users with their camera. It integrates with the `BiometrySDK` to handle backend communication and error states.
+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
 Here's how to integrate the `Face Onboarding` component into your application:
 
 **Option 1: Using npm (Recommended for full SDK usage)**
 1. Install the SDK package via **npm**:
-```bash
-npm install biometry-sdk
-```
+    ```bash
+    npm install biometry-sdk
+    ```
 2. Import the component in your **index.js** or equivalent JavaScript file:
-```javascript
-// index.js
-import './node_modules/biometry-sdk/dist/components/biometry-onboarding.js';
-```
+    ```javascript
+    // index.js
+    import './node_modules/biometry-sdk/dist/components/biometry-onboarding.js';
+    ```
 3. Connect the script to your **HTML file** and use the component:
-```html
-<script type="module" src="./index.js"></script>
-```
+    ```html
+    <script type="module" src="./index.js"></script>
+    ```
 
 
 **Option 2: Using CDN (Quick Integration)**
@@ -66,9 +74,14 @@ import './node_modules/biometry-sdk/dist/components/biometry-onboarding.js';
 ```
 
 ### Usage
-The `api-key` and `user-fullname` attributes are required for the component to function.
+**Required attributes:**
+- `api-key`: Your Biometry API key.
+- `user-fullname`: The user’s full name (used in data storage and consent).
 
-Custom slots allow you to style and customize UI elements, loading, success, and error states.
+**Slots:**
+- `video`: Your custom <video> element.
+- `button`: Custom capture button.
+- `loading`, `success`, `error-no-face`, `error-multiple-faces`, `error-not-centered`, `error-other`: Custom UI messages for different states.
 
 **Basic Usage**
 ```html
@@ -98,38 +111,31 @@ Custom slots allow you to style and customize UI elements, loading, success, and
 ```
 
 ### Process Video Component
-The Process Video component allows developers to record, upload, and process video directly within their applications through Biometry services to check liveness and authorize user.
+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
-```
-
+   ```bash
+    npm install biometry-sdk
+    ```
 2. After installation, import the component into your project:
-```javascript
-// index.js
-import './node_modules/biometry-sdk/dist/components/process-video.js';
-```
-
+   ```javascript
+    // index.js
+    import './node_modules/biometry-sdk/dist/components/process-video.js'
+    ```
 3. Include the component in your HTML:
-```html
-<script type="module" src="./index.js"></script>
-<process-video ...></process-video>
-```
-
-**Option 2: Import directly via CDN**
-
-You can skip the npm installation and include the component directly 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/components/process-video.js"></script>
 <process-video ...></process-video>
 ```
-
 ### Usage
-
 **Basic Usage**
 ```html
 <process-video
@@ -163,16 +169,35 @@ You can skip the npm installation and include the component directly in your HTM
   <div slot="success">Video submitted successfully!</div>
 </process-video>
 ```
-
-**Notes**
-- By default, all elements are functional without customization. Replace slots only if customization is required.
-
-- To regenerate the video preview or handle custom actions, use JavaScript to interact with the provided slots or the component's public methods.
-
+**Note:**
+- All default elements and messages are functional out-of-the-box.
+- Replace slots if you want to customize the UI or functionality.
+- Call giveConsent() before using any biometric methods to ensure compliance with data processing requirements.
+
+## Best Practices
+1. **Always Acquire Consent**
+   - Before performing Face Onboarding or Process Video, you can call:
+     ```javascript
+      sdk.giveConsent(true, userFullName);
+     ```
+   - Or directly send a request to the `/consent` in the [official documentation](https://developer.biometrysolutions.com/overview/).
+   
+   This ensures legal compliance and user awareness when storing and processing biometric data.
+3. **Handle Errors Gracefully**
+   - The SDK methods throw errors if something goes wrong (e.g., network, permission, or detection errors). Use try/catch or .catch() to handle them.
+4. **Security**
+   - Protect your API key. Avoid exposing it in public repositories or client-side code if possible.
+   
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
 
 ## More Information
-
-For more detailed documentation on the Biometry API, visit the [official documentation](https://developer.biometrysolutions.com/overview/).
+For more detailed information on Biometry’s API endpoints, parameters, and responses, visit the official [Biometry API Documentation](https://developer.biometrysolutions.com/overview/). If you have questions or need help, please reach out to our support team or create a GitHub issue.
+
+## Quick Reference
+- Install: `npm install biometry-sdk`
+- Consent: `sdk.giveConsent(true, userFullName)` (Required before onboarding/processing)
+- Voice Onboarding: `sdk.enrollVoice(file, userFullName)`
+- Face Onboarding: `sdk.enrollFace(file, userFullName)`
+- Process Video: `sdk.processVideo(file, phrase, userFullName)`

package/dist/sdk.js

@@ -42,7 +42,7 @@ export class BiometrySDK {
             is_consent_given: isConsentGiven,
             user_fullname: userFullName,
         };
-        const response = await this.request('/consent', 'POST', body);
+        const response = await this.request('/api-consent/consent', 'POST', body);
         return {
             is_consent_given: response.is_consent_given,
             user_fullname: response.user_fullname,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "biometry-sdk",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

package/dist/components/process-video.d.ts

@@ -1,51 +0,0 @@
-export declare class ProcessVideoComponent extends HTMLElement {
-    private sdk;
-    private apiKey;
-    private phrase;
-    private previewStream;
-    private recordedChunks;
-    private mediaRecorder;
-    private videoFile;
-    private timerInterval;
-    private recordingTimeout;
-    private videoElement;
-    private fileInput;
-    private recordButton;
-    private stopButton;
-    private submitButton;
-    private errorState;
-    private timeLimit;
-    constructor();
-    private initializeSDK;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    private generateDefaultPhrase;
-    initializeUI(): void;
-    private attachSlotListeners;
-    private getSlotElement;
-    replaceSlotContent(slotName: string, content: string | HTMLElement): void;
-    removeSlotListener(slotName: string, event: string, callback: EventListener): void;
-    private toggleState;
-    private convertPhraseToWords;
-    private setupPreview;
-    private startTimer;
-    private stopTimer;
-    startRecording(): Promise<void>;
-    stopRecording(): void;
-    private handleFileUpload;
-    handleSubmit(): Promise<void>;
-    static get observedAttributes(): string[];
-    get userFullname(): string | null;
-    set userFullname(value: string | null);
-    get isRecording(): boolean;
-    get currentPhrase(): string;
-    get videoDuration(): number | null;
-    get currentFile(): File | null;
-    get currentStream(): MediaStream | null;
-    set sdkInstance(newSdk: any);
-    get videoElementRef(): HTMLVideoElement;
-    get fileInputRef(): HTMLInputElement;
-    get recordingTimeLimit(): number;
-    set recordingTimeLimit(value: number);
-}

package/dist/components/process-video.js

@@ -1,452 +0,0 @@
-import { BiometrySDK } from "../sdk.js";
-export class ProcessVideoComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.apiKey = null;
-        this.previewStream = null;
-        this.recordedChunks = [];
-        this.mediaRecorder = null;
-        this.videoFile = null;
-        this.timerInterval = null;
-        this.recordingTimeout = null;
-        this.errorState = null;
-        this.timeLimit = 30;
-        this.phrase = this.generateDefaultPhrase();
-        // Attach shadow DOM and initialize UI
-        this.attachShadow({ mode: 'open' });
-        this.apiKey = this.getAttribute('api-key');
-        this.initializeSDK();
-        this.initializeUI();
-    }
-    initializeSDK() {
-        if (this.apiKey) {
-            this.sdk = new BiometrySDK(this.apiKey);
-        }
-        else {
-            this.toggleState('error');
-            console.error('API key is required to initialize the SDK.');
-        }
-    }
-    connectedCallback() {
-        if (this.apiKey) {
-            this.initializeSDK();
-        }
-        else {
-            console.error('API key is required.');
-        }
-    }
-    disconnectedCallback() {
-        this.stopRecording();
-        if (this.previewStream) {
-            this.previewStream.getTracks().forEach(track => track.stop());
-        }
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'api-key' && newValue !== oldValue) {
-            this.apiKey = newValue;
-            this.initializeSDK();
-        }
-    }
-    generateDefaultPhrase() {
-        return Math.random().toString().slice(2, 10); // 8-digit random phrase
-    }
-    initializeUI() {
-        const phraseDisplay = this.phrase
-            .split("")
-            .map((digit) => `<span class="digit">${digit}</span>`)
-            .join(" ");
-        this.shadowRoot.innerHTML = `
-    <style>
-      :host {
-        display: block;
-        font-family: Arial, sans-serif;
-        --primary-color: #007bff;
-        --secondary-color: #6c757d;
-        --button-bg: var(--primary-color);
-        --button-text-color: #fff;
-        --input-border-color: var(--secondary-color);
-        --input-focus-border-color: var(--primary-color);
-        --spacing: 16px;
-        --button-padding: 10px 20px;
-        --border-radius: 4px;
-      }
-      
-      .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing);
-        padding: var(--spacing);
-        max-width: 500px;
-        margin: 0 auto;
-        text-align: center;
-      }
-
-      .video-wrapper {
-        position: relative;
-        display: inline-block;
-      }
-
-      #timer-overlay {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        padding: 5px 10px;
-        border-radius: 4px;
-        font-family: Arial, sans-serif;
-        font-size: 14px;
-      }
-
-      video {
-        max-width: 100%;
-        border-radius: var(--border-radius);
-      }
-
-      input[type="text"], input[type="file"] {
-        padding: var(--button-padding);
-        border: 1px solid var(--input-border-color);
-        border-radius: var(--border-radius);
-        width: 100%;
-        max-width: 100%;
-      }
-
-      input[type="text"]:focus, input[type="file"]:focus {
-        outline: none;
-        border-color: var(--input-focus-border-color);
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      .phrase-display {
-        font-size: 24px;
-        font-weight: bold;
-        display: flex;
-        gap: 8px;
-        justify-content: center;
-      }
-      .digit {
-        padding: 4px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        text-align: center;
-        width: 24px;
-      }
-
-    </style>
-    <div class="container">
-      <slot name="video">
-        <div class="video-wrapper">
-          <video id="video-preview" muted autoplay></video>
-          <div id="timer-overlay" class="hidden">00:00</div>
-        </div>
-      </slot>
-      <slot name="phrase-display">
-        <div class="phrase-display">
-          ${phraseDisplay}
-        </div>
-      </slot>
-      <slot name="record-button">
-        <button id="record-button">Start Recording</button>
-      </slot>
-      <slot name="stop-button">
-        <button id="stop-button" disabled>Stop Recording</button>
-      </slot>
-      <slot name="file-input">
-        <input type="file" accept="video/*" id="file-input" />
-      </slot>
-      <slot name="submit-button">
-        <button id="submit-button">Submit Video</button>
-      </slot>
-      <slot name="loading">
-        <div class="message">Loading...</div>
-      </slot>
-      <slot name="error">
-        <div class="message error">An error occurred</div>
-      </slot>
-      <slot name="success">
-        <div class="message success">Video submitted successfully!</div>
-      </slot>
-    </div>
-    `;
-        this.attachSlotListeners();
-        this.setupPreview();
-        this.toggleState(null);
-    }
-    attachSlotListeners() {
-        const videoSlot = this.shadowRoot.querySelector('slot[name="video"]');
-        const recordButtonSlot = this.shadowRoot.querySelector('slot[name="record-button"]');
-        const stopButtonSlot = this.shadowRoot.querySelector('slot[name="stop-button"]');
-        const fileInputSlot = this.shadowRoot.querySelector('slot[name="file-input"]');
-        const submitButtonSlot = this.shadowRoot.querySelector('slot[name="submit-button"]');
-        this.videoElement = this.getSlotElement(videoSlot, '#video-preview', HTMLVideoElement);
-        this.recordButton = this.getSlotElement(recordButtonSlot, '#record-button', HTMLButtonElement);
-        this.stopButton = this.getSlotElement(stopButtonSlot, '#stop-button', HTMLButtonElement);
-        this.fileInput = this.getSlotElement(fileInputSlot, '#file-input', HTMLInputElement);
-        this.submitButton = this.getSlotElement(submitButtonSlot, '#submit-button', HTMLButtonElement);
-        if (this.fileInput) {
-            this.fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
-        }
-        if (this.recordButton) {
-            this.recordButton.addEventListener("click", () => this.startRecording());
-        }
-        if (this.stopButton) {
-            this.stopButton.addEventListener("click", () => this.stopRecording());
-        }
-        if (this.submitButton) {
-            this.submitButton.addEventListener("click", () => this.handleSubmit());
-        }
-    }
-    getSlotElement(slot, fallbackSelector, elementType) {
-        const assignedElements = slot.assignedElements();
-        return (assignedElements.length > 0 ? assignedElements[0] : null) || this.shadowRoot.querySelector(fallbackSelector);
-    }
-    replaceSlotContent(slotName, content) {
-        const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
-        if (slot) {
-            if (typeof content === 'string') {
-                slot.innerHTML = content;
-            }
-            else if (content instanceof HTMLElement) {
-                slot.innerHTML = '';
-                slot.appendChild(content);
-            }
-        }
-    }
-    removeSlotListener(slotName, event, callback) {
-        const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
-        if (slot) {
-            const assignedNodes = slot.assignedElements();
-            assignedNodes.forEach((node) => {
-                node.removeEventListener(event, callback);
-            });
-        }
-    }
-    toggleState(state) {
-        const states = ['loading', 'success', 'error'];
-        states.forEach((slotName) => {
-            const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
-            if (slot) {
-                slot.style.display = slotName === state ? 'block' : 'none';
-            }
-        });
-    }
-    convertPhraseToWords(phrase) {
-        const digitWords = [
-            "zero", "one", "two", "three", "four",
-            "five", "six", "seven", "eight", "nine"
-        ];
-        return phrase
-            .split("")
-            .map((digit) => digitWords[parseInt(digit, 10)])
-            .join(" ");
-    }
-    async setupPreview() {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-            this.previewStream = stream;
-            this.videoElement.srcObject = stream;
-            this.videoElement.controls = false;
-            this.videoElement.play();
-        }
-        catch (error) {
-            this.toggleState('error');
-            console.error('Error setting up video preview:', error);
-        }
-    }
-    async startTimer() {
-        const timerOverlay = this.shadowRoot.querySelector('#timer-overlay');
-        timerOverlay.textContent = '00:00';
-        timerOverlay.classList.remove('hidden');
-        let seconds = 0;
-        this.timerInterval = setInterval(() => {
-            seconds++;
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = seconds % 60;
-            timerOverlay.textContent = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
-        }, 1000);
-        this.recordingTimeout = setTimeout(() => {
-            this.stopRecording();
-        }, this.timeLimit * 1000);
-    }
-    async stopTimer() {
-        if (this.recordingTimeout) {
-            clearTimeout(this.recordingTimeout);
-        }
-        if (this.timerInterval) {
-            clearInterval(this.timerInterval);
-            this.timerInterval = null;
-        }
-        const timerOverlay = this.shadowRoot.querySelector('#timer-overlay');
-        timerOverlay.classList.add('hidden');
-    }
-    async startRecording() {
-        if (!window.MediaRecorder) {
-            console.error('MediaRecorder API is not supported in this browser');
-            return;
-        }
-        try {
-            if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-                console.log('Recording already in progress.');
-                return;
-            }
-            if (!this.previewStream) {
-                console.log('Initializing preview stream...');
-                this.previewStream = await navigator.mediaDevices.getUserMedia({
-                    video: true,
-                    audio: true,
-                });
-            }
-            this.videoElement.muted = true;
-            this.videoElement.srcObject = this.previewStream;
-            this.videoElement.currentTime = 0;
-            await this.videoElement.play();
-            this.mediaRecorder = new MediaRecorder(this.previewStream);
-            this.recordedChunks = [];
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    this.recordedChunks.push(event.data);
-                }
-            };
-            this.mediaRecorder.onstop = () => {
-                const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
-                const videoURL = URL.createObjectURL(blob);
-                this.videoFile = new File([blob], 'recorded_video.webm', { type: 'video/webm' });
-                this.videoElement.src = videoURL;
-                this.videoElement.controls = true;
-                this.videoElement.play();
-                this.videoElement.muted = false;
-                this.stopTimer();
-            };
-            this.mediaRecorder.start();
-            this.startTimer();
-            this.recordButton.disabled = true;
-            this.stopButton.disabled = false;
-            this.videoElement.controls = false;
-        }
-        catch (error) {
-            console.error('Error starting video recording:', error);
-        }
-    }
-    stopRecording() {
-        try {
-            if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') {
-                console.log('No recording in progress.');
-                return;
-            }
-            this.mediaRecorder.stop();
-            if (this.previewStream) {
-                this.previewStream.getTracks().forEach(track => track.stop());
-            }
-            this.videoElement.srcObject = null;
-            this.videoElement.src = '';
-            this.videoElement.controls = false;
-            this.recordButton.disabled = false;
-            this.stopButton.disabled = true;
-            this.mediaRecorder = null;
-            this.recordedChunks = [];
-            this.previewStream = null;
-        }
-        catch (error) {
-            console.error('Error stopping video recording:', error);
-        }
-    }
-    handleFileUpload(event) {
-        var _a, _b;
-        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if ((_b = file === null || file === void 0 ? void 0 : file.type) === null || _b === void 0 ? void 0 : _b.startsWith('video/')) {
-            if (file.size > 100 * 1024 * 1024) { // 100MB limit
-                this.toggleState('error');
-                console.error('File size exceeds limit of 100MB');
-                return;
-            }
-            this.videoFile = file;
-            this.videoElement.src = URL.createObjectURL(file);
-            this.videoElement.play();
-        }
-        else {
-            this.toggleState('error');
-            console.error('Please select a valid video file.');
-        }
-    }
-    async handleSubmit() {
-        if (!this.videoFile) {
-            this.toggleState('error');
-            console.error('No video file to submit.');
-            return;
-        }
-        if (!this.apiKey || !this.userFullname) {
-            this.toggleState('error');
-            console.error('API key and user fullname must be provided.');
-            return;
-        }
-        this.toggleState('loading');
-        try {
-            const phraseInWords = this.convertPhraseToWords(this.phrase);
-            const result = await this.sdk.processVideo(this.videoFile, phraseInWords, this.userFullname);
-            console.log('Response from processVideo:', result);
-            this.toggleState('success');
-        }
-        catch (error) {
-            this.toggleState('error');
-            console.error('Error submitting video:', error);
-        }
-    }
-    static get observedAttributes() {
-        return ['api-key', 'user-fullname'];
-    }
-    get userFullname() {
-        return this.getAttribute('user-fullname');
-    }
-    set userFullname(value) {
-        if (value) {
-            this.setAttribute('user-fullname', value);
-        }
-        else {
-            this.removeAttribute('user-fullname');
-        }
-    }
-    get isRecording() {
-        var _a;
-        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording';
-    }
-    get currentPhrase() {
-        return this.phrase;
-    }
-    get videoDuration() {
-        var _a;
-        return ((_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.duration) || null;
-    }
-    get currentFile() {
-        return this.videoFile;
-    }
-    get currentStream() {
-        return this.previewStream;
-    }
-    set sdkInstance(newSdk) {
-        this.sdk = newSdk;
-    }
-    get videoElementRef() {
-        return this.videoElement;
-    }
-    get fileInputRef() {
-        return this.fileInput;
-    }
-    get recordingTimeLimit() {
-        return this.timeLimit;
-    }
-    set recordingTimeLimit(value) {
-        this.timeLimit = value;
-        if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
-            if (this.recordingTimeout) {
-                clearTimeout(this.recordingTimeout);
-            }
-            this.recordingTimeout = setTimeout(() => this.stopRecording(), this.timeLimit * 1000);
-        }
-    }
-}
-customElements.define('process-video', ProcessVideoComponent);