@regulaforensics/document-reader 8.2.186-beta → 8.3.242-beta

package/examples/cordova/www/src/main.css

@@ -1,8 +1,10 @@
 html,
 body {
-    width: 99%;
+    margin: 0;
+    width: 100%;
     height: 99vh;
     display: flex;
+    overflow: hidden;
     flex-direction: column;
 }
 
@@ -59,6 +61,7 @@ body {
     color: white;
     border: none;
     padding: 10px 20px;
+    justify-content: center;
     font-size: 16px;
     border-radius: 100px;
     cursor: pointer;
@@ -88,10 +91,12 @@ body {
     top: 1px;
 }
 
+.radio {
+    align-items: baseline;
+    padding: 15px;
+}
+
 input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     width: 20px;
     height: 20px;
     border: 2px solid black;
@@ -121,10 +126,9 @@ input[type="text"] {
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-.progress {
+#progress {
     width: 0%;
     height: 20px;
     background-color: #4285F4;
     border-radius: 5px;
-    transition: width 0.5s ease-in-out;
-}
+}

package/examples/cordova/www/src/main.html

@@ -7,50 +7,25 @@
         <div class="row">
             <div class="column" style="padding: 5px;">
                 <p>Portrait</p>
-                <img id="portrait-image" src="images/portrait.png" height="150px" width="150px">
+                <img id="portrait-image" src="images/portrait.png" height="160px" width="120px">
             </div>
             <div class="column" style="padding: 5px;">
                 <p>Document image</p>
-                <img id="document-image" src="images/document.png" height="150px" width="200px">
+                <img id="document-image" src="images/document.png" height="160px" width="200px">
             </div>
         </div>
-        <div id="scenario-container" class="column no-scroll"
-            style="margin-top: 15px; background-color: rgba(0, 0, 0, 0.03);">
-            <div id="scenarios" class="scroll">
-                <div class="row" style="align-items: baseline; padding: 15px;">
-                    <input type="radio" name="scenario" value="Aaa">
-                    <span style="width: 200px; padding-left: 5px;">Aaa</span>
-                </div>
-                <div class="row" style="align-items: baseline; padding: 15px;">
-                    <input type="radio" name="scenario" value="Aaa">
-                    <span style="width: 200px; padding-left: 5px;">Aaa</span>
-                </div>
-                <div class="row" style="align-items: baseline; padding: 15px;">
-                    <input type="radio" name="scenario" value="Aaa">
-                    <span style="width: 200px; padding-left: 5px;">Aaa</span>
-                </div>
-                <div class="row" style="align-items: baseline; padding: 15px;">
-                    <input type="radio" name="scenario" value="Aaa">
-                    <span style="width: 200px; padding-left: 5px;">Aaa</span>
-                </div>
-                <div class="row" style="align-items: baseline; padding: 15px;">
-                    <input type="radio" name="scenario" value="Aaa">
-                    <span style="width: 200px; padding-left: 5px;">Aaa</span>
-                </div>
-            </div>
+        <div id="scenario-container" class="column no-scroll" style="margin-top: 15px; background-color: rgba(0, 0, 0, 0.03);">
+            <div id="scenarios" class="scroll"></div>
         </div>
         <div class="row" style="width: 360px; padding-top: 15px;">
-            <span id="rfid-checkbox-description" style="font-size: 18px;">Process rfid reading</span>
-            <input id="rfid-checkbox" type="checkbox" style="margin-left: auto;" />
-        </div>
-        <div id="bt-device" class="row" style="display: none;">
-            <input type="text" placeholder="Regula 0000" />
-            <button class="button">Connect</button>
+            <span id="rfid-checkbox-description" style="font-size: 18px;width: 100%;">Process rfid reading(unavailable)</span>
+            <input id="rfid-checkbox" type="checkbox" style="margin-left: auto;" disabled />
         </div>
         <div class="row">
             <button id="scan" class="button">Scan document</button>
             <button id="recognize" class="button">Scan image</button>
         </div>
+        <button id="connect" class="button" style="width: 360px; display: none;">Connect</button>
         <div style="padding-top: 20px;"></div>
     </div>
     <div id="custom-rfid" class="column no-scroll" style="display: none;">

package/examples/cordova/www/src/main.js

@@ -1,50 +1,173 @@
-document.addEventListener('ready', onDeviceReady)
-async function onDeviceReady() {
-  DocumentReader = DocumentReaderPlugin.DocumentReader
-  InitConfig = DocumentReaderPlugin.InitConfig
+import { loadAsset, pickImage } from '../index.js'
+import { initializeWithBTDevice, setupBTDevice, useBtDevice } from './extra/bt_device.js'
+import { useRfidSelfHostedUI, rfidSelfHostedUI } from './extra/custom_rfid.js'
 
-  setStatus = (data) => document.getElementById("status").innerHTML = data
+var documentReader = DocumentReader.instance
+var selectedScenario
+var doRfid = false
+var isReadingRfid = false
 
-  documentReader = DocumentReader.instance
-  useBtDevice = false
-  ready = false
-  isReadingCustomRfid = false
+export async function init() {
+  if (!await initialize()) return
+  setScenarios(documentReader.availableScenarios)
+  setCanRfid(await documentReader.isRFIDAvailableForUse())
+  setStatus("Ready")
+}
 
-  document.getElementById("main").style.display = isReadingCustomRfid ? "none" : "flex"
-  document.getElementById("custom-rfid").style.display = isReadingCustomRfid ? "flex" : "none"
-  document.getElementById("bt-device").style.display = (useBtDevice && !ready) ? "flex" : "none"
+async function scan() {
+  if (!await documentReader.isReady()) return
+  clearResults()
+  documentReader.startScanner(
+    ScannerConfig.withScenario(selectedScenario),
+    handleCompletion,
+  )
+}
+
+async function recognize() {
+  if (!await documentReader.isReady()) return
+  var image = await pickImage()
+  if (image == null) return
 
-  init()
+  clearResults()
+  documentReader.recognize(
+    RecognizeConfig.withScenario(selectedScenario, { image: image }),
+    handleCompletion,
+  )
 }
 
-async function init() {
-  if (!await initialize()) return
-  setStatus("Ready")
+export function handleCompletion(action, results, error) {
+  handleException(error)
+  if (DocReaderAction.stopped(action) && !shouldRfid(results)) {
+    displayResults(results)
+  } else if (DocReaderAction.finished(action) && shouldRfid(results)) {
+    isReadingRfid = true
+    readRfid()
+  }
 }
 
-async function initialize() {
+export async function displayResults(results) {
+  isReadingRfid = false
+  clearResults()
+  if (results == null) return
+
+  var name = await results.textFieldValueByType(FieldType.SURNAME_AND_GIVEN_NAMES)
+  var docImage = await results.graphicFieldImageByType(GraphicFieldType.DOCUMENT_IMAGE)
+  var portrait = await results.graphicFieldImageByType(GraphicFieldType.PORTRAIT)
+  portrait = await results.graphicFieldImageByTypeSource(GraphicFieldType.PORTRAIT, ResultType.RFID_IMAGE_DATA) ?? portrait
+
+  setStatus(name)
+  setPortrait(portrait)
+  setDocImage(docImage)
+}
+
+var readRfid = () => {
+  documentReader.rfid(new RFIDConfig(handleCompletion))
+}
+
+function shouldRfid(results) {
+  return doRfid &&
+    !isReadingRfid &&
+    results != null && results.chipPage != 0
+}
+
+var initialize = async () => {
   setStatus("Initializing...")
 
-  var license = await loadAssetIfExists("regula.license")
+  var license = await loadAsset("regula.license")
   var initConfig = new InitConfig(license)
   var [success, error] = await documentReader.initialize(initConfig)
-  
-  if (!success && error != null) {
+
+  handleException(error)
+  return success
+}
+
+export function handleException(error) {
+  if (error != null) {
     setStatus(error.message)
     console.log(error.code + ": " + error.message)
   }
-  return success
 }
 
-async function loadAssetIfExists(path) {
-  path = cordova.file.applicationDirectory + "www/" + path
-  return new Promise((resolve, _) => {
-    window.resolveLocalFileSystemURL(path, (fileEntry) => {
-      fileEntry.file((file) => {
-        var reader = new FileReader()
-        reader.onloadend = function (_) { resolve(this.result) }
-        reader.readAsDataURL(file)
-      })
-    }, (_) => resolve(null))
+// --------------------------------------------------------------------------------------------------------------------
+
+var documentUIImage
+var portraitUIImage
+export function main() {
+  documentUIImage = document.getElementById("document-image")
+  portraitUIImage = document.getElementById("portrait-image")
+  document.getElementById("scan").onclick = () => scan()
+  document.getElementById("recognize").onclick = () => recognize()
+
+  // custom rfid
+  if (useRfidSelfHostedUI) readRfid = () => rfidSelfHostedUI()
+
+  // bt device
+  if (!useBtDevice) init()
+  else {
+    setupBTDevice()
+    initialize = initializeWithBTDevice
+  }
+}
+
+export function setStatus(data) {
+  if (data != null)
+    document.getElementById("status").innerHTML = data
+}
+
+function setPortrait(data) {
+  if (data != null)
+    portraitUIImage.src = "data:image/png;base64," + data
+}
+
+function setDocImage(data) {
+  if (data != null)
+    documentUIImage.src = "data:image/png;base64," + data
+}
+
+function clearResults() {
+  setStatus("Ready")
+  portraitUIImage.src = "images/portrait.png"
+  documentUIImage.src = "images/document.png"
+}
+
+function setCanRfid(data) {
+  var checkbox // implicitly any, since cordova sample is pure js
+  checkbox = document.getElementById('rfid-checkbox')
+  var checkboxDescription = document.getElementById("rfid-checkbox-description")
+  if (data) {
+    checkbox.disabled = false
+    checkboxDescription.innerHTML = "Process rfid reading"
+    var onclick = () => {
+      doRfid = !doRfid
+      checkbox.checked = doRfid
+    }
+    checkbox.onclick = onclick
+    checkboxDescription.onclick = onclick
+  }
+}
+
+function setScenarios(data) {
+  selectedScenario = Scenario.MRZ
+  var scenariosContainer = document.getElementById("scenarios")
+
+  data.forEach(scenario => {
+    var checked = selectedScenario == scenario.name ? "checked" : ""
+    var scenarioElement = `<div class="row radio">
+      <input type="radio" name="scenario" id="${scenario.name}" value="${scenario.name}" ${checked}>
+      <span id="${scenario.name}-caption" style="width: 200px; padding-left: 5px;">${scenario.caption}</span>
+    </div>`
+    scenariosContainer.insertAdjacentHTML("beforeend", scenarioElement)
+  })
+
+  data.forEach(scenario => {
+    var element
+    element = document.getElementById(scenario.name)
+    var elementCaption = document.getElementById(scenario.name + "-caption")
+    var onclick = () => {
+      selectedScenario = scenario.name
+      element.checked = true
+    }
+    element.onclick = onclick
+    elementCaption.onclick = onclick
   })
 }

package/examples/ionic/README.md

@@ -10,3 +10,13 @@
   * Android: `npm run android`.
 
 **Note**: this is just one way of running the app. You can also pass `-o` or `--open` argument to the command, and this will open Xcode/Android Studio, then run the app directly from the IDE. Overall, this is a more consistent way, so if you're having troubles running the app from terminal, try running it from the IDE.
+
+## Additional examples
+
+### Bluetooth device
+
+In order to connect to an external scanning device, change the `useBtDevice` constant to true in `src/extra/bt_device`, and set `btDeviceName` to the name of you device. After running the app, click `Connect`.
+
+### RFID self hosted UI
+
+This app also demonstraits how you can implement you own UI for the RFID reading process. To enable it, change the `useRfidSelfHostedUI` constant to true in `src/extra/custom_rfid`. Run the app and initiate RFID reading.

package/examples/ionic/config.xml

@@ -1,17 +1,24 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget android-packageName="com.regula.dr.fullauthrfid" ios-CFBundleIdentifier="regula.DocumentReader" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<widget android-packageName="com.regula.dr.fullauthrfid" ios-CFBundleIdentifier="regula.DocumentReader" version="1.0.0"
+    xmlns:android="http://schemas.android.com/apk/res/android">
     <name>DocumentReader</name>
     <icon src="src/images/icon.png" />
     <platform name="android">
+        <resource-file src="src/assets/db.dat" target="app/src/main/assets/Regula/db.dat"/>
         <preference name="orientation" value="portrait" />
-        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
-            <application android:usesCleartextTraffic="true" />
-        </edit-config>
         <preference name="android-minSdkVersion" value="24" />
         <preference name="android-targetSdkVersion" value="35" />
         <preference name="GradlePluginKotlinEnabled" value="true" />
+        <config-file parent="/*" target="AndroidManifest.xml">
+            <uses-permission android:name="android.permission.NFC" />
+            <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
+        </config-file>
+        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
+            <application android:usesCleartextTraffic="true" />
+        </edit-config>
     </platform>
     <platform name="ios">
+        <resource-file src="src/assets/db.dat" />
         <preference name="orientation" value="portrait" />
         <allow-intent href="itms:*" />
         <allow-intent href="itms-apps:*" />

package/examples/ionic/index.ts

@@ -2,14 +2,51 @@ import 'zone.js';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { BrowserModule } from '@angular/platform-browser'
 import { IonicModule, Platform } from '@ionic/angular'
-import { Dialogs } from '@awesome-cordova-plugins/dialogs/ngx'
-import { Camera } from '@awesome-cordova-plugins/camera/ngx'
-import { Main } from './src/main'
 import { NgModule } from '@angular/core'
 
+import { Component } from '@angular/core'
+import { File } from '@awesome-cordova-plugins/file'
+import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera/ngx'
+
+import { main } from './src/main'
+
+export async function loadAsset(path: string): Promise<string> {
+    var dir = await File.resolveDirectoryUrl(File.applicationDirectory + "www/assets")
+    var fileEntry = await File.getFile(dir, path, null)
+    var result = await new Promise<string>((resolve, _) => {
+        fileEntry.file(file => {
+            var reader = new FileReader()
+            reader.onloadend = (_) => resolve(reader.result as string)
+            reader.readAsDataURL(file)
+        })
+    })
+    return result
+}
+
+export async function pickImage(): Promise<string | null> {
+    return await cameraInstance.getPicture({
+        destinationType: DestinationType.DATA_URL,
+        mediaType: MediaType.PICTURE,
+        sourceType: PictureSourceType.PHOTOLIBRARY
+    })
+}
+
+var cameraInstance: Camera
+@Component({
+    selector: 'app-root',
+    templateUrl: 'src/main.html',
+    styleUrl: 'src/main.css'
+})
+class Main {
+    constructor(platform: Platform, camera: Camera) {
+        cameraInstance = camera
+        platform.ready().then(main)
+    }
+}
+
 @NgModule({
     bootstrap: [Main],
-    providers: [Platform, Dialogs, Camera],
+    providers: [Platform, Camera],
     imports: [BrowserModule, IonicModule.forRoot()]
 })
 class MainModule { }