biometry-sdk 1.1.0 → 1.2.1

package/README.md

@@ -1,4 +1,4 @@
-# biometry-web-sdk
+# biometry-sdk
 
 ## Overview
 The **Biometry Web SDK** is a software development kit (SDK) designed to facilitate the integration of Biometry's API services.
@@ -41,14 +41,35 @@ The **Biometry Web SDK** includes reusable and customizable web components for k
 ### 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.
 
-#### Usage
+### Integration
 Here's how to integrate the `Face Onboarding` component into your application:
 
-**Import in your html component:**
+**Option 1: Using npm (Recommended for full SDK usage)**
+1. Install the SDK package via **npm**:
+```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';
+```
+3. Connect the script to your **HTML file** and use the component:
+```html
+<script type="module" src="./index.js"></script>
+```
+
+
+**Option 2: Using CDN (Quick Integration)**
 ```html
-<script type="module" src="node_modules/biometry-sdk/dist/components/biometry-onboarding.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/biometry-sdk/dist/components/biometry-onboarding.js"></script>
 ```
 
+### Usage
+The `api-key` and `user-fullname` attributes are required for the component to function.
+
+Custom slots allow you to style and customize UI elements, loading, success, and error states.
+
 **Basic Usage**
 ```html
 <biometry-onboarding
@@ -77,6 +98,76 @@ Here's how to integrate the `Face Onboarding` component into your application:
 ```
 
 ### 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.
+
+### 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/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:
+```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
+  api-key="your-api-key"
+  user-fullname="Lionel Messi"
+></process-video>
+```
+
+**Advanced Usage**
+```html
+<process-video
+  api-key="eyJhb...apikey"
+  user-fullname="John Doe Uulu"
+>
+  <!-- Custom video element -->
+  <video slot="video" muted playsinline style="border-radius: 1rem;"></video>
+
+  <!-- Custom buttons -->
+  <button slot="record-button">Custom Record</button>
+  <button slot="stop-button">Custom Stop</button>
+  
+  <!-- Custom file input -->
+  <input slot="file-input" type="file" accept="video/*" />
+
+  <!-- Custom submit button -->
+  <button slot="submit-button">Custom Submit</button>
+
+  <!-- Custom messages -->
+  <div slot="loading">Processing...</div>
+  <div slot="error">An error occurred. Please try again.</div>
+  <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.
 
 ## License
 

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,452 @@
+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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "biometry-sdk",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -18,4 +18,4 @@
     "typescript": "^5.0.0"
   },
   "license": "MIT"
-}
+}