biometry-sdk 1.3.0 → 1.3.2

package/dist/biometry-sdk.esm.js

@@ -0,0 +1,1532 @@
+class BiometrySDK {
+    constructor(apiKey) {
+        if (!apiKey) {
+            throw new Error('API Key is required to initialize the SDK.');
+        }
+        this.apiKey = apiKey;
+    }
+    async request(path, method, body, headers) {
+        const defaultHeaders = {
+            Authorization: `Bearer ${this.apiKey}`,
+        };
+        const requestHeaders = Object.assign(Object.assign({}, defaultHeaders), headers);
+        if (body && !(body instanceof FormData)) {
+            requestHeaders['Content-Type'] = 'application/json';
+            body = JSON.stringify(body);
+        }
+        const response = await fetch(`${BiometrySDK.BASE_URL}${path}`, {
+            method,
+            headers: requestHeaders,
+            body,
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            const errorMessage = (errorData === null || errorData === undefined ? undefined : errorData.error) || (errorData === null || errorData === undefined ? undefined : errorData.message) || 'Unknown error occurred';
+            throw new Error(`Error ${response.status}: ${errorMessage}`);
+        }
+        // Extract response headers
+        const responseHeaders = {};
+        const requestId = response.headers.get("X-Request-Id");
+        if (requestId) {
+            responseHeaders["X-Request-Id"] = requestId;
+        }
+        const responseBody = await response.json();
+        return {
+            body: responseBody,
+            headers: responseHeaders
+        };
+    }
+    /**
+     * Starts a new Session for a user.
+     *
+     * @returns {Promise<ApiResponse<SessionResponse>>} A promise resolving to the session ID.
+     * @throws {Error} - If the request fails.
+     */
+    async startSession() {
+        return await this.request('/api-gateway/sessions/start', 'POST');
+    }
+    /**
+     * Submits Authorization consent for a user.
+     * Authorization Consent is required to use the services like Face and Voice recognition.
+     *
+     * @param {boolean} isConsentGiven - Indicates whether the user has given consent.
+     * @param {string} userFullName - The full name of the user giving consent.
+     * @param {Object} [props] - Optional properties for the consent request.
+     * @param {string} [props.sessionId] - Session ID to link this consent with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<ApiResponse<ConsentResponse>>} A promise resolving to the consent response.
+     * @throws {Error} - If the user's full name is not provided or if the request fails.
+     */
+    async giveAuthorizationConsent(isConsentGiven, userFullName, props) {
+        if (!userFullName) {
+            throw new Error('User Full Name is required to give consent.');
+        }
+        const body = {
+            is_consent_given: isConsentGiven,
+            user_fullname: userFullName,
+        };
+        const headers = {};
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-consent/consent', 'POST', body, headers);
+    }
+    /**
+     * Submits Storage consent for a user.
+     * Storage consent is granted by users, allowing us to store their biometric data for future verification.
+     *
+     * @param {boolean} isStorageConsentGiven - Indicates whether the user has given storage consent.
+     * @param {string} userFullName - The full name of the user giving storage consent.
+     * @param {Object} [props] - Optional properties for the consent request.
+     * @param {string} [props.sessionId] - Session ID to link this consent with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<ApiResponse<ConsentResponse>>} A promise resolving to the consent response.
+     * @throws {Error} - If the user's full name is not provided or if the request fails.
+     */
+    async giveStorageConsent(isStorageConsentGiven, userFullName, props) {
+        if (!userFullName) {
+            throw new Error('User Full Name is required to give storage consent.');
+        }
+        const body = {
+            is_consent_given: isStorageConsentGiven,
+            user_fullname: userFullName,
+        };
+        const headers = {};
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-consent/strg-consent', 'POST', body, headers);
+    }
+    /**
+     * Enrolls a user's voice for biometric authentication.
+     *
+     * @param {File} audio - The audio file containing the user's voice.
+     * @param {string} userFullName - The full name of the user being enrolled.
+     * @param {string} uniqueId - A unique identifier for the enrolling process.
+     * @param {string} phrase - The phrase spoken in the audio file.
+     * @param {Object} [props] - Optional properties for the enrollment request.
+     * @param {string} [props.sessionId] - Session ID to link this enrollment with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<ApiResponse<VoiceEnrollmentResponse>>} - A promise resolving to the voice enrolling response.
+     * @throws {Error} - If required parameters are missing or the request fails.
+     */
+    async enrollVoice(audio, userFullName, uniqueId, phrase, props) {
+        if (!userFullName)
+            throw new Error('User fullname is required.');
+        if (!uniqueId)
+            throw new Error('Unique ID is required.');
+        if (!phrase)
+            throw new Error('Phrase is required.');
+        if (!audio)
+            throw new Error('Audio file is required.');
+        const formData = new FormData();
+        formData.append('unique_id', uniqueId);
+        formData.append('phrase', phrase);
+        formData.append('voice', audio);
+        const headers = {
+            'X-User-Fullname': userFullName,
+        };
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-gateway/enroll/voice', 'POST', formData, headers);
+    }
+    /**
+     * Enrolls a user's face for biometric authentication.
+     *
+     * @param {File} face - Image file that contains user's face.
+     * @param {string} userFullName - The full name of the user being enrolled.
+     * @param {string} isDocument - Indicates whether the image is a document.
+     * @param {Object} [props] - Optional properties for the enrollment request.
+     * @param {string} [props.sessionId] - Session ID to link this enrollment with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<ApiResponse<FaceEnrollmentResponse>>} - A promise resolving to the voice enrolling response.
+     * @throws {Error} - If required parameters are missing or the request fails.
+     */
+    async enrollFace(face, userFullName, isDocument, props) {
+        if (!userFullName)
+            throw new Error('User fullname is required.');
+        if (!face)
+            throw new Error('Face image is required.');
+        const formData = new FormData();
+        formData.append('face', face);
+        if (isDocument) {
+            formData.append('is_document', 'true');
+        }
+        const headers = {
+            'X-User-Fullname': userFullName,
+        };
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-gateway/enroll/face', 'POST', formData, headers);
+    }
+    /**
+     * Check the validity of a documents.
+     *
+     * @param {File} document - Document image file.
+     * @param {string} userFullName - The full name of the user being checked.
+     * @param {Object} [props] - Optional properties for the enrollment request.
+     * @param {string} [props.sessionId] - Session ID to link this enrollment with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<ApiResponse<DocAuthInfo>>} - A promise resolving to the document authentication information.
+     */
+    async checkDocAuth(document, userFullName, props) {
+        if (!document)
+            throw new Error('Document image is required.');
+        if (!userFullName)
+            throw new Error('User fullname is required.');
+        const formData = new FormData();
+        formData.append('document', document);
+        const headers = {
+            'X-User-Fullname': userFullName,
+        };
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-gateway/check-doc-auth', 'POST', formData, headers);
+    }
+    /**
+     * Matches a user's face from video against a reference image.
+     *
+     * @param {File} image - Reference image file that contains user's face.
+     * @param {string} video - Video file that contains user's face.
+     * @param {string} userFullName - Pass the full name of end-user to process Voice and Face recognition services.
+     * @param {string} processVideoRequestId - ID from the response header of /process-video endpoint.
+     * @param {boolean} usePrefilledVideo - Pass true to use the video from the process-video endpoint.
+     * @param {Object} [props] - Optional properties for the enrollment request.
+     * @param {string} [props.sessionId] - Session ID to link this enrollment with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<FaceMatchResponse>} - A promise resolving to the voice enrolling response.
+     * @throws {Error} - If required parameters are missing or the request fails.
+     */
+    async matchFaces(image, video, userFullName, processVideoRequestId, usePrefilledVideo, props) {
+        if (!image)
+            throw new Error('Face image is required.');
+        if ((!processVideoRequestId && !usePrefilledVideo) && !video)
+            throw new Error('Video is required.');
+        const formData = new FormData();
+        if (video) {
+            formData.append('video', video);
+        }
+        formData.append('image', image);
+        const headers = {};
+        if (userFullName) {
+            headers['X-User-Fullname'] = userFullName;
+        }
+        if (processVideoRequestId) {
+            headers['X-Request-Id'] = processVideoRequestId;
+        }
+        if (processVideoRequestId && usePrefilledVideo) {
+            headers['X-Use-Prefilled-Video'] = 'true';
+        }
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-gateway/match-faces', 'POST', formData, headers);
+    }
+    /**
+     * Process the video through Biometry services to check liveness and authorize user
+     *
+     * @param {File} video - Video file that you want to process.
+     * @param {string} phrase - Set of numbers that user needs to say out loud in the video.
+     * @param {string} userFullName - Pass the full name of end-user to process Voice and Face recognition services.
+     * @param {Object} [props] - Optional properties for the enrollment request.
+     * @param {string} [props.sessionId] - Session ID to link this enrollment with a specific session group.
+     * @param {object} [props.deviceInfo] - Device information object containing details about the user's device.
+     *                                      This can include properties like operating system, browser, etc.
+     * @returns {Promise<ApiResponse<ProcessVideoResponse>>} - A promise resolving to the process video response.
+     */
+    async processVideo(video, phrase, userFullName, props) {
+        if (!video)
+            throw new Error('Video is required.');
+        if (!phrase)
+            throw new Error('Phrase is required.');
+        const formData = new FormData();
+        formData.append('phrase', phrase);
+        formData.append('video', video);
+        const headers = {};
+        if (userFullName) {
+            headers['X-User-Fullname'] = userFullName;
+        }
+        if (props === null || props === undefined ? undefined : props.sessionId) {
+            headers['X-Session-ID'] = props.sessionId;
+        }
+        if (props === null || props === undefined ? undefined : props.deviceInfo) {
+            headers['X-Device-Info'] = JSON.stringify(props.deviceInfo);
+        }
+        return await this.request('/api-gateway/process-video', 'POST', formData, headers);
+    }
+}
+BiometrySDK.BASE_URL = 'https://api.biometrysolutions.com'; //'https://dev-console.biometrysolutions.com';
+
+var BiometryAttributes;
+(function (BiometryAttributes) {
+    BiometryAttributes["ApiKey"] = "api-key";
+    BiometryAttributes["UserFullname"] = "user-fullname";
+})(BiometryAttributes || (BiometryAttributes = {}));
+var BiometryEnrollmentState;
+(function (BiometryEnrollmentState) {
+    BiometryEnrollmentState["Loading"] = "loading";
+    BiometryEnrollmentState["Success"] = "success";
+    BiometryEnrollmentState["ErrorNoFace"] = "error-no-face";
+    BiometryEnrollmentState["ErrorMultipleFaces"] = "error-multiple-faces";
+    BiometryEnrollmentState["ErrorNotCentered"] = "error-not-centered";
+    BiometryEnrollmentState["ErrorOther"] = "error-other";
+})(BiometryEnrollmentState || (BiometryEnrollmentState = {}));
+
+class BiometryEnrollment 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(BiometryEnrollmentState.ErrorOther);
+            return;
+        }
+        if (!this.userFullname) {
+            console.error("User fullname is required.");
+            this.toggleState(BiometryEnrollmentState.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 === undefined ? undefined : _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(BiometryEnrollmentState.ErrorOther);
+            console.error("API key is required to initialize the SDK.");
+        }
+    }
+    toggleState(state) {
+        const slots = [
+            BiometryEnrollmentState.Loading,
+            BiometryEnrollmentState.Success,
+            BiometryEnrollmentState.ErrorNoFace,
+            BiometryEnrollmentState.ErrorMultipleFaces,
+            BiometryEnrollmentState.ErrorNotCentered,
+            BiometryEnrollmentState.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(BiometryEnrollmentState.ErrorOther);
+                        return;
+                    }
+                    const file = new File([blob], "onboard-face.jpg", { type: "image/jpeg" });
+                    try {
+                        const response = await this.sdk.enrollFace(file, this.userFullname);
+                        const result = response.body.data.enroll_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(BiometryEnrollmentState.Success);
+                                break;
+                            case 1:
+                                this.toggleState(BiometryEnrollmentState.ErrorNoFace);
+                                break;
+                            case 2:
+                                this.toggleState(BiometryEnrollmentState.ErrorMultipleFaces);
+                                break;
+                            case 3:
+                                this.toggleState(BiometryEnrollmentState.ErrorNotCentered);
+                                break;
+                            default:
+                                this.toggleState(BiometryEnrollmentState.ErrorOther);
+                        }
+                        console.log("Enrollment result:", result);
+                    }
+                    catch (error) {
+                        console.error("Error enrolling face:", error);
+                        this.toggleState(BiometryEnrollmentState.ErrorOther);
+                    }
+                }
+                catch (error) {
+                    console.error("Error in toBlob callback:", error);
+                    this.toggleState(BiometryEnrollmentState.ErrorOther);
+                }
+            }, "image/jpeg");
+        }
+        catch (error) {
+            console.error("Error capturing photo:", error);
+            this.toggleState(BiometryEnrollmentState.ErrorOther);
+        }
+    }
+}
+customElements.define("biometry-enrollment", BiometryEnrollment);
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var fixWebmDuration = {exports: {}};
+
+var hasRequiredFixWebmDuration;
+
+function requireFixWebmDuration () {
+	if (hasRequiredFixWebmDuration) return fixWebmDuration.exports;
+	hasRequiredFixWebmDuration = 1;
+	(function (module) {
+		(function (name, definition) {
+		    if (module.exports) { // CommonJS / Node.js
+		        module.exports = definition();
+		    } else { // Direct include
+		        window.ysFixWebmDuration = definition();
+		    }
+		})('fix-webm-duration', function () {
+		    /*
+		     * This is the list of possible WEBM file sections by their IDs.
+		     * Possible types: Container, Binary, Uint, Int, String, Float, Date
+		     */
+		    var sections = {
+		        0xa45dfa3: { name: 'EBML', type: 'Container' },
+		        0x286: { name: 'EBMLVersion', type: 'Uint' },
+		        0x2f7: { name: 'EBMLReadVersion', type: 'Uint' },
+		        0x2f2: { name: 'EBMLMaxIDLength', type: 'Uint' },
+		        0x2f3: { name: 'EBMLMaxSizeLength', type: 'Uint' },
+		        0x282: { name: 'DocType', type: 'String' },
+		        0x287: { name: 'DocTypeVersion', type: 'Uint' },
+		        0x285: { name: 'DocTypeReadVersion', type: 'Uint' },
+		        0x6c: { name: 'Void', type: 'Binary' },
+		        0x3f: { name: 'CRC-32', type: 'Binary' },
+		        0xb538667: { name: 'SignatureSlot', type: 'Container' },
+		        0x3e8a: { name: 'SignatureAlgo', type: 'Uint' },
+		        0x3e9a: { name: 'SignatureHash', type: 'Uint' },
+		        0x3ea5: { name: 'SignaturePublicKey', type: 'Binary' },
+		        0x3eb5: { name: 'Signature', type: 'Binary' },
+		        0x3e5b: { name: 'SignatureElements', type: 'Container' },
+		        0x3e7b: { name: 'SignatureElementList', type: 'Container' },
+		        0x2532: { name: 'SignedElement', type: 'Binary' },
+		        0x8538067: { name: 'Segment', type: 'Container' },
+		        0x14d9b74: { name: 'SeekHead', type: 'Container' },
+		        0xdbb: { name: 'Seek', type: 'Container' },
+		        0x13ab: { name: 'SeekID', type: 'Binary' },
+		        0x13ac: { name: 'SeekPosition', type: 'Uint' },
+		        0x549a966: { name: 'Info', type: 'Container' },
+		        0x33a4: { name: 'SegmentUID', type: 'Binary' },
+		        0x3384: { name: 'SegmentFilename', type: 'String' },
+		        0x1cb923: { name: 'PrevUID', type: 'Binary' },
+		        0x1c83ab: { name: 'PrevFilename', type: 'String' },
+		        0x1eb923: { name: 'NextUID', type: 'Binary' },
+		        0x1e83bb: { name: 'NextFilename', type: 'String' },
+		        0x444: { name: 'SegmentFamily', type: 'Binary' },
+		        0x2924: { name: 'ChapterTranslate', type: 'Container' },
+		        0x29fc: { name: 'ChapterTranslateEditionUID', type: 'Uint' },
+		        0x29bf: { name: 'ChapterTranslateCodec', type: 'Uint' },
+		        0x29a5: { name: 'ChapterTranslateID', type: 'Binary' },
+		        0xad7b1: { name: 'TimecodeScale', type: 'Uint' },
+		        0x489: { name: 'Duration', type: 'Float' },
+		        0x461: { name: 'DateUTC', type: 'Date' },
+		        0x3ba9: { name: 'Title', type: 'String' },
+		        0xd80: { name: 'MuxingApp', type: 'String' },
+		        0x1741: { name: 'WritingApp', type: 'String' },
+		        // 0xf43b675: { name: 'Cluster', type: 'Container' },
+		        0x67: { name: 'Timecode', type: 'Uint' },
+		        0x1854: { name: 'SilentTracks', type: 'Container' },
+		        0x18d7: { name: 'SilentTrackNumber', type: 'Uint' },
+		        0x27: { name: 'Position', type: 'Uint' },
+		        0x2b: { name: 'PrevSize', type: 'Uint' },
+		        0x23: { name: 'SimpleBlock', type: 'Binary' },
+		        0x20: { name: 'BlockGroup', type: 'Container' },
+		        0x21: { name: 'Block', type: 'Binary' },
+		        0x22: { name: 'BlockVirtual', type: 'Binary' },
+		        0x35a1: { name: 'BlockAdditions', type: 'Container' },
+		        0x26: { name: 'BlockMore', type: 'Container' },
+		        0x6e: { name: 'BlockAddID', type: 'Uint' },
+		        0x25: { name: 'BlockAdditional', type: 'Binary' },
+		        0x1b: { name: 'BlockDuration', type: 'Uint' },
+		        0x7a: { name: 'ReferencePriority', type: 'Uint' },
+		        0x7b: { name: 'ReferenceBlock', type: 'Int' },
+		        0x7d: { name: 'ReferenceVirtual', type: 'Int' },
+		        0x24: { name: 'CodecState', type: 'Binary' },
+		        0x35a2: { name: 'DiscardPadding', type: 'Int' },
+		        0xe: { name: 'Slices', type: 'Container' },
+		        0x68: { name: 'TimeSlice', type: 'Container' },
+		        0x4c: { name: 'LaceNumber', type: 'Uint' },
+		        0x4d: { name: 'FrameNumber', type: 'Uint' },
+		        0x4b: { name: 'BlockAdditionID', type: 'Uint' },
+		        0x4e: { name: 'Delay', type: 'Uint' },
+		        0x4f: { name: 'SliceDuration', type: 'Uint' },
+		        0x48: { name: 'ReferenceFrame', type: 'Container' },
+		        0x49: { name: 'ReferenceOffset', type: 'Uint' },
+		        0x4a: { name: 'ReferenceTimeCode', type: 'Uint' },
+		        0x2f: { name: 'EncryptedBlock', type: 'Binary' },
+		        0x654ae6b: { name: 'Tracks', type: 'Container' },
+		        0x2e: { name: 'TrackEntry', type: 'Container' },
+		        0x57: { name: 'TrackNumber', type: 'Uint' },
+		        0x33c5: { name: 'TrackUID', type: 'Uint' },
+		        0x3: { name: 'TrackType', type: 'Uint' },
+		        0x39: { name: 'FlagEnabled', type: 'Uint' },
+		        0x8: { name: 'FlagDefault', type: 'Uint' },
+		        0x15aa: { name: 'FlagForced', type: 'Uint' },
+		        0x1c: { name: 'FlagLacing', type: 'Uint' },
+		        0x2de7: { name: 'MinCache', type: 'Uint' },
+		        0x2df8: { name: 'MaxCache', type: 'Uint' },
+		        0x3e383: { name: 'DefaultDuration', type: 'Uint' },
+		        0x34e7a: { name: 'DefaultDecodedFieldDuration', type: 'Uint' },
+		        0x3314f: { name: 'TrackTimecodeScale', type: 'Float' },
+		        0x137f: { name: 'TrackOffset', type: 'Int' },
+		        0x15ee: { name: 'MaxBlockAdditionID', type: 'Uint' },
+		        0x136e: { name: 'Name', type: 'String' },
+		        0x2b59c: { name: 'Language', type: 'String' },
+		        0x6: { name: 'CodecID', type: 'String' },
+		        0x23a2: { name: 'CodecPrivate', type: 'Binary' },
+		        0x58688: { name: 'CodecName', type: 'String' },
+		        0x3446: { name: 'AttachmentLink', type: 'Uint' },
+		        0x1a9697: { name: 'CodecSettings', type: 'String' },
+		        0x1b4040: { name: 'CodecInfoURL', type: 'String' },
+		        0x6b240: { name: 'CodecDownloadURL', type: 'String' },
+		        0x2a: { name: 'CodecDecodeAll', type: 'Uint' },
+		        0x2fab: { name: 'TrackOverlay', type: 'Uint' },
+		        0x16aa: { name: 'CodecDelay', type: 'Uint' },
+		        0x16bb: { name: 'SeekPreRoll', type: 'Uint' },
+		        0x2624: { name: 'TrackTranslate', type: 'Container' },
+		        0x26fc: { name: 'TrackTranslateEditionUID', type: 'Uint' },
+		        0x26bf: { name: 'TrackTranslateCodec', type: 'Uint' },
+		        0x26a5: { name: 'TrackTranslateTrackID', type: 'Binary' },
+		        0x60: { name: 'Video', type: 'Container' },
+		        0x1a: { name: 'FlagInterlaced', type: 'Uint' },
+		        0x13b8: { name: 'StereoMode', type: 'Uint' },
+		        0x13c0: { name: 'AlphaMode', type: 'Uint' },
+		        0x13b9: { name: 'OldStereoMode', type: 'Uint' },
+		        0x30: { name: 'PixelWidth', type: 'Uint' },
+		        0x3a: { name: 'PixelHeight', type: 'Uint' },
+		        0x14aa: { name: 'PixelCropBottom', type: 'Uint' },
+		        0x14bb: { name: 'PixelCropTop', type: 'Uint' },
+		        0x14cc: { name: 'PixelCropLeft', type: 'Uint' },
+		        0x14dd: { name: 'PixelCropRight', type: 'Uint' },
+		        0x14b0: { name: 'DisplayWidth', type: 'Uint' },
+		        0x14ba: { name: 'DisplayHeight', type: 'Uint' },
+		        0x14b2: { name: 'DisplayUnit', type: 'Uint' },
+		        0x14b3: { name: 'AspectRatioType', type: 'Uint' },
+		        0xeb524: { name: 'ColourSpace', type: 'Binary' },
+		        0xfb523: { name: 'GammaValue', type: 'Float' },
+		        0x383e3: { name: 'FrameRate', type: 'Float' },
+		        0x61: { name: 'Audio', type: 'Container' },
+		        0x35: { name: 'SamplingFrequency', type: 'Float' },
+		        0x38b5: { name: 'OutputSamplingFrequency', type: 'Float' },
+		        0x1f: { name: 'Channels', type: 'Uint' },
+		        0x3d7b: { name: 'ChannelPositions', type: 'Binary' },
+		        0x2264: { name: 'BitDepth', type: 'Uint' },
+		        0x62: { name: 'TrackOperation', type: 'Container' },
+		        0x63: { name: 'TrackCombinePlanes', type: 'Container' },
+		        0x64: { name: 'TrackPlane', type: 'Container' },
+		        0x65: { name: 'TrackPlaneUID', type: 'Uint' },
+		        0x66: { name: 'TrackPlaneType', type: 'Uint' },
+		        0x69: { name: 'TrackJoinBlocks', type: 'Container' },
+		        0x6d: { name: 'TrackJoinUID', type: 'Uint' },
+		        0x40: { name: 'TrickTrackUID', type: 'Uint' },
+		        0x41: { name: 'TrickTrackSegmentUID', type: 'Binary' },
+		        0x46: { name: 'TrickTrackFlag', type: 'Uint' },
+		        0x47: { name: 'TrickMasterTrackUID', type: 'Uint' },
+		        0x44: { name: 'TrickMasterTrackSegmentUID', type: 'Binary' },
+		        0x2d80: { name: 'ContentEncodings', type: 'Container' },
+		        0x2240: { name: 'ContentEncoding', type: 'Container' },
+		        0x1031: { name: 'ContentEncodingOrder', type: 'Uint' },
+		        0x1032: { name: 'ContentEncodingScope', type: 'Uint' },
+		        0x1033: { name: 'ContentEncodingType', type: 'Uint' },
+		        0x1034: { name: 'ContentCompression', type: 'Container' },
+		        0x254: { name: 'ContentCompAlgo', type: 'Uint' },
+		        0x255: { name: 'ContentCompSettings', type: 'Binary' },
+		        0x1035: { name: 'ContentEncryption', type: 'Container' },
+		        0x7e1: { name: 'ContentEncAlgo', type: 'Uint' },
+		        0x7e2: { name: 'ContentEncKeyID', type: 'Binary' },
+		        0x7e3: { name: 'ContentSignature', type: 'Binary' },
+		        0x7e4: { name: 'ContentSigKeyID', type: 'Binary' },
+		        0x7e5: { name: 'ContentSigAlgo', type: 'Uint' },
+		        0x7e6: { name: 'ContentSigHashAlgo', type: 'Uint' },
+		        0xc53bb6b: { name: 'Cues', type: 'Container' },
+		        0x3b: { name: 'CuePoint', type: 'Container' },
+		        0x33: { name: 'CueTime', type: 'Uint' },
+		        0x37: { name: 'CueTrackPositions', type: 'Container' },
+		        0x77: { name: 'CueTrack', type: 'Uint' },
+		        0x71: { name: 'CueClusterPosition', type: 'Uint' },
+		        0x70: { name: 'CueRelativePosition', type: 'Uint' },
+		        0x32: { name: 'CueDuration', type: 'Uint' },
+		        0x1378: { name: 'CueBlockNumber', type: 'Uint' },
+		        0x6a: { name: 'CueCodecState', type: 'Uint' },
+		        0x5b: { name: 'CueReference', type: 'Container' },
+		        0x16: { name: 'CueRefTime', type: 'Uint' },
+		        0x17: { name: 'CueRefCluster', type: 'Uint' },
+		        0x135f: { name: 'CueRefNumber', type: 'Uint' },
+		        0x6b: { name: 'CueRefCodecState', type: 'Uint' },
+		        0x941a469: { name: 'Attachments', type: 'Container' },
+		        0x21a7: { name: 'AttachedFile', type: 'Container' },
+		        0x67e: { name: 'FileDescription', type: 'String' },
+		        0x66e: { name: 'FileName', type: 'String' },
+		        0x660: { name: 'FileMimeType', type: 'String' },
+		        0x65c: { name: 'FileData', type: 'Binary' },
+		        0x6ae: { name: 'FileUID', type: 'Uint' },
+		        0x675: { name: 'FileReferral', type: 'Binary' },
+		        0x661: { name: 'FileUsedStartTime', type: 'Uint' },
+		        0x662: { name: 'FileUsedEndTime', type: 'Uint' },
+		        0x43a770: { name: 'Chapters', type: 'Container' },
+		        0x5b9: { name: 'EditionEntry', type: 'Container' },
+		        0x5bc: { name: 'EditionUID', type: 'Uint' },
+		        0x5bd: { name: 'EditionFlagHidden', type: 'Uint' },
+		        0x5db: { name: 'EditionFlagDefault', type: 'Uint' },
+		        0x5dd: { name: 'EditionFlagOrdered', type: 'Uint' },
+		        0x36: { name: 'ChapterAtom', type: 'Container' },
+		        0x33c4: { name: 'ChapterUID', type: 'Uint' },
+		        0x1654: { name: 'ChapterStringUID', type: 'String' },
+		        0x11: { name: 'ChapterTimeStart', type: 'Uint' },
+		        0x12: { name: 'ChapterTimeEnd', type: 'Uint' },
+		        0x18: { name: 'ChapterFlagHidden', type: 'Uint' },
+		        0x598: { name: 'ChapterFlagEnabled', type: 'Uint' },
+		        0x2e67: { name: 'ChapterSegmentUID', type: 'Binary' },
+		        0x2ebc: { name: 'ChapterSegmentEditionUID', type: 'Uint' },
+		        0x23c3: { name: 'ChapterPhysicalEquiv', type: 'Uint' },
+		        0xf: { name: 'ChapterTrack', type: 'Container' },
+		        0x9: { name: 'ChapterTrackNumber', type: 'Uint' },
+		        0x0: { name: 'ChapterDisplay', type: 'Container' },
+		        0x5: { name: 'ChapString', type: 'String' },
+		        0x37c: { name: 'ChapLanguage', type: 'String' },
+		        0x37e: { name: 'ChapCountry', type: 'String' },
+		        0x2944: { name: 'ChapProcess', type: 'Container' },
+		        0x2955: { name: 'ChapProcessCodecID', type: 'Uint' },
+		        0x50d: { name: 'ChapProcessPrivate', type: 'Binary' },
+		        0x2911: { name: 'ChapProcessCommand', type: 'Container' },
+		        0x2922: { name: 'ChapProcessTime', type: 'Uint' },
+		        0x2933: { name: 'ChapProcessData', type: 'Binary' },
+		        0x254c367: { name: 'Tags', type: 'Container' },
+		        0x3373: { name: 'Tag', type: 'Container' },
+		        0x23c0: { name: 'Targets', type: 'Container' },
+		        0x28ca: { name: 'TargetTypeValue', type: 'Uint' },
+		        0x23ca: { name: 'TargetType', type: 'String' },
+		        0x23c5: { name: 'TagTrackUID', type: 'Uint' },
+		        0x23c9: { name: 'TagEditionUID', type: 'Uint' },
+		        0x23c4: { name: 'TagChapterUID', type: 'Uint' },
+		        0x23c6: { name: 'TagAttachmentUID', type: 'Uint' },
+		        0x27c8: { name: 'SimpleTag', type: 'Container' },
+		        0x5a3: { name: 'TagName', type: 'String' },
+		        0x47a: { name: 'TagLanguage', type: 'String' },
+		        0x484: { name: 'TagDefault', type: 'Uint' },
+		        0x487: { name: 'TagString', type: 'String' },
+		        0x485: { name: 'TagBinary', type: 'Binary' }
+		    };
+
+		    function doInherit(newClass, baseClass) {
+		        newClass.prototype = Object.create(baseClass.prototype);
+		        newClass.prototype.constructor = newClass;
+		    }
+
+		    function WebmBase(name, type) {
+		        this.name = name || 'Unknown';
+		        this.type = type || 'Unknown';
+		    }
+		    WebmBase.prototype.updateBySource = function() { };
+		    WebmBase.prototype.setSource = function(source) {
+		        this.source = source;
+		        this.updateBySource();
+		    };
+		    WebmBase.prototype.updateByData = function() { };
+		    WebmBase.prototype.setData = function(data) {
+		        this.data = data;
+		        this.updateByData();
+		    };
+
+		    function WebmUint(name, type) {
+		        WebmBase.call(this, name, type || 'Uint');
+		    }
+		    doInherit(WebmUint, WebmBase);
+		    function padHex(hex) {
+		        return hex.length % 2 === 1 ? '0' + hex : hex;
+		    }
+		    WebmUint.prototype.updateBySource = function() {
+		        // use hex representation of a number instead of number value
+		        this.data = '';
+		        for (var i = 0; i < this.source.length; i++) {
+		            var hex = this.source[i].toString(16);
+		            this.data += padHex(hex);
+		        }
+		    };
+		    WebmUint.prototype.updateByData = function() {
+		        var length = this.data.length / 2;
+		        this.source = new Uint8Array(length);
+		        for (var i = 0; i < length; i++) {
+		            var hex = this.data.substr(i * 2, 2);
+		            this.source[i] = parseInt(hex, 16);
+		        }
+		    };
+		    WebmUint.prototype.getValue = function() {
+		        return parseInt(this.data, 16);
+		    };
+		    WebmUint.prototype.setValue = function(value) {
+		        this.setData(padHex(value.toString(16)));
+		    };
+
+		    function WebmFloat(name, type) {
+		        WebmBase.call(this, name, type || 'Float');
+		    }
+		    doInherit(WebmFloat, WebmBase);
+		    WebmFloat.prototype.getFloatArrayType = function() {
+		        return this.source && this.source.length === 4 ? Float32Array : Float64Array;
+		    };
+		    WebmFloat.prototype.updateBySource = function() {
+		        var byteArray = this.source.reverse();
+		        var floatArrayType = this.getFloatArrayType();
+		        var floatArray = new floatArrayType(byteArray.buffer);
+		        this.data = floatArray[0];
+		    };
+		    WebmFloat.prototype.updateByData = function() {
+		        var floatArrayType = this.getFloatArrayType();
+		        var floatArray = new floatArrayType([ this.data ]);
+		        var byteArray = new Uint8Array(floatArray.buffer);
+		        this.source = byteArray.reverse();
+		    };
+		    WebmFloat.prototype.getValue = function() {
+		        return this.data;
+		    };
+		    WebmFloat.prototype.setValue = function(value) {
+		        this.setData(value);
+		    };
+
+		    function WebmContainer(name, type) {
+		        WebmBase.call(this, name, type || 'Container');
+		    }
+		    doInherit(WebmContainer, WebmBase);
+		    WebmContainer.prototype.readByte = function() {
+		        return this.source[this.offset++];
+		    };
+		    WebmContainer.prototype.readUint = function() {
+		        var firstByte = this.readByte();
+		        var bytes = 8 - firstByte.toString(2).length;
+		        var value = firstByte - (1 << (7 - bytes));
+		        for (var i = 0; i < bytes; i++) {
+		            // don't use bit operators to support x86
+		            value *= 256;
+		            value += this.readByte();
+		        }
+		        return value;
+		    };
+		    WebmContainer.prototype.updateBySource = function() {
+		        this.data = [];
+		        for (this.offset = 0; this.offset < this.source.length; this.offset = end) {
+		            var id = this.readUint();
+		            var len = this.readUint();
+		            var end = Math.min(this.offset + len, this.source.length);
+		            var data = this.source.slice(this.offset, end);
+
+		            var info = sections[id] || { name: 'Unknown', type: 'Unknown' };
+		            var ctr = WebmBase;
+		            switch (info.type) {
+		                case 'Container':
+		                    ctr = WebmContainer;
+		                    break;
+		                case 'Uint':
+		                    ctr = WebmUint;
+		                    break;
+		                case 'Float':
+		                    ctr = WebmFloat;
+		                    break;
+		            }
+		            var section = new ctr(info.name, info.type);
+		            section.setSource(data);
+		            this.data.push({
+		                id: id,
+		                idHex: id.toString(16),
+		                data: section
+		            });
+		        }
+		    };
+		    WebmContainer.prototype.writeUint = function(x, draft) {
+		        for (var bytes = 1, flag = 0x80; x >= flag && bytes < 8; bytes++, flag *= 0x80) { }
+
+		        if (!draft) {
+		            var value = flag + x;
+		            for (var i = bytes - 1; i >= 0; i--) {
+		                // don't use bit operators to support x86
+		                var c = value % 256;
+		                this.source[this.offset + i] = c;
+		                value = (value - c) / 256;
+		            }
+		        }
+
+		        this.offset += bytes;
+		    };
+		    WebmContainer.prototype.writeSections = function(draft) {
+		        this.offset = 0;
+		        for (var i = 0; i < this.data.length; i++) {
+		            var section = this.data[i],
+		                content = section.data.source,
+		                contentLength = content.length;
+		            this.writeUint(section.id, draft);
+		            this.writeUint(contentLength, draft);
+		            if (!draft) {
+		                this.source.set(content, this.offset);
+		            }
+		            this.offset += contentLength;
+		        }
+		        return this.offset;
+		    };
+		    WebmContainer.prototype.updateByData = function() {
+		        // run without accessing this.source to determine total length - need to know it to create Uint8Array
+		        var length = this.writeSections('draft');
+		        this.source = new Uint8Array(length);
+		        // now really write data
+		        this.writeSections();
+		    };
+		    WebmContainer.prototype.getSectionById = function(id) {
+		        for (var i = 0; i < this.data.length; i++) {
+		            var section = this.data[i];
+		            if (section.id === id) {
+		                return section.data;
+		            }
+		        }
+		        return null;
+		    };
+
+		    function WebmFile(source) {
+		        WebmContainer.call(this, 'File', 'File');
+		        this.setSource(source);
+		    }
+		    doInherit(WebmFile, WebmContainer);
+		    WebmFile.prototype.fixDuration = function(duration, options) {
+		        var logger = options && options.logger;
+		        if (logger === undefined) {
+		            logger = function(message) {
+		                console.log(message);
+		            };
+		        } else if (!logger) {
+		            logger = function() { };
+		        }
+
+		        var segmentSection = this.getSectionById(0x8538067);
+		        if (!segmentSection) {
+		            logger('[fix-webm-duration] Segment section is missing');
+		            return false;
+		        }
+
+		        var infoSection = segmentSection.getSectionById(0x549a966);
+		        if (!infoSection) {
+		            logger('[fix-webm-duration] Info section is missing');
+		            return false;
+		        }
+
+		        var timeScaleSection = infoSection.getSectionById(0xad7b1);
+		        if (!timeScaleSection) {
+		            logger('[fix-webm-duration] TimecodeScale section is missing');
+		            return false;
+		        }
+
+		        var durationSection = infoSection.getSectionById(0x489);
+		        if (durationSection) {
+		            if (durationSection.getValue() <= 0) {
+		                logger(`[fix-webm-duration] Duration section is present, but the value is ${durationSection.getValue()}`);
+		                durationSection.setValue(duration);
+		            } else {
+		                logger(`[fix-webm-duration] Duration section is present, and the value is ${durationSection.getValue()}`);
+		                return false;
+		            }
+		        } else {
+		            logger('[fix-webm-duration] Duration section is missing');
+		            // append Duration section
+		            durationSection = new WebmFloat('Duration', 'Float');
+		            durationSection.setValue(duration);
+		            infoSection.data.push({
+		                id: 0x489,
+		                data: durationSection
+		            });
+		        }
+
+		        // set default time scale to 1 millisecond (1000000 nanoseconds)
+		        timeScaleSection.setValue(1000000);
+		        infoSection.updateByData();
+		        segmentSection.updateByData();
+		        this.updateByData();
+
+		        return true;
+		    };
+		    WebmFile.prototype.toBlob = function(mimeType) {
+		        return new Blob([ this.source.buffer ], { type: mimeType || 'video/webm' });
+		    };
+
+		    function fixWebmDuration(blob, duration, callback, options) {
+		        // The callback may be omitted - then the third argument is options
+		        if (typeof callback === "object") {
+		            options = callback;
+		            callback = undefined;
+		        }
+
+		        if (!callback) {
+		            return new Promise(function(resolve) {
+		                fixWebmDuration(blob, duration, resolve, options);
+		            });
+		        }
+
+		        try {
+		            var reader = new FileReader();
+		            reader.onloadend = function() {
+		                try {
+		                    var file = new WebmFile(new Uint8Array(reader.result));
+		                    if (file.fixDuration(duration, options)) {
+		                        blob = file.toBlob(blob.type);
+		                    }
+		                } catch (ex) {
+		                    // ignore
+		                }
+		                callback(blob);
+		            };
+		            reader.readAsArrayBuffer(blob);
+		        } catch (ex) {
+		            callback(blob);
+		        }
+		    }
+
+		    // Support AMD import default
+		    fixWebmDuration.default = fixWebmDuration;
+
+		    return fixWebmDuration;
+		}); 
+	} (fixWebmDuration));
+	return fixWebmDuration.exports;
+}
+
+var fixWebmDurationExports = requireFixWebmDuration();
+var ysFixWebmDuration = /*@__PURE__*/getDefaultExportFromCjs(fixWebmDurationExports);
+
+class ProcessVideoComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.apiKey = null;
+        this.previewStream = null;
+        this.recordedChunks = [];
+        this.mediaRecorder = null;
+        this.videoFile = null;
+        this.startTime = 0;
+        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 duration = Date.now() - this.startTime;
+                const buggyBlob = new Blob(this.recordedChunks, { type: 'video/webm' });
+                ysFixWebmDuration(buggyBlob, duration, { logger: false })
+                    .then((fixedBlob) => {
+                    this.onStopMediaRecorder(fixedBlob);
+                });
+            };
+            this.mediaRecorder.start();
+            this.startTimer();
+            this.startTime = Date.now();
+            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);
+        }
+    }
+    onStopMediaRecorder(blob) {
+        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();
+        // Clean up the object URL when the video loads
+        this.videoElement.onloadeddata = () => {
+            URL.revokeObjectURL(videoURL);
+        };
+    }
+    handleFileUpload(event) {
+        var _a, _b;
+        const file = (_a = event.target.files) === null || _a === undefined ? undefined : _a[0];
+        if ((_b = file === null || file === undefined ? undefined : file.type) === null || _b === undefined ? undefined : _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 === undefined ? undefined : _a.state) === 'recording';
+    }
+    get currentPhrase() {
+        return this.phrase;
+    }
+    get videoDuration() {
+        var _a;
+        return ((_a = this.videoElement) === null || _a === undefined ? undefined : _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);
+
+export { BiometryEnrollment, BiometrySDK, ProcessVideoComponent };