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

package/examples/ionic/package.json

@@ -6,17 +6,15 @@
     "android": "scripts/android.sh"
   },
   "dependencies": {
-    "@regulaforensics/document-reader": "8.2.186-beta",
+    "@regulaforensics/document-reader": "8.2.204-beta",
     "@regulaforensics/document-reader-core-fullauthrfid": "8.2.8-beta",
     "@regulaforensics/document-reader-btdevice": "8.2.8-beta",
     "@awesome-cordova-plugins/file": "6.14.0",
     "@awesome-cordova-plugins/camera": "6.14.0",
-    "@awesome-cordova-plugins/dialogs": "6.14.0",
     "cordova-ios": "7.1.1",
     "cordova-android": "13.0.0",
     "cordova-plugin-file": "8.1.3",
     "cordova-plugin-camera": "8.0.0",
-    "cordova-plugin-dialogs": "2.0.2",
     "cordova-plugin-ionic-webview": "^5.0.0",
     "@angular/cli": "19.2.0",
     "@angular/core": "19.2.0",
@@ -36,7 +34,6 @@
       "@regulaforensics/document-reader-btdevice": {},
       "cordova-plugin-file": {},
       "cordova-plugin-camera": {},
-      "cordova-plugin-dialogs": {},
       "cordova-plugin-ionic-webview": {}
     },
     "platforms": [

package/examples/ionic/src/extra/bt_device.ts

@@ -0,0 +1,32 @@
+import { DocumentReader, InitConfig } from "@regulaforensics/document-reader"
+import { handleException, setStatus } from "../main"
+
+export const useBtDevice = false
+const btDeviceName = "Regula 0000"
+
+export function setupBTDevice() {
+  document.getElementById("bt-device").style.display = "flex"
+  document.getElementById("connect").onclick = () => connect()
+  setStatus("Connect to a bluetooth device")
+}
+
+async function connect() {
+  setStatus("Searching for devices...")
+  if (await DocumentReader.instance.connectBluetoothDevice(btDeviceName)) {
+    await initialize()
+    DocumentReader.instance.functionality.useAuthenticator = true
+    document.getElementById("bt-device").style.display = "none"
+  } else
+    setStatus("Failed to connect")
+}
+
+async function initialize() {
+  setStatus("Initializing...")
+
+  var initConfig = InitConfig.withBleDevice()
+  initConfig.delayedNNLoad = true
+  var [success, error] = await DocumentReader.instance.initialize(initConfig)
+
+  handleException(error)
+  return success
+}

package/examples/ionic/src/extra/custom_rfid.ts

@@ -0,0 +1,61 @@
+import { DocReaderAction, DocumentReader, RFIDConfig, RFIDDataFileType, RFIDNotificationCodes } from "@regulaforensics/document-reader"
+import { displayResults, setStatus } from "../main"
+
+export const useRfidSelfHostedUI = false
+
+export function rfidSelfHostedUI() {
+    var config = RFIDConfig.withoutUI((action, results, _) => {
+        if (DocReaderAction.stopped(action)) stop()
+        if (DocReaderAction.finished(action)) displayResults(results)
+        if (DocReaderAction.interrupted(action)) setStatus("Error reading RFID")
+    })
+
+    config.onProgress = async (notification) => {
+        if (notification.progress == 1) return
+        if (notification.notificationCode == RFIDNotificationCodes.PCSC_READING_DATAGROUP)
+            setDescription(await RFIDDataFileType.getTranslation(notification.dataFileType))
+        setStatus("Reading RFID")
+        setProgress(notification.progress)
+    }
+
+    setup()
+    DocumentReader.instance.rfid(config)
+}
+
+function setup() {
+    setStatus("Reading RFID")
+    setDescription("Place your phone on top of the NFC tag")
+    setProgress(-1)
+    currentProgress = -1
+    setShowing(true)
+    document.getElementById("cancel-rfid").onclick = () => stop()
+}
+
+function stop() {
+    DocumentReader.instance.stopRFIDReader()
+    displayResults(null)
+    setShowing(false)
+}
+
+function setDescription(data) {
+    document.getElementById("rfid-description").innerHTML = data
+}
+
+var currentProgress = -1
+function setProgress(next) {
+    var progress = document.getElementById("progress")
+    // make progress bar look better
+    if (next == 0) return // ignore idle 0s, leave progress at 100 while its not moving
+    if (next < currentProgress) next = 0 // move to 0 if progress finaly started moving
+    if (next >= 95) next = 100 // rfid never returns 100 and it looks ugly, fix it
+    if (next < currentProgress) progress.style.transition = 'none' // instantly reset progress
+    else progress.style.transition = 'width 0.5s' // smoothly increase progress
+
+    progress.style.width = next + "%"
+    currentProgress = next
+}
+
+function setShowing(data) {
+    document.getElementById("main").style.display = data ? "none" : "flex"
+    document.getElementById("custom-rfid").style.display = data ? "flex" : "none"
+}

package/examples/ionic/src/main.css

@@ -88,10 +88,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 +123,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/ionic/src/main.html

@@ -1,63 +1,41 @@
 <div class="column" style="height: 100%">
-  <div class="column header">
-      <span id="status" class="title">Loading...</span>
-      <div class="column divider"></div>
-  </div>
-  <div id="main" class="column no-scroll">
-      <div class="row">
-          <div class="column" style="padding: 5px;">
-              <p>Portrait</p>
-              <img id="portrait-image" src="images/portrait.png" height="150px" width="150px">
-          </div>
-          <div class="column" style="padding: 5px;">
-              <p>Document image</p>
-              <img id="document-image" src="images/document.png" height="150px" 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>
-      </div>
-      <div class="row">
-          <button id="scan" class="button">Scan document</button>
-          <button id="recognize" class="button">Scan image</button>
-      </div>
-      <div style="padding-top: 20px;"></div>
-  </div>
-  <div id="custom-rfid" class="column no-scroll" style="display: none;">
-      <span id="rfid-description" style="font-size: 22px">Place your phone on top of the NFC tag</span>
-      <div class="progress-bar">
-          <div id="progress"></div>
-      </div>
-      <button id="cancel-rfid" class="text-button" style="margin-top: 50px;">X</button>
-  </div>
+    <div class="column header">
+        <span id="status" class="title">Loading...</span>
+        <div class="column divider"></div>
+    </div>
+    <div id="main" class="column no-scroll">
+        <div class="row">
+            <div class="column" style="padding: 5px;">
+                <p>Portrait</p>
+                <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="160px" width="200px">
+            </div>
+        </div>
+        <div id="bt-device" class="row" style="display: none;">
+            <input type="text" placeholder="Regula 0000" />
+            <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>
+            <button id="recognize" class="button">Scan image</button>
+        </div>
+        <div style="padding-top: 20px;"></div>
+    </div>
+    <div id="custom-rfid" class="column no-scroll" style="display: none;">
+        <span id="rfid-description" style="font-size: 22px">Place your phone on top of the NFC tag</span>
+        <div class="progress-bar">
+            <div id="progress"></div>
+        </div>
+        <button id="cancel-rfid" class="text-button" style="margin-top: 50px;">X</button>
+    </div>
 </div>

package/examples/ionic/src/main.ts

@@ -1,66 +1,213 @@
 import { Component } from '@angular/core'
-import { Dialogs } from '@awesome-cordova-plugins/dialogs/ngx'
-import { File } from '@awesome-cordova-plugins/file'
-import { Camera } from '@awesome-cordova-plugins/camera/ngx'
 import { Platform } from '@ionic/angular'
-import { DocumentReader, InitConfig } from '@regulaforensics/document-reader'
+import { File } from '@awesome-cordova-plugins/file'
+import { Camera as CameraClass,DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera/ngx'
 
-var useBtDevice = false
-var ready = false
-var isReadingCustomRfid = false
+import { DocumentReader, DocReaderAction, FieldType, GraphicFieldType, InitConfig, RecognizeConfig, ResultType, RFIDConfig, ScannerConfig, Scenario } from '@regulaforensics/document-reader'
+import { setupBTDevice, useBtDevice } from './extra/bt_device'
+import { useRfidSelfHostedUI, rfidSelfHostedUI } from './extra/custom_rfid'
+
+var documentReader = DocumentReader.instance
+var selectedScenario
+var doRfid = false
+var isReadingRfid = false
 
 async function init() {
   if (!await initialize()) return
+  setScenarios(documentReader.availableScenarios)
+  setCanRfid(await documentReader.isRFIDAvailableForUse())
   setStatus("Ready")
 }
 
+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
+
+  clearResults()
+  documentReader.recognize(
+    RecognizeConfig.withScenario(selectedScenario, { image: image }),
+    handleCompletion,
+  )
+}
+
+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 config = new InitConfig(license)
-  var [success, error] = await documentReader.initialize(config)
-  
-  if (!success && error != null) {
+  var license = await loadAsset("regula.license")
+  var initConfig = new InitConfig(license)
+  var [success, error] = await documentReader.initialize(initConfig)
+
+  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: string): Promise<string | null> {
-  try {
-    var dir = await File.resolveDirectoryUrl(File.applicationDirectory + "www/assets")
-    var fileEntry = await File.getFile(dir, path, null)
-    var result = await new Promise<string | null>((resolve, _) => {
-      fileEntry.file(file => {
-        var reader = new FileReader()
-        reader.onloadend = (_) => resolve(reader.result as string)
-        reader.readAsDataURL(file)
-      }, _ => resolve(null))
-    })
-    return result
-  } catch (_) {
-    return null
+// 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
+    }
   }
 }
 
-var documentReader = DocumentReader.instance
-var setStatus = (data: string) => document.getElementById("status").innerHTML = data
+// not equal --------------------------------------------------------------------------------------------------------------------
 
+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
+}
+
+async function pickImage(): Promise<string | null> {
+  return await Camera.getPicture({
+    destinationType: DestinationType.DATA_URL,
+    mediaType: MediaType.PICTURE,
+    sourceType: PictureSourceType.PHOTOLIBRARY
+  })
+}
+
+var Camera: CameraClass
+var documentUIImage
+var portraitUIImage
 @Component({
   selector: 'app-root',
   templateUrl: 'main.html',
   styleUrl: 'main.css'
 })
 export class Main {
-  constructor(platform: Platform, dialogs: Dialogs, camera: Camera) {
+  constructor(platform: Platform, camera: CameraClass) {
+    Camera = camera
     platform.ready().then(() => {
-      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"
-
-      init()
-    });
+      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/react_native/app.config.ts

@@ -28,7 +28,9 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   },
   android: {
     package: 'com.regula.dr.fullauthrfid',
-    permissions: ['android.permission.BLUETOOTH_CONNECT'],
+    permissions: [
+      'android.permission.BLUETOOTH_CONNECT',
+      'android.permission.NFC'],
     adaptiveIcon: {
       foregroundImage: './images/icon/adaptive-icon.png',
       backgroundColor: '#ffffff'

package/examples/react_native/index.tsx

@@ -1,5 +1,6 @@
 import { registerRootComponent } from 'expo'
 import WebView from 'react-native-webview'
+import React from 'react'
 import { onload } from './src/main'
 
 var webViewRef: any
@@ -24,13 +25,13 @@ export const document = {
             }; true
           `)
         } else
-          webViewRef.injectJavaScript(`document.getElementById("${id}").${prop} = "${value}"; true`)
+          webViewRef.injectJavaScript(`document.getElementById("${id}").${prop} = ${parseValue(value)}; true`)
         return true
       },
       get(_, prop: string) {
         if (prop === "style") return new Proxy({}, {
           set(_, styleProp: string, value) {
-            webViewRef.injectJavaScript(`document.getElementById("${id}").style.${styleProp} = "${value}"; true`)
+            webViewRef.injectJavaScript(`document.getElementById("${id}").style.${styleProp} = ${parseValue(value)}; true`)
             return true
           }
         })
@@ -41,6 +42,11 @@ export const document = {
   }
 }
 
+function parseValue(value: any) {
+  if (value !== true && value !== false) return `"${value}"`
+  return value
+}
+
 registerRootComponent(() =>
   <WebView
     ref={ref => { webViewRef = ref }}

package/examples/react_native/package.json

@@ -8,7 +8,7 @@
     "start": "expo start"
   },
   "dependencies": {
-    "@regulaforensics/document-reader": "8.2.186-beta",
+    "@regulaforensics/document-reader": "8.2.204-beta",
     "@regulaforensics/document-reader-core-fullauthrfid": "8.2.8-beta",
     "@regulaforensics/document-reader-btdevice": "8.2.8-beta",
     "react-native": "0.79.2",

package/examples/react_native/src/extra/bt_device.tsx

@@ -0,0 +1,33 @@
+import { document } from '../../index'
+import { DocumentReader, InitConfig } from "@regulaforensics/document-reader"
+import { handleException, setStatus } from "../main"
+
+export const useBtDevice = false
+const btDeviceName = "Regula 0000"
+
+export function setupBTDevice() {
+  document.getElementById("bt-device").style.display = "flex"
+  document.getElementById("connect").onclick = () => connect()
+  setStatus("Connect to a bluetooth device")
+}
+
+async function connect() {
+  setStatus("Searching for devices...")
+  if (await DocumentReader.instance.connectBluetoothDevice(btDeviceName)) {
+    await initialize()
+    DocumentReader.instance.functionality.useAuthenticator = true
+    document.getElementById("bt-device").style.display = "none"
+  } else
+    setStatus("Failed to connect")
+}
+
+async function initialize() {
+  setStatus("Initializing...")
+
+  var initConfig = InitConfig.withBleDevice()
+  initConfig.delayedNNLoad = true
+  var [success, error] = await DocumentReader.instance.initialize(initConfig)
+
+  handleException(error)
+  return success
+}

package/examples/react_native/src/extra/custom_rfid.tsx

@@ -0,0 +1,62 @@
+import { document } from '../../index'
+import { DocReaderAction, DocumentReader, RFIDConfig, RFIDDataFileType, RFIDNotificationCodes } from "@regulaforensics/document-reader"
+import { displayResults, setStatus } from "../main"
+
+export const useRfidSelfHostedUI = false
+
+export function rfidSelfHostedUI() {
+    var config = RFIDConfig.withoutUI((action, results, _) => {
+        if (DocReaderAction.stopped(action)) stop()
+        if (DocReaderAction.finished(action)) displayResults(results)
+        if (DocReaderAction.interrupted(action)) setStatus("Error reading RFID")
+    })
+
+    config.onProgress = async (notification) => {
+        if (notification.progress == 1) return
+        if (notification.notificationCode == RFIDNotificationCodes.PCSC_READING_DATAGROUP)
+            setDescription(await RFIDDataFileType.getTranslation(notification.dataFileType))
+        setStatus("Reading RFID")
+        setProgress(notification.progress)
+    }
+
+    setup()
+    DocumentReader.instance.rfid(config)
+}
+
+function setup() {
+    setStatus("Reading RFID")
+    setDescription("Place your phone on top of the NFC tag")
+    setProgress(-1)
+    currentProgress = -1
+    setShowing(true)
+    document.getElementById("cancel-rfid").onclick = () => stop()
+}
+
+function stop() {
+    DocumentReader.instance.stopRFIDReader()
+    displayResults(null)
+    setShowing(false)
+}
+
+function setDescription(data) {
+    document.getElementById("rfid-description").innerHTML = data
+}
+
+var currentProgress = -1
+function setProgress(next) {
+    var progress = document.getElementById("progress")
+    // make progress bar look better
+    if (next == 0) return // ignore idle 0s, leave progress at 100 while its not moving
+    if (next < currentProgress) next = 0 // move to 0 if progress finaly started moving
+    if (next >= 95) next = 100 // rfid never returns 100 and it looks ugly, fix it
+    if (next < currentProgress) progress.style.transition = 'none' // instantly reset progress
+    else progress.style.transition = 'width 0.5s' // smoothly increase progress
+
+    progress.style.width = next + "%"
+    currentProgress = next
+}
+
+function setShowing(data) {
+    document.getElementById("main").style.display = data ? "none" : "flex"
+    document.getElementById("custom-rfid").style.display = data ? "flex" : "none"
+}