@regulaforensics/vp-frontend-face-components 1.1.0 → 1.4.0

package/lib/index-face.d.ts

@@ -0,0 +1 @@
+import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';

package/lib/models/CameraModel.d.ts

@@ -0,0 +1,9 @@
+import { FacingModeType } from '../types';
+declare class CameraModel {
+    readonly deviceId: string;
+    readonly facing: FacingModeType;
+    readonly groupId: string;
+    readonly label: string;
+    constructor(mdi: MediaDeviceInfo, facing: FacingModeType);
+}
+export default CameraModel;

package/lib/models/ImageModel.d.ts

@@ -0,0 +1,7 @@
+declare class ImageModel {
+    readonly mimeType: string;
+    readonly raw: string;
+    readonly extension: string;
+    constructor(dataURL: string);
+}
+export default ImageModel;

package/lib/services/DebugService.d.ts

@@ -0,0 +1,13 @@
+import { logLevels } from '../constants';
+declare class DebugService {
+    private readonly logLvl;
+    constructor(logLvl: logLevels);
+    private log;
+    private time;
+    debug(message: string, ...optionalParams: Array<any>): void;
+    info(message: string, ...optionalParams: Array<any>): void;
+    warn(message: string, ...optionalParams: Array<any>): void;
+    error(message: string, ...optionalParams: Array<any>): void;
+}
+declare const _default: DebugService;
+export default _default;

package/lib/services/DocumentReaderService.d.ts

@@ -0,0 +1,39 @@
+import EventEmitter from './EventEmitter';
+import { ImageInputParamType, InitDataType } from '../types';
+declare class DocumentReaderService {
+    initialized: boolean;
+    processing: boolean;
+    prepared: boolean;
+    workerResponded: boolean;
+    worker: Worker | null;
+    eventEmitter: EventEmitter;
+    initData: InitDataType | null;
+    constructor();
+    subscribe(listener: (data: any) => void): void;
+    unsubscribe(listener: (data: any) => void): void;
+    prepare(listener?: (data: any) => void): Promise<void>;
+    initialize({ license }: {
+        license: string | undefined;
+    }): void;
+    private postCustomMessage;
+    private emit;
+    private print;
+    private printErr;
+    private onWorkerMessage;
+    shutdown(): void;
+    processImage(base64ImagesArray: string[], options: {
+        scenario: string;
+        multipageProcessing: boolean;
+        imageInputParam?: ImageInputParamType;
+    }): void;
+    process(Uint8ImagesArray: Uint8ClampedArray[], options: {
+        scenario: string;
+        multipageProcessing: boolean;
+        imageInputParam?: ImageInputParamType;
+        width: number;
+        height: number;
+    }): void;
+    startNewPage(): void;
+    startNewDocument(): void;
+}
+export default DocumentReaderService;

package/lib/services/EventEmitter.d.ts

@@ -0,0 +1,9 @@
+declare class EventEmitter {
+    callbacks: Record<string, any>;
+    constructor();
+    on(event: string, cb: (data: any) => any): void;
+    emit(event: string, data: any): void;
+    unsubscribe(event: string, listener: any): void;
+    unsubscribeAll(): void;
+}
+export default EventEmitter;

package/lib/services/FaceLivenessService.d.ts

@@ -0,0 +1,46 @@
+import { FrameObject, UserAgentType } from '../types';
+import EventEmitter from './EventEmitter';
+import CameraModel from '../models/CameraModel';
+declare type MetadataType = {
+    metadata: {
+        hostAppId: string;
+        sdkVersion: string;
+        deviceModel: string;
+        camera: CameraModel;
+    };
+    try_id?: number;
+    guid?: string;
+    userAgent: UserAgentType;
+    mode?: number;
+};
+declare class FaceLivenessService {
+    initialized: boolean;
+    processing: boolean;
+    prepared: boolean;
+    worker: Worker | null;
+    params: {
+        width: number;
+        height: number;
+        metadata?: MetadataType;
+    };
+    eventEmitter: EventEmitter;
+    constructor();
+    prepare(listener: (data: any) => void): Promise<void>;
+    initialize(params: {
+        width: number;
+        height: number;
+        metadata: MetadataType;
+        debug?: boolean;
+    }): void;
+    private postCustomMessage;
+    private emit;
+    private print;
+    private printErr;
+    private onWorkerMessage;
+    shutdown(): void;
+    processImage({ videoFrame, sourceCaptureFrame, }: {
+        videoFrame: Uint8ClampedArray;
+        sourceCaptureFrame: FrameObject;
+    }): void;
+}
+export default FaceLivenessService;

package/lib/services/FaceService.d.ts

@@ -0,0 +1,11 @@
+import { FaceLivenessResultType } from '../types';
+declare function getLivenessResult(encryptedBody: Uint8Array, { backendURL, uuid, try_id, headers, }: {
+    backendURL?: string;
+    uuid: string;
+    try_id: number;
+    headers?: Record<string, string>;
+}): Promise<FaceLivenessResultType | undefined>;
+declare const _default: {
+    getLivenessResult: typeof getLivenessResult;
+};
+export default _default;

package/lib/services/WasmFeatureDetectService.d.ts

@@ -0,0 +1,4 @@
+export declare function getWasmFeaturesArray(): Promise<Array<{
+    feature: string;
+    supported: boolean;
+}>>;

package/lib/types.d.ts

@@ -0,0 +1,219 @@
+import { Response } from '@regulaforensics/document-reader-webclient';
+import { documentEventActions, faceEventActions, responseCode, streamStatus, WebComponentsError } from './constants';
+import CameraModel from './models/CameraModel';
+export declare type FrameObject = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export declare type VideoParamsType = {
+    videoParams: {
+        width: number;
+        height: number;
+    };
+    videoContainerParams: {
+        width: number;
+        height: number;
+    };
+};
+export declare type FacingModeType = 'user' | 'environment' | undefined;
+export declare type VideoStatusParamsType = {
+    videoStatus: streamStatus;
+    camera: CameraModel;
+    twoFacingModesAvailable: boolean;
+};
+export declare type CaptureFrameType = {
+    capture: Uint8ClampedArray;
+    raw: string;
+    mimeType: string;
+};
+export declare type CaptureType = Array<Omit<CaptureFrameType, 'capture'>>;
+export declare type CodeType = {
+    code: number;
+    images?: null;
+};
+export declare type UserAgentType = {
+    appCodeName: string;
+    appName: string;
+    appVersion: string;
+    language: string;
+    languages: readonly string[];
+    platform: string;
+    product: string;
+    productSub: string;
+    userAgent: string;
+    vendor: string;
+    vendorSub: string;
+};
+declare type FaceLivenessEyesType = {
+    predLeft: number;
+    predRight: number;
+    probLeft: number;
+    probRight: number;
+};
+declare type FaceLivenessOcclusionType = {
+    foreheadGlasses: boolean;
+    glasses: boolean;
+    hat: boolean;
+    medicineMask: boolean;
+    occlusion: boolean;
+    openedMouth: boolean;
+    sunglasses: boolean;
+};
+declare type FaceLivenessQualityType = {
+    blur: number;
+    brightness: number;
+    noise: number;
+};
+export declare type FaceLivenessServiceResponseType = {
+    code: number;
+    msg: string;
+    results: {
+        faceIdx: number;
+        livenessStatus: number;
+        metadata: {
+            ageNear: string;
+            ageNormal: string;
+            distance: number;
+            evaluationTime: number;
+            eyesNear: FaceLivenessEyesType;
+            eyesNormal: FaceLivenessEyesType;
+            faceQuality: {
+                details: Array<{
+                    attribute: string;
+                    score: number;
+                }>;
+                score: number;
+            };
+            faceTrackBreak: number;
+            occlusionNear: FaceLivenessOcclusionType;
+            occlusionNormal: FaceLivenessOcclusionType;
+            predArtMaskNear: number;
+            predArtMaskNormal: number;
+            predElectronicDeviceNear: number;
+            predElectronicDeviceNormal: number;
+            predGeometryClassifier: number;
+            predLivenessViewNear: number;
+            predLivenessViewNormal: number;
+            predOpticalFlow: number;
+            predShadesNear: number;
+            predShadesNormal: number;
+            predTotal: number;
+            probArtMaskNear: number;
+            probArtMaskNormal: number;
+            probElectronicDeviceNear: number;
+            probElectronicDeviceNormal: number;
+            probGeometryClassifier: number;
+            probOpticalFlow: number;
+            probShadesNear: number;
+            probShadesNormal: number;
+            qualityNear: FaceLivenessQualityType;
+            qualityNormal: FaceLivenessQualityType;
+            smileNear: string;
+            smileNormal: string;
+            symNear: number;
+            symNormal: number;
+        };
+    };
+    versionDescriptor: string;
+    versionSDK: string;
+    images: Array<string>;
+};
+export declare type FaceLivenessResultType = Omit<FaceLivenessServiceResponseType, 'images'>;
+export declare type FaceLivenessResponseType = FaceLivenessServiceResponseType | {
+    code: number;
+};
+export declare type FaceDetectionResponseType = {
+    capture: Array<string>;
+};
+export declare type DocumentReaderResponseType = Response | {
+    code: number;
+};
+export declare type CameraSnapshotResponseType = Array<{
+    raw: string;
+    mimeType: string;
+}>;
+export declare type CustomErrorObjectType = {
+    type: WebComponentsError;
+    error?: Record<string, any> | string;
+};
+export declare type ScenarioParamsType = {
+    UVTorch?: number;
+    barcodeExt?: number;
+    caption: string;
+    desc: string;
+    faceExt?: number;
+    frameKWHDoublePageSpreadLandscape: string;
+    frameKWHDoublePageSpreadPortrait: string;
+    frameKWHLandscape: string;
+    frameKWHPortrait: string;
+    frameOrientation: number;
+    manualCrop?: number;
+    multiPageOff?: number;
+    name: string;
+    seriesProcessMode?: number;
+};
+export declare type InitDataType = {
+    scenario: Array<ScenarioParamsType>;
+};
+export declare type UserFrameType = {
+    frameBottom: number;
+    frameLeft: number;
+    frameRight: number;
+    frameTop: number;
+    width: number;
+    height: number;
+};
+export declare type ImageInputParamType = {
+    frameBottom: number;
+    frameLeft: number;
+    frameRight: number;
+    frameTop: number;
+    light: number;
+    resolutionType: number;
+};
+export declare type FrameParamsType = {
+    userFrame: UserFrameType;
+    serviceFrame: ImageInputParamType;
+} | null;
+export declare type ImageQualityCheck = {
+    featureType: number;
+    mean: number;
+    probability: number;
+    result: number;
+    std_dev: number;
+    type: number;
+};
+export declare type SupportedBrowserVersions = {
+    Chrome: number;
+    Firefox: number;
+    Safari: number;
+    Opera?: number;
+    Edge?: number;
+    Chromium?: number;
+    IE?: number;
+    'Internet Explorer'?: number;
+    'Mobile Safari'?: number;
+    'Samsung Browser'?: number;
+};
+export declare type SupportedBrowserVersionsByOsType = {
+    iOS: SupportedBrowserVersions;
+    Android: SupportedBrowserVersions;
+    desktop: SupportedBrowserVersions;
+};
+declare type CustomEventDataType<R> = {
+    status: responseCode;
+    reason?: WebComponentsError;
+    response?: R;
+};
+interface DetailEvent<A, R> {
+    manual: boolean;
+    action: A;
+    data: CustomEventDataType<R> | null;
+}
+export declare type FaceLivenessDetailType = DetailEvent<faceEventActions, FaceLivenessResponseType>;
+export declare type FaceCaptureDetailType = DetailEvent<faceEventActions, FaceDetectionResponseType>;
+export declare type DocumentReaderDetailType = DetailEvent<documentEventActions, DocumentReaderResponseType>;
+export declare type CameraSnapshotDetailType = DetailEvent<documentEventActions, CameraSnapshotResponseType>;
+export {};

package/lib/utils.d.ts

@@ -0,0 +1,65 @@
+import CameraModel from './models/CameraModel';
+export declare function contains(a: {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}, b: {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}): boolean;
+export declare function overlaps(a: {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}, b: {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}): boolean;
+export declare function touches(a: {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}, b: {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}): boolean;
+export declare function geTwoCorners({ top, left, height, width, }: {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+}): {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+};
+export declare function uint8ArrayToBase64(arr: Uint8ClampedArray, videoFrame: {
+    width: number;
+    height: number;
+}): string;
+export declare function downloadBase64Image(base64: string, name: string | number): void;
+export declare function saveByteArray(data: Uint8ClampedArray, name: string | number): void;
+export declare const convertBooleanAttributeParam: (attributeValue: string | null) => boolean | undefined;
+export declare const convertNumberAttributeParam: (attributeValue: string | null) => number | undefined;
+export declare function compose(...argsA: any): any;
+export declare function translateDetectionParams(captureFrameWidth: number, captureFrameHeight: number, captureFrameLeft: number, captureFrameTop: number, videoElementWidth: number, videoElementHeight: number, containerWidth: number, containerHeight: number, debug?: boolean): {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+export declare function getByteCount(b64: Array<string> | string): number;
+export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
+export declare function getBase64(files: FileList, maxImageWidthAndHeight: number, maxImageSizeWithoutResize: number, maxInputFilesSize: number, resizeValue: number, compression: number): Promise<Array<Promise<string>>>;
+export declare function generateEvent<T>(type: string, detail: T): CustomEvent;
+export declare const getAvailableCameras: (cameraPool: CameraModel[], preferredCameraId?: string | undefined) => CameraModel | undefined;

package/lib/web-components/FaceDetection.d.ts

@@ -0,0 +1,11 @@
+export default class FaceDetectionWebComponent extends HTMLElement {
+    root: ShadowRoot;
+    mounted: boolean;
+    initialStyles: string;
+    constructor();
+    static get observedAttributes(): Array<string>;
+    attributeChangedCallback(name: string): void;
+    connectedCallback(): void;
+    render(): void;
+    disconnectedCallback(): void;
+}

package/lib/web-components/FaceLiveness.d.ts

@@ -0,0 +1,14 @@
+export default class FaceLivenessWebComponent extends HTMLElement {
+    root: ShadowRoot;
+    mounted: boolean;
+    requestHeaders: Record<string, string>;
+    initialStyles: string;
+    constructor();
+    static get observedAttributes(): Array<string>;
+    attributeChangedCallback(name: string): void;
+    connectedCallback(): void;
+    set headers(headersData: Record<string, string>);
+    get headers(): Record<string, string>;
+    render(): void;
+    disconnectedCallback(): void;
+}

package/lib/web-components/FullScreenContainer.d.ts

@@ -0,0 +1,4 @@
+export default class FullScreenContainer extends HTMLElement {
+    root: ShadowRoot;
+    constructor();
+}

package/lib/web-components.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FaceLivenessDetailType, FaceCaptureDetailType, DocumentReaderDetailType, CameraSnapshotDetailType } from './types';
+export declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'face-liveness': IFaceLiveness;
+            'face-capture': IFaceDetection;
+            'document-reader': IDocumentReader;
+            'camera-snapshot': ICameraSnapshot;
+            'fullscreen-container': IBaseComponent;
+        }
+    }
+    interface IBaseComponent extends React.RefAttributes<Node>, React.AllHTMLAttributes<string | number | boolean>, Pick<Element, any> {
+        locale?: string;
+        copyright?: boolean;
+        'camera-id'?: string;
+    }
+    interface IDocumentBaseComponent extends IBaseComponent {
+        'start-screen'?: boolean;
+        multiple?: boolean;
+    }
+    interface IFaceLiveness extends Omit<IBaseComponent, 'headers'> {
+        url?: string;
+        debug?: boolean;
+        mode?: number;
+        headers?: string | {
+            [key: string]: string;
+        };
+    }
+    interface IDocumentReader extends IDocumentBaseComponent {
+        'internal-scenario'?: string;
+        'multipage-processing'?: boolean;
+        license?: string;
+        url?: string;
+    }
+    interface IFaceDetection extends IBaseComponent {
+        debug?: boolean;
+    }
+    type ICameraSnapshot = IDocumentBaseComponent;
+}
+export interface ICustomEventListener<T> extends EventListener {
+    (evt: CustomEvent<T>): void;
+}
+export interface ICustomEvent<T = any> extends Event {
+    readonly detail?: T;
+}
+export type { FaceLivenessDetailType, FaceCaptureDetailType, DocumentReaderDetailType, CameraSnapshotDetailType };

package/package.json

@@ -1,55 +1,55 @@
 {
   "name": "@regulaforensics/vp-frontend-face-components",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "description": "Regula framework agnostic web components to work with webcamera",
+  "types": "lib/web-components.d.ts",
   "main": "dist/main.js",
   "files": [
-    "./dist/*"
+    "dist/*",
+    "lib/*"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/regulaforensics/vp-frontend-components.git"
-  },
   "author": "Regula Forensics, Inc.",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/regulaforensics/vp-frontend-components/issues"
-  },
-  "homepage": "https://storybook.regulaforensics.com/",
+  "homepage": "https://storybook-face.regulaforensics.com/",
   "scripts": {
     "start": "webpack serve --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
-    "build-face": "webpack --config webpack.face.js",
-    "build-document": "webpack --config webpack.document.js",
-    "storybook": "start-storybook -p 6006 -c .storybook-development",
+    "build-face": "npm run clean-lib && npm run generate-face-types && webpack --config webpack.face.js",
+    "build-document": "npm run clean-lib && npm run generate-document-types && webpack --config webpack.document.js",
+    "storybook": "start-storybook -p 6006 -c .storybook-development -h localhost",
     "build-storybook-development": "build-storybook -c .storybook-development",
     "build-storybook-nightly": "build-storybook -c .storybook-nightly",
     "build-storybook-face-rc": "build-storybook -c .storybook-rc/face",
     "build-storybook-document-rc": "build-storybook -c .storybook-rc/document",
     "build-storybook-face-release": "build-storybook -c .storybook-release/face",
     "build-storybook-document-release": "build-storybook -c .storybook-release/document",
-    "generate-dictionaries": "node scripts/xml-dictionary-parser/index.js Translator.xml src/i18n/dictionaries"
+    "generate-dictionaries": "node scripts/xml-dictionary-parser/index.js Translator.xml src/i18n/dictionaries",
+    "clean-lib": "rm -rf ./lib",
+    "generate-face-types": "tsc --project ./configs/face.tsconfig.json",
+    "generate-document-types": "tsc --project ./configs/document.tsconfig.json"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged && tsc --noEmit"
     }
   },
   "lint-staged": {
-    "*.{js,ts,tsx}": "eslint --cache --fix"
+    "*.{js,ts,tsx}": "eslint --fix"
   },
   "dependencies": {
-    "@regulaforensics/document-reader-webclient": "^5.6.6",
-    "@regulaforensics/facesdk-webclient": "^3.1.0",
-    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "@regulaforensics/document-reader-webclient": "^6.3.1",
+    "@regulaforensics/facesdk-webclient": "^3.1.2",
+    "@storybook/manager-webpack5": "^6.4.22",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
     "axios": "^0.21.1",
     "base64-arraybuffer": "^0.2.0",
     "localize-react": "^1.7.1",
-    "react": "^17.0.1",
-    "react-device-detect": "^2.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-device-detect": "^2.1.2",
+    "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "wasm-feature-detect": "^1.2.11"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -64,16 +64,15 @@
     "@regulaforensics/vp-frontend-face-components": "*",
     "@regulaforensics/vp-frontend-face-components-nightly": "*",
     "@regulaforensics/vp-frontend-face-components-rc": "*",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/builder-webpack5": "^6.3.0-beta.4",
-    "@storybook/react": "6.2.9",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@storybook/addon-actions": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-links": "6.4.22",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@types/pako": "^1.0.3",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/uuid": "^8.3.0",
-    "@types/webpack": "^4.41.26",
-    "@types/webpack-dev-server": "^3.11.1",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
     "babel-loader": "^8.2.2",
@@ -85,19 +84,20 @@
     "eslint-plugin-react": "^7.22.0",
     "fast-xml-parser": "^3.19.0",
     "he": "^1.2.0",
-    "html-webpack-plugin": "^5.3.1",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.3.0",
     "to-string-loader": "^1.1.6",
     "ts-loader": "^8.0.14",
     "typescript": "^4.1.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.17.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1",
+    "webpack-merge": "^5.8.0",
     "worker-loader": "^3.0.8"
   }
 }