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

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

@@ -7,45 +7,23 @@
         <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>
-        <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>
+            <button id="connect" class="button">Connect</button>
+        </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;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>

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

@@ -1,42 +1,132 @@
-document.addEventListener('ready', onDeviceReady)
-async function onDeviceReady() {
-  DocumentReader = DocumentReaderPlugin.DocumentReader
-  InitConfig = DocumentReaderPlugin.InitConfig
+import { 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
+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()
+  }
+}
+
+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
 }
 
 async function initialize() {
   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) {
+// ui --------------------------------------------------------------------------------------------------------------------
+
+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"
+    checkboxDescription.onclick = () => {
+      doRfid = !doRfid
+      checkbox.checked = doRfid
+    }
+  }
+}
+
+// not equal --------------------------------------------------------------------------------------------------------------------
+
+async function loadAsset(path) {
   path = cordova.file.applicationDirectory + "www/" + path
   return new Promise((resolve, _) => {
     window.resolveLocalFileSystemURL(path, (fileEntry) => {
@@ -45,6 +135,68 @@ async function loadAssetIfExists(path) {
         reader.onloadend = function (_) { resolve(this.result) }
         reader.readAsDataURL(file)
       })
-    }, (_) => resolve(null))
+    })
+  })
+}
+
+function pickImage() {
+  return new Promise((resolve, _) => {
+    navigator.camera.getPicture(
+      (imageData) => resolve(imageData),
+      (_) => resolve(null),
+      {
+        destinationType: Camera.DestinationType.DATA_URL,
+        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
+        mediaType: Camera.MediaType.PICTURE
+      }
+    )
   })
 }
+
+var documentUIImage
+var portraitUIImage
+document.addEventListener('ready', () => {
+  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()
+})
+
+// not resolved --------------------------------------------------------------------------------------------------------------------
+
+function setScenarios(data) {
+  selectedScenario = Scenario.MRZ
+  const scenariosContainer = document.getElementById("scenarios")
+  data.forEach(scenario => scenariosContainer.appendChild(createScenarioElement(scenario)))
+}
+
+function createScenarioElement(scenario) {
+  const div = document.createElement('div')
+  div.className = 'row radio'
+
+  const input = document.createElement('input')
+  input.type = 'radio'
+  input.name = 'scenario'
+  input.value = scenario.name
+  input.checked = scenario.name === selectedScenario
+
+  const span = document.createElement('span')
+  span.style.width = '200px'
+  span.style.paddingLeft = '5px'
+  span.textContent = scenario.caption
+
+  input.onclick = () => selectedScenario = scenario.name
+  span.onclick = () => input.click()
+
+  div.appendChild(input)
+  div.appendChild(span)
+
+  return div
+}

package/examples/ionic/config.xml

@@ -1,15 +1,20 @@
 <?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">
         <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">
         <preference name="orientation" value="portrait" />

package/examples/ionic/index.ts

@@ -2,14 +2,13 @@ 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'
 
 @NgModule({
     bootstrap: [Main],
-    providers: [Platform, Dialogs, Camera],
+    providers: [Platform, Camera],
     imports: [BrowserModule, IonicModule.forRoot()]
 })
 class MainModule { }