FadMobileIdCapture

1 - Instal packages

```
npm i @fad-producto/desktop-id-capture
```
*"Requires access token configuration for private FAD repositories."

2 - Add angular.json configuration

"architect": {
    "build": {
        "options": {
            "assets": [
                {
                    "glob": "**/*",
                    "input": "node_modules/@fad-producto/desktop-id-capture/assets/tf-models",
                    "output": "./assets/tf-models"
                },
                {
                    "glob": "**/*",
                    "input": "node_modules/@fad-producto/desktop-id-capture/assets/tfLite",
                    "output": "./"
                },
                {
                    "glob": "**/*",
                    "input": "node_modules/@fad-producto/desktop-id-capture/assets/images/svg",
                    "output": "./assets/images/svg"
                }
            ],
            "scripts": [
                "node_modules/@fad-producto/desktop-id-capture/assets/opencv.js"
            ]
        ...

3 - add skipLibCheck configuration (tsconfig.json)

"compilerOptions": {
    "skipLibCheck": true,

4 - Import component - app.module.ts

import { DesktopMexicanIdModule } from '@fad-producto/desktop-id-capture';

@NgModule({ imports: [ DesktopMexicanIdModule,

5 - Component Inputs & Outputs

Inputs

<fad-desktop-id-capture
    [configuration]="IdCaptureConfigurationModel"
    (getData)="getData($event)"
    (onError)="onError($event)"
    ...

| Name                     | Type                           | Required | Default              | Description                                              |
| ------------------------ | ------------------------------ | -------- | -------------------- | -------------------------------------------------------- |
| configuration            | IdCaptureConfigurationModel    | true     |                      | sets component configuration                             |


class IdCaptureConfigurationModel
| Name                     | Type                           | Required | Default              | Description                                              |
| ------------------------ | ------------------------------ | -------- | -------------------- | -------------------------------------------------------- |
| labels                   | RetryLabelsConfigurationModel  | false    | *defaultLabelsConfig | Legends to display on component                          |
| requiresBackSide         | boolean                        | false    | false                | indicates if is required to capture both parts of the id |
| showResponsePreview      | boolean                        | false    | true                 | show or hide preview before response                     |
| photoRetries             | number                         | false    | 5                    | number of capture retries allowed                        |
| deviceId                 | string                         | false    | default camera       | camera device id                                         |
| tfModelPath              | string                         | false    | /                    | ruta de archivos wasm de tf                              |

-> labels: RetryLabelsConfigurationModel = {
    frontTitle: 'ENFOQUE EL FRENTE DEL DOCUMENTO',
    backTitle: 'ENFOQUE EL REVERSO DEL DOCUMENTO',
    resultDescription: 'Verifica que la foto de tu identificación sea correcta y legible',
    nextButtonLabel: 'Continuar',
    retryButtonLabel: 'Volver a Tomar',
    buttonColor: '#ab0000'
};

Outputs

getData($event) {
    console.log('Scanner result: ', $event);
}

onError($event) {
    console.log('Scanner error: ', $event);
}

| Name             |  Return                | Description                                        |
| ---------------- | ---------------------- | -------------------------------------------------- |
| getData          | DataResponseModel      | Fires when scanning was completed                  |
| onError          | ResponseErrorModel     | Fires when an error happens                        |

Data Structure

DataResponseModel
    frontImage: string,
    crop: string[],         // two crops, left and right, choose one
    backImage: string
    modelType: string

ResponseErrorModel
    error: string; (*ErrorMessages enum)
    message: string; (Error string detail)
    code: number; (*ErrorCodes enum)

export enum ErrorMessages {
    BROWSER_NOT_SUPPORTED =  'Navegador no soportado',
    NOT_ACCEPT_CAMERA_PERMISSION = 'No tienes permisos para acceder a la cámara',
    MAX_TIME_LIMIT =  'Tiempo máximo superado',
    ORIENTATION_TITLE = 'Por favor coloca tu dispositivo de forma vertical',
    ORIENTATION_INSTRUCTIONS = 'Te sugerimos bloquear el giro automático en tu dispositivo para una mejor experiencia',
    NOT_SUPPORTED_TITLE = 'Atención',
    NOT_SUPPORTED_INSTRUCTIONS = 'Este es un navegador no soportado',
    NOT_DETECTED = 'No se puede identificar el documento',
    NOT_CREATED = 'No fue posible iniciar el componente',
    MODEL_ERROR = 'Se presento un error al cargar el modelo de predicción',
    PERSPECTIVE_ERROR = 'Se presento un error al interpretar la perspectiva',
}

export enum ErrorCodes {
    BROWSER_NOT_SUPPORTED= -1,
    NOT_ACCEPT_CAMERA_PERMISSION = -2,
    MAX_TIME_LIMIT = -3,
    ORIENTATION = -4,
    NOT_SUPPORTED = -5,
    NOT_DETECTED = -6,
    NOT_CREATED = -7,
    MODEL_ERROR = -8,
    PERSPECTIVE_ERROR = -9
}

##############################################

Error in project: global is not defined

Add in polyfills.ts
    (window as any).global = window;

Error on build

Error: Module not found: Error: Can't resolve '../tflite_web_api_client'
    -> configure tsModelPath 
    -> npm i @tensorflow/[email protected] --force