Introduction

 

This is a sample application for using MRZ Scanner, the main purpose is to serve as a guide for implementing and using the library. It contains examples of the scanner practical integration.  

To skip this guide, go to the link below to be redirected to the downloading page.

https://mrzscanner.com/download

For a more detailed description of the API methods and Integration guide, see the link below:

https://mrzscanner.com/v1.x/knowledge/for-ionic

Sample Project:

https://github.com/Realmrzscanner/MRZScanner-SampleApp-Ionic

 

Ionic Environment Setup

---

 

1. Install the Ionic CLI globally with npm:

$npm install -g ionic

 

2. Creating an Ionic app using a blank app template: 

ionic start Hotelapp blank

 

3. Run an Ionic project on a connected device:

ionic cordova run [<platform>] [options]

 

HTML & JS Structure

---

Home Screen

All the html elements are initialized in home.page.html file, while all the styling of the elements is done in the home.page.scss.

Below is an example of the starting three buttons, the "Guest Check In" button calls a method on click "goToNextWindow()", while the other two are dummy buttons.

The button click will take us to the "MainScreen"

<ion-button>Guest Check Out</ion-button>
<ion-button (click)="goToMainScreen()">Guest Check In</ion-button>
<ion-button>Manage Rooms</ion-button>

 

   

To navigate between screens, we've create $ionic g page PageName, this command creates a folder of PageName in pages which includes html,scss and ts file.

 

After that import this page in app.module.ts file and also in declaration and in Entries component

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MainPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
     MyApp,
     HomePage,
     MainPage
 
  ]

 

import NavController and newly created page in filename.ts file to create a constructor which uses the push method to navigate to the contact page.

import { NavController } from 'ionic-angular';
import { MainPage} from '../first-page/first - page';

constructor(public nav:NavController){
goToMainPage()
{
this.nav.push(MainPage);
}
}

 

Main Screen

---

The main screen is made out of a Scan Button to activate the scan and a sequence of TextAreas where it adds the results from the scan.

<ion-button id="startScanner">Start Scanning</ion-button>

<ion-item>
  <ion-label id="sunameTxt" position="stacked">SURNAME</ion-label>
  <ion-textarea clearOnEdit="true"></ion-textarea>
</ion-item>
<ion-item>
  <ion-label id="givenNameTxt" position="stacked">GIVEN NAME</ion-label>
  <ion-textarea clearOnEdit="true"></ion-textarea>
</ion-item>
<ion-item>
  <ion-label id="documentNumberTxt" position="stacked">DOCUMENT NUMBER</ion-label>
  <ion-textarea clearOnEdit="true"></ion-textarea>
</ion-item>

 

Implementation

---

1. Add the following code in your command line: $cordova plugin add../Desktop/MrzScanner.
    
2. To interact with the module, we've added a global variable var MrzScanner; (it needs to be specifically "MrzScanner") :

MrzScanner.startScanner(null,successfulMrzScan,null);

MrzScanner.setScannerType([0],null,null);

 

3. startScanner returns a callback key "successfulMrzScan" with the results object. Further on we add the results in the input type tag for a display. In case of a failed scan, an alert will display a message.

 startScanner1(){

  MrzScanner.startScanner(null,
   successfulMrzScan => {
    alert(
              "result "  + successfulMrzScan.document_type_raw + "\n"
              + successfulMrzScan.document_type_readable + "\n"
              + successfulMrzScan.issuing_country + "\n"
              + successfulMrzScan.surname + "\n"
              + successfulMrzScan.document_number + "\n"
              + successfulMrzScan.nationality + "\n"
              + successfulMrzScan.dob_raw + "\n"
              + successfulMrzScan.dob_readable + "\n"
              + successfulMrzScan.sex + "\n"
              + successfulMrzScan.est_issuing_date_raw + "\n"
              + successfulMrzScan.est_issuing_date_eadable + "\n"
              + successfulMrzScan.expiration_date_aw + "\n"
              + successfulMrzScan.expiration_date_eadable + "\n"
              + successfulMrzScan.given_names_readale + "\n"
              + successfulMrzScan.optionals);
  },null);
  }

 

 

4.Adding an ID image scan of the document by calling setScannerType to "1" and calling key successfulImageScan.

 function startScanner1(){
        debugger;
        MrzScanner.setScannerType([1],null, null);
        MrzScanner.startScanner(null,successfulImageScan,null);
    }

The image is received as a base64 string and it needs to decoded before displaying in a view

 

 function successfulImageScan(successfulScanWithDocumentImage){
        debugger;
        
        var image = document.getElementById("scanImage");
        image.img = "data:image/png;base64," + successfulScanWithDocumentImage;
        
        
    }