ng-fad-videotaping v1.5.2

Getting started

Installation

npm install ng-fad-videotaping

Dependencies

Add the folder provided by the technical team within the project assets (images and js)

Import

In the file necessary example.module.ts import the module.

In this case app.module.ts

import { NgFadVideotapingModule } from 'ng-fad-videotaping';
.
.
.
... imports: [
       ...,
       BrowserAnimationsModule 
       NgFadVideotapingModule
    ]...

Note: BrowserAnimationsModule is required.

Usage

HTML

Add the selector inside some component and configure the input parameters:

<ng-fad-videotaping
  [legend]="legend"
  [identifications]="identifications"
  [configuration]="configuration"
  (onerror)="onerror($event)"
  (onclose)="onclose()"
  (oncomplete)="oncomplete($event)">
</ng-fad-videotaping>

Typescript

Listen to the events:

  .
  .
  .
  export interface Response {
    video: Blob;
    startSecond: number;
  }

  export enum IDS_ALLOWED {
    ID_MEX_FRONT = 'ID_MEX_FRONT',
    ID_MEX_BACK = 'ID_MEX_BACK',
    ID_PASSPORT = 'ID_PASSPORT'
  };

  export interface Identification {
    name: IDS_ALLOWED;
    title: string;
  }

  .
  .
  .

  public legend = 'Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto  de relleno estándar de las industrias desde el año 1500';

  public identifications = [{ name: IDS_ALLOWED.ID_MEX_FRONT, title: 'Front' }, 
                            { name: IDS_ALLOWED.ID_MEX_BACK, title: 'Back ' }];

  // optional
  public configuration = {
    idDetection: {
      probability: 0.85
    },
    recorder: {
      recordEverything: false
    },
    customization: {
      fadCustomization: {
        colors: {
          primary: '#A70635',
          secondary: '#A70635',
          tertiary: '#363636'
        },
        buttons: {
          primary: {
            backgroundColor: '#A70635',
            backgroundColorDisabled: '#dcdcdc',
            labelColor: '#ffffff',
            labelColorDisabled: '#8e8e8e',
            border: '1px solid #A70635'
          }
        }
      }
    }
  };

  oncomplete(response: Response) {
    // console.log(response)
  }

  onclose() {
    // user close screen 
  }

  onerror($event) {
    // some error
    alert(JSON.stringify(error));
  }

Inputs

Outputs