@regulaforensics/document-reader 9.9.1147-nightly → 9.9.1155-beta

package/examples/capacitor-cocoapods/src/main.css

@@ -0,0 +1,148 @@
+html,
+body {
+    margin: 0;
+    width: 100%;
+    height: 99vh;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+/* Prevent text selection */
+* {
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -webkit-user-drag: none !important;
+    -webkit-touch-callout: none !important;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.header {
+    text-align: center;
+    padding-top: 80px;
+    margin-top: -10px;
+    background-color: rgba(0, 0, 0, 0.03);
+    font-weight: 600;
+    font-size: 18px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.sub-header {
+    background-color: rgba(0, 0, 0, 0.03); 
+    width: 100%; 
+    padding-top: 13px; 
+    text-align: center; 
+    font-weight: 550; 
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.divider {
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.075);
+    margin-top: 13px;
+}
+
+.scroll {
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.no-scroll {
+    flex-grow: 1;
+    overflow-y: hidden;
+}
+
+.button {
+    width: 175px;
+    height: 40px;
+    margin: 5px;
+    margin-top: 10px;
+    background-color: #4285F4;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.button:active {
+    position: relative;
+    top: 1px;
+}
+
+.text-button {
+    background: none;
+    border: none;
+    color: #2196f3;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 5px;
+}
+
+.text-button:active {
+    position: relative;
+    top: 1px;
+}
+
+.radio {
+    align-items: baseline;
+    padding: 15px;
+}
+
+input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    border: 2px solid black;
+    background-color: white;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
+input[type="text"] {
+    width: 173px;
+    height: 40px;
+    font-size: 15px;
+    margin: 5px;
+    border-radius: 100px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-top: 10px;
+}
+
+.progress-bar {
+    width: 75%;
+    padding: 3px;
+    margin-top: 40px;
+    background-color: #eee;
+    border-radius: 8px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+#progress {
+    width: 0%;
+    height: 20px;
+    background-color: #4285F4;
+    border-radius: 5px;
+}

package/examples/capacitor-cocoapods/src/main.html

@@ -0,0 +1,38 @@
+<div class="column" style="height: 100%">
+    <div class="column header">
+        <span id="status">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="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>
+        <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;">
+        <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; padding-bottom: 100px;">X</button>
+    </div>
+</div>

package/examples/capacitor-cocoapods/src/main.tsx

@@ -0,0 +1,172 @@
+import { DocumentReader, DocReaderAction, FieldType, GraphicFieldType, InitConfig, RecognizeConfig, ResultType, RFIDConfig, ScannerConfig, Scenario, Results, DocReaderException, DocReaderScenario } from '@regulaforensics/document-reader'
+import { loadAsset, pickImage } from '../index'
+import { initializeWithBTDevice, setupBTDevice, useBtDevice } from './extra/bt_device'
+import { useRfidSelfHostedUI, rfidSelfHostedUI } from './extra/custom_rfid'
+
+var documentReader = DocumentReader.instance
+var selectedScenario = Scenario.MRZ
+var doRfid = false
+var isReadingRfid = false
+
+export 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: DocReaderAction, results: Results | null, error: DocReaderException | null) {
+  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: Results | null) {
+  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: Results | null) {
+  return doRfid &&
+    !isReadingRfid &&
+    results != null && results.chipPage != 0
+}
+
+var initialize = async () => {
+  setStatus("Initializing...")
+
+  var license = await loadAsset("regula.license")
+  var initConfig = new InitConfig(license)
+  initConfig.delayedNNLoad = true
+  var [success, error] = await documentReader.initialize(initConfig)
+
+  handleException(error)
+  return success
+}
+
+export function handleException(error: DocReaderException | null) {
+  if (error != null) {
+    setStatus(error.message)
+    console.log(error.code + ": " + error.message)
+  }
+}
+
+// --------------------------------------------------------------------------------------------------------------------
+
+export function main() {
+  documentUIImage = document.getElementById("document-image") as HTMLImageElement
+  portraitUIImage = document.getElementById("portrait-image") as HTMLImageElement
+  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: string | null) {
+  if (data != null)
+    document.getElementById("status")!.innerHTML = data
+}
+
+var portraitUIImage: HTMLImageElement
+function setPortrait(data: string | null) {
+  if (data != null)
+    portraitUIImage.src = "data:image/png;base64," + data
+}
+
+var documentUIImage: HTMLImageElement
+function setDocImage(data: string | null) {
+  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: boolean) {
+  var checkbox = document.getElementById('rfid-checkbox') as HTMLInputElement
+  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: DocReaderScenario[]) {
+  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 = document.getElementById(scenario.name) as HTMLInputElement
+    var elementCaption = document.getElementById(scenario.name + "-caption")!
+    var onclick = () => {
+      selectedScenario = scenario.name as Scenario
+      element.checked = true
+    }
+    element.onclick = onclick
+    elementCaption.onclick = onclick
+  })
+}

package/examples/capacitor-cocoapods/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}

package/examples/capacitor-cocoapods/vite.config.ts

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'src/main.html',
+          dest: '.'
+        }
+      ]
+    })],
+  build: { outDir: 'www' }
+})

package/examples/ionic/README.md

@@ -1,5 +1,7 @@
 # Regula Document Reader Ionic demo application
 
+Requires Node.js 22+, Xcode 26+, Android Studio with JDK 17 and Android SDK 36.
+
 ## How to build demo application
 1. Download or the clone current repository using the command `git clone https://github.com/regulaforensics/npm-document-reader.git`.
 2. Put `regula.license` file at `assets/` (you can get a trial license [here](https://client.regulaforensics.com)).

package/examples/ionic/config.xml

@@ -18,7 +18,7 @@
     </platform>
     <platform name="ios">
         <resource-file src="assets/db.dat" />
-        <preference name="deployment-target" value="14.0" />
+        <preference name="deployment-target" value="15.0" />
         <preference name="orientation" value="portrait" />
         <allow-intent href="itms:*" />
         <allow-intent href="itms-apps:*" />

package/examples/ionic/index.tsx

@@ -1,8 +1,9 @@
 import 'zone.js';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { BrowserModule } from '@angular/platform-browser'
-import { IonicModule, Platform } from '@ionic/angular'
-import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular/lazy'
+import { Platform } from '@ionic/angular'
+import { NgModule, provideZoneChangeDetection } from '@angular/core'
 
 import { Component } from '@angular/core'
 import { File } from '@awesome-cordova-plugins/file'
@@ -34,6 +35,7 @@ export async function pickImage(): Promise<string | null> {
 var cameraInstance: Camera
 @Component({
     selector: 'app-root',
+    standalone: false,
     templateUrl: 'src/main.html',
     styleUrl: 'src/main.css'
 })
@@ -50,9 +52,12 @@ class Main {
 
 @NgModule({
     bootstrap: [Main],
+    declarations: [Main],
     providers: [Platform, Camera],
     imports: [BrowserModule, IonicModule.forRoot()]
 })
 class MainModule { }
 
-platformBrowserDynamic().bootstrapModule(MainModule)
+platformBrowserDynamic().bootstrapModule(MainModule, {
+    applicationProviders: [provideZoneChangeDetection()]
+})