OcrPhoto by TalentoMOBILE

Document scanning component for Angular. Scan different types of ID documentation to obtain the following outputs:

Fake documentation validation
Data extraction
Photo capture

To contact TalentoMobile: soporte@talentomobile.com

INSTALATION

npm install ocr-photo-V2

COMPONENT INPUTS

INPUT
[env]	Setting the environment. dev, pre, pro as parameters.
[token]	Validation token.
[docType]	Type of document to be analyze.

COMPONENT OUTPUTS

INPUT
(photoTaken)	Receive the auto photo taken
(photoMessage)	Receive the message to guide the user fot the automatic photo taken
(error)	Receive any possible error.

MESSAGE TYPES

SHOW_DOCUMENT HOLD_DOCUMENT CENTER_DOCUMENT BRING_DOCUMENT_CLOSER

ERROR TYPES

DEVICES_NOT_FOUND_ERROR TRACK_START_ERROR CONSTRAINT_NOT_SATISFIED_ERROR PERMISSION_DENIED_ERROR TYPE_ERROR GENERIC_ERROR

METHODS ACCESSIBLE FROM TS

OUTPUT		input	output
takeframe()	Capture Photo manually		Blob image
sendFront()	Send the front capture to be analyze.	Blob image	FRONT_RESPONSE
sendBackPhoto()	Send the back capture to be analyze.	Blob image	BACK_RESPONSE
stopVideo()	Close the camera ones the whole capture have finished
reset()	Refresh teh photo taken to take a new photo
compressImg()	Compress the image file	Blob image	Blob image

FRONT_RESPONSE

This response will be optimize and resented in the Back response as a global response for the whole process

  {
    "data":{
      "country": {
        "value": "string", "confidence": 0
        },
      "date_of_birth": {
        "value": "string", "confidence": 0
        },
      "doc_expire_date": {
        "value": "string", "confidence": 0
        },
      "doc_number": {
        "value": "string", "confidence": 0
        },
      "doc_type": {
        "value": "string", "confidence": 0
        },
      "name": {
        "value": "string", "confidence": 0
        },
      "nationality":{
        "value": "string", "confidence": 0
        },
      "opt_cli": {
        "value": "string", "confidence": 0
        },
      "opt_laser_grab": {
        "value": "string", "confidence": 0
        },
      "opt_number_can": {
        "value": "string", "confidence": 0
        },
      "opt_support_number": {
        "value": "string", "confidence": 0
        },
      "sex": {
        "value": "string", "confidence": 0
        },
      "surname1": {
        "value": "string", "confidence": 0
        },
      "surname2": {
        "value": "string", "confidence": 0
        }
    },
    "docType": "string",
    "frontVal":{
      "document_aspect_ratio": "boolean",
      "document_aspect_ratio_value": "number",
      "document_backwhite_check": "boolean",
      "document_typography": "boolean"
    },
    "uuid": "string"
  }

BACK_RESPONSE

{ 
  "result":
    {
        "doc_type": {
          "value": "string",
          "confidence": 0
        },
        "doc_number": {
          "value": "string",
          "confidence": 0
        },
        "personal_number": {
          "value": "string",
          "confidence": 0
        },
        "doc_expire_date": {
          "value": "string",
          "confidence": 0
        },
        "issue_date": {
          "value": "string",
          "confidence": 0
        },
        "surname1": {
          "value": "string",
          "confidence": 0
        },
        "surname2": {
          "value": "string",
          "confidence": 0
        },
        "name": {
          "value": "string",
          "confidence": 0
        },
        "sex": {
          "value": "string",
          "confidence": 0
        },
        "date_of_birth": {
          "value": "string",
          "confidence": 0
        },
        "nationality": {
          "value": "string",
          "confidence": 0
        },
        "nationality_code": {
          "value": "string",
          "confidence": 0
        },
        "country_expedition": {
          "value": "string",
          "confidence": 0
        },
        "country": {
          "value": "string",
          "confidence": 0
        },
        "address": {
          "value": "string",
          "confidence": 0
        },
        "mrz": {
          "value": "string",
          "confidence": 0
        },
        "mrz_data": {
          "doc_type": "string",
          "serial_number": "string",
          "nation_code": "string",
          "reserve_number": "string",
          "date_of_birth": "string",
          "doc_expire_date": "string",
          "sex": "string",
          "nationality_code": "string",
          "name": "string",
          "surname1": "string",
          "surname2": "string",
          "checkdigits": {}
        },
        "validationChecks": { 
          "sidesMatch": "boolean",     // ambos lados pertenecen al mismo documento
          "validMRZ": "boolean",     // Validación algorítmica del mrz
          "expired": "boolean",     // valida si los documentos están vencidos
          "legalAge": "boolean",     // valida si el titular del documento es mayor de edad por ley
          "quality": "boolean",     // valida que los campos hayan sido capturados. 3 campos vacios o mas  y la fallta del doc_number y mrz deverán un false.
          "front":{
            "face_photo": "boolean", // Verifica que hay foto de la cara en el documento
            "document_aspect_ratio" : "boolena", // Verifica la proporción de las mediciones (alt x anch)
            "document_aspect_ratio_value": "number", // Valor de las proporciones (alt x anch)
            "document_backwhite_check": "boolean" // Verifica que el documento esta en blanco y negro
          },
          "back":{
            "char_distance" : "boolean", // Verifica la distancia entre caracteres
            "char_distance_value" : "number", // Valor de distancia entre caracteres
            "document_aspect_ratio": "boolean", // Verifica la proporción de las mediciones (alt x anch)
            "document_aspect_ratio_value": "number", // Valor de las proporciones (alt x anch)
            "document_backwhite_check": "boolean", // Verifica que el documento esta en blanco y negro
            "mrz_aspect_ratio": "boolean", // Verifica la proporción de las mediciones (alt x anch) del mrz
            "mrz_aspect_ratio_value": "number", // Valor de las proporciones (alt x anch) del mrz
            "mrz_characters_count_value": "number", // Cantidad de caracteres encontrados en el mrz
            "mrz_typography": "number" // Porcentaje de valided en similitud con la fuente ocrb
          }
        },
        "opt_data": {},
        "global_confidence": "boolean" // Media de todos los confidence obtenidos
    }
  },
  "error":{
    "code": "string",
    "message": "string"
  }
}

USAGE EXAMPLE

app.module.ts (Import in your app module)

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
 
import {AppComponent} from './app.component';
import {OcrPhotoModule} from 'ocr-photo';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [OcrPhotoModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CaptureFrameService } from 'ocr-photo';

enum MessageType {
  SHOW_DOCUMENT = 'Muestra tu documento de identidad',
  HOLD_DOCUMENT = 'No muevas el documento',
  CENTER_DOCUMENT = 'Centra el documento entre los márgenes',
  BRING_DOCUMENT_CLOSER = 'Acerca el documento ajustándolo a los márgenes'
}

enum ErrorOcr {
  DEVICES_NOT_FOUND_ERROR = '',
  TRACK_START_ERROR = '',
  CONSTRAINT_NOT_SATISFIED_ERROR = '',
  PERMISSION_DENIED_ERROR = '',
  TYPE_ERROR = '',
  GENERIC_ERROR = '',
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  public imageTaken: string;
  public imageToShow
  public processID : string;
  public frontFinish = false;
  public loading = false;
  public error = false; // Show error 

  public photoMessage = '';

  constructor(
    private captureFrameService:CaptureFrameService,
    private cdRef:ChangeDetectorRef,
    private sanitizer: DomSanitizer){}

  ngOnInit() {
    return null;
  }

  // TAKE A PHOTO MANUALY AND RETRIVE THE CAPTURE IN BASE64. (we save the photo in a variable )
  async flashFoto(){
    this.imageTaken = await this.captureFrameService.takeFrame() as any
    let objectURL = URL.createObjectURL(this.imageTaken);
    this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);
    console.log(this.imageTaken);
  }

  // SENDING THE PHOTO (FRONT) TO BE ANALYSE. The response can be the end response in case is a ONE-SIDE-DOCUMENT otherwise we will capture the uuid to continue with
  sendFrontPhoto(){
    this.loading = true;
    this.cdRef.detectChanges();
    this.captureFrameService.sendFront(this.imageTaken).then((res:any) => {
      console.log(res);
      if (res.uuid) this.processID = res.uuid
      this.frontFinish = true;
      this.imageTaken = '';
      this.loading = false;
      this.error = false;
      this.cdRef.detectChanges();
    }).catch((err)=>{
      this.loading = false;
      this.error = err;
      this.imageTaken = '';
      this.cdRef.detectChanges();
      console.warn(err)
    })
  }

  // SENDING THE PHOTO (BACK) TO BE ANALYSE. OBTAINING THE END RESPONSE WITH THE RESULTS
  sendBackPhoto(){
    this.loading = true;
    this.cdRef.detectChanges();
    this.captureFrameService.sendBack(this.imageTaken, this.processID).then((res) => {
      console.log(res);
      this.loading = false;
      this.error = false;
      this.cdRef.detectChanges();
    }).catch((err)=> {
      this.loading = false;
      this.error = err;
      this.imageTaken = '';
      this.cdRef.detectChanges();
      console.warn(err)
    })
  }

  // CAPTURE THE PHOTO FROM EVENT
  photoTaken(event){
    console.log('CAPTURING PHOTO', event);
    this.imageTaken = event;
    let objectURL = URL.createObjectURL(this.imageTaken);
    this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);
    this.cdRef.detectChanges();
  }


  handleError(error){
    console.log('ERROR');
    console.log(error);
  }

  //CAPTURE THE MESSAGE FROM EVENT
  public changeMessage(event){
    this.photoMessage = MessageType[event];;
    this.cdRef.detectChanges();
  }

    // IMAGE RESIDE BLOB OUTPUT
  async onChangeFile(event){
    const file = event.target.files[0];

    const newBlobImg = await new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = async (e:any) => {
         let blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
         const newBlob = await this.captureFrameService.compressImg(blob)
         resolve(newBlob)
      };
      reader.readAsArrayBuffer(file);
    })
    console.log(newBlobImg);
  }


}

app.component.html

<div class="main_container">
  <div>{{frontFinish ? 'Mostrar trasera' : 'Mostrar delantera'}}</div>

  <div class="video_box">
    <!-- // FOR THE COMPONENT TO WORK ALL THE THREE PARAMETERS MUST BE PASSED CORRECTLY -->
    <tm-ocr-photo
      #taken
      [env]="'local'"
      (photoTaken)="photoTaken($event)"
      (photoMessage)="changeMessage($event)"
      [token]="'c23...'"
      (error)="handleError($event)"
      [docType]="'ESP_DNI3'">
    </tm-ocr-photo>
  </div>

  <div>{{photoMessage}}</div>

  <button (click)="flashFoto()" style="margin-bottom:20px">Capturar imagen</button>

  <div *ngIf="imageTaken" class="photoShow">
    <img [src]="imageToShow" alt="">
    <button *ngIf="!frontFinish" (click)="taken.reset(); sendFrontPhoto()">Confirmar Front</button>
    <button *ngIf="frontFinish" (click)="sendBackPhoto()">Confirmar Back</button>
  </div>
  <div>{{error ? 'Calidad insuficiente' + error : ''}}</div>
</div>

<div *ngIf="loading" class="spinner_box">
  <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>

app.component.scss

.main_container{
  margin: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .video_box{
    width: 350px;
    height: auto;
  }

  .photoShow{
    width: 250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: 100%;
    }
  }
}

button{
  margin-top: 20px;
  cursor: pointer;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0.5px;
  width: 100%;
  max-width: 200px;
  height: 40px;
  border: none;
  background-color: #005db4d8 !important;
  color: white;
  &:focus{
    outline: none;
  }
  transition: all 200ms ;
}


////////SPINNER///

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #005db4d8;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #005db4d8 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner_box{

  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.2);;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}

tm-ocr-photo

OcrPhoto by TalentoMOBILE

INSTALATION

COMPONENT INPUTS

COMPONENT OUTPUTS

MESSAGE TYPES

ERROR TYPES

METHODS ACCESSIBLE FROM TS

FRONT_RESPONSE

BACK_RESPONSE

USAGE EXAMPLE

app.module.ts (Import in your app module)

app.component.ts

app.component.html

app.component.scss

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

tm-ocr-photo

OcrPhoto by TalentoMOBILE

INSTALATION

COMPONENT INPUTS

COMPONENT OUTPUTS

MESSAGE TYPES

ERROR TYPES

METHODS ACCESSIBLE FROM TS

FRONT_RESPONSE

BACK_RESPONSE

USAGE EXAMPLE

app.module.ts (Import in your app module)

app.component.ts

app.component.html

app.component.scss

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads