@quadible/web-sdk/dist/src/common/DebugUI.js

The web sdk for Quadible's behavioral authentication service.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const BehavioralAuthSDK_1 = __importDefault(require("../BehavioralAuthSDK"));
class DebugUI {
    client;
    html = `
        <video id="qdbl_debug_ui_video"></video>
        <div id="qdbl_debug_ui"></div>
    `;
    debugEl = document.createElement('div');
    stats = {
        localPredictionWithFaceCount: 0,
        localPredictionWithoutFaceCount: 0,
        apiPredictionSamePersonCount: 0,
        apiPredictionNotSamePersonCount: 0,
        apiPredictionNoFacesCount: 0,
        trackingRequestCount: 0,
        trackingEndRequestCount: 0
    };
    isVisible = false;
    constructor(client) {
        this.client = client;
        this.build();
        window.addEventListener('keydown', (ev) => {
            if (ev.key === 'd' && !document.querySelector(':focus')) {
                this.toggle();
            }
        });
        client.videoWorker.on('predictions', ({ predictions }) => {
            if (predictions.length) {
                this.stats.localPredictionWithFaceCount++;
                this.debugEl.querySelector(`#localPredictionWithFaceCount span`).innerHTML =
                    this.stats.localPredictionWithFaceCount.toString();
            }
            else {
                this.stats.localPredictionWithoutFaceCount++;
                this.debugEl.querySelector(`#localPredictionWithoutFaceCount span`).innerHTML =
                    this.stats.localPredictionWithoutFaceCount.toString();
            }
        });
        client.webcamSession.on("face-auth-response" /* WebcamSessionEvent.FaceAuthResponse */, (response) => {
            if (response.authenticated) {
                this.stats.apiPredictionSamePersonCount++;
                this.debugEl.querySelector(`#apiPredictionSamePersonCount span`).innerHTML =
                    this.stats.apiPredictionSamePersonCount.toString();
            }
            if (!response.detectedFaces) {
                this.stats.apiPredictionNoFacesCount++;
                this.debugEl.querySelector(`#apiPredictionNoFacesCount span`).innerHTML =
                    this.stats.apiPredictionNoFacesCount.toString();
            }
            if (response.detectedFaces && !response.authenticated) {
                this.stats.apiPredictionNotSamePersonCount++;
                this.debugEl.querySelector(`#apiPredictionNotSamePersonCount span`).innerHTML =
                    this.stats.apiPredictionNotSamePersonCount.toString();
            }
        });
        client.webcamSession.on("tracking-sent" /* WebcamSessionEvent.TrackingSent */, () => {
            this.stats.trackingRequestCount++;
            this.debugEl.querySelector(`#trackingRequestCount span`).innerHTML =
                this.stats.trackingRequestCount.toString();
        });
        client.webcamSession.on("tracking-end-sent" /* WebcamSessionEvent.TrackingEndSent */, () => {
            this.stats.trackingEndRequestCount++;
            this.debugEl.querySelector(`#trackingEndRequestCount span`).innerHTML =
                this.stats.trackingEndRequestCount.toString();
        });
    }
    toggle() {
        if (this.isVisible) {
            this.hide();
        }
        else {
            this.show();
        }
    }
    show() {
        this.isVisible = true;
        document.body.append(this.debugEl);
    }
    hide() {
        this.isVisible = false;
        this.debugEl.remove();
    }
    build() {
        this.debugEl.classList.add('qdblsdk-debug-ui');
        this.buildVideoPlayer();
        this.buildFields();
    }
    async buildVideoPlayer() {
        this.debugEl.append(this.client.videoWorker.canvas);
    }
    buildFields() {
        const fields = [
            { name: 'clientId', get: () => BehavioralAuthSDK_1.default.getClientId() },
            { name: 'apiKey', get: () => this.client.configuration.apiKey },
            { name: 'pushIntervalMs', get: () => this.client.configuration.pushIntervalMs },
            { name: 'useWebcam', get: () => this.client.configuration.useWebcam },
            { name: 'lockScreenOnAuthLost', get: () => this.client.configuration.lockScreenOnAuthLost },
            { name: 'lockScreenOnFaceLost', get: () => this.client.configuration.lockScreenOnFaceLost },
            { name: 'debug', get: () => this.client.configuration.debug },
            { name: 'verbose', get: () => this.client.configuration.verbose },
            { name: 'localPredictionWithFaceCount', get: () => this.stats.localPredictionWithFaceCount },
            { name: 'localPredictionWithoutFaceCount', get: () => this.stats.localPredictionWithoutFaceCount },
            { name: 'apiPredictionSamePersonCount', get: () => this.stats.apiPredictionSamePersonCount },
            { name: 'apiPredictionNotSamePersonCount', get: () => this.stats.apiPredictionNotSamePersonCount },
            { name: 'apiPredictionNoFacesCount', get: () => this.stats.apiPredictionNoFacesCount },
            { name: 'trackingRequestCount', get: () => this.stats.trackingRequestCount },
            { name: 'trackingEndRequestCount', get: () => this.stats.trackingEndRequestCount }
        ];
        for (const field of fields) {
            const el = document.createElement('div');
            el.id = field.name.toString();
            el.classList.add('field-row');
            el.innerHTML = `<b>${field.name}</b>: <span>${field.get()}</span>`;
            this.debugEl.append(el);
        }
    }
}
exports.default = DebugUI;
//# sourceMappingURL=DebugUI.js.map