@regulaforensics/document-reader 7.1.301-rc

package/examples/ionic/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "document-reader",
+  "scripts": {
+    "setup": "scripts/setup.sh",
+    "ios": "scripts/ios.sh",
+    "android": "scripts/android.sh"
+  },
+  "dependencies": {
+    "@angular-devkit/build-angular": "^20.3.1",
+    "@angular/cli": "^20.3.1",
+    "@angular/common": "^20.3.0",
+    "@angular/compiler-cli": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/platform-browser-dynamic": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "@awesome-cordova-plugins/camera": "^8.1.0",
+    "@awesome-cordova-plugins/file": "^8.1.0",
+    "@ionic/angular": "^8.7.3",
+    "@ionic/cordova-builders": "^12.3.0",
+    "@regulaforensics/document-reader": "7.1.301-rc",
+    "@regulaforensics/document-reader-btdevice": "8.2.8-beta",
+    "@regulaforensics/document-reader-core-fullauthrfid": "8.3.10-rc",
+    "cordova-android": "^14.0.1",
+    "cordova-ios": "^7.1.1",
+    "cordova-plugin-camera": "^8.0.0",
+    "cordova-plugin-file": "^8.1.3",
+    "cordova-plugin-ionic-webview": "^5.0.1"
+  },
+  "cordova": {
+    "plugins": {
+      "@regulaforensics/document-reader": {},
+      "@regulaforensics/document-reader-core-fullauthrfid": {},
+      "@regulaforensics/document-reader-btdevice": {},
+      "cordova-plugin-file": {},
+      "cordova-plugin-camera": {},
+      "cordova-plugin-ionic-webview": {}
+    },
+    "platforms": [
+      "android",
+      "ios"
+    ]
+  }
+}

package/examples/ionic/scripts/android.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+if [[ $npm_config_o || $npm_config_open ]]; then
+    ionic cordova build android
+    studio platforms/android || open -a 'Android Studio' platforms/android
+else
+    ionic cordova run android
+fi

package/examples/ionic/scripts/ios.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+if [[ $npm_config_o || $npm_config_open ]]; then
+    ionic cordova prepare ios
+    open platforms/ios/Document.xcworkspace
+else
+    ionic cordova run ios
+fi

package/examples/ionic/scripts/setup.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -e
+
+npm install
+ionic cordova prepare || {
+    pod repo update
+    ionic cordova prepare
+}

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

@@ -0,0 +1,33 @@
+import { DocumentReader, InitConfig } from "@regulaforensics/document-reader"
+import { handleException, init, setStatus } from "../main"
+
+export const useBtDevice = false
+export const btDeviceName = "Regula 0000"
+
+export function setupBTDevice() {
+  var connectButton = document.getElementById("connect")!
+  connectButton.style.display = "flex"
+  connectButton.onclick = () => connect()
+  setStatus("Connect to a bluetooth device")
+}
+
+async function connect() {
+  setStatus("Searching for devices...")
+  if (await DocumentReader.instance.connectBluetoothDevice(btDeviceName)) {
+    await init()
+    DocumentReader.instance.functionality.useAuthenticator = true
+    document.getElementById("connect")!.style.display = "none"
+  } else
+    setStatus("Failed to connect")
+}
+
+export async function initializeWithBTDevice() {
+  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.tsx

@@ -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: string) {
+    document.getElementById("rfid-description")!.innerHTML = data
+}
+
+var currentProgress = -1
+function setProgress(next: number) {
+    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: boolean) {
+    document.getElementById("main")!.style.display = data ? "none" : "flex"
+    document.getElementById("custom-rfid")!.style.display = data ? "flex" : "none"
+}

package/examples/ionic/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/ionic/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/ionic/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/ionic/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "include": [
+    "*.tsx"
+  ],
+  "compilerOptions": {
+    "types": [],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "target": "es2022",
+    "jsx": "react-jsx",
+    "skipLibCheck": true, // Temp fix for https://github.com/ionic-team/ionic-framework/issues/30650
+  }
+}

package/examples/react_native/README.md

@@ -0,0 +1,22 @@
+# Regula Document Reader React Native demo application
+
+## 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)).
+3. Put `db.dat` file at `assets/` (you can get a trial database [here](https://client.regulaforensics.com/customer/databases))
+4. Execute `npm run setup` within this directory.
+5. Run the app: 
+  * IOS: `npm run ios`.
+  * 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. Just don't forget to make sure that Metro Bundler is running(`npm start`).
+
+## 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 your 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/react_native/app.config.ts

@@ -0,0 +1,49 @@
+import { ExpoConfig, ConfigContext } from 'expo/config'
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  slug: 'document-reader',
+  name: 'Document',
+  orientation: 'portrait',
+  icon: 'images/icon.png',
+  ios: {
+    bundleIdentifier: 'com.regula.example.dr.react',
+    infoPlist: {
+      NSCameraUsageDescription: 'To use camera',
+      NSPhotoLibraryUsageDescription: 'To use gallery',
+      NFCReaderUsageDescription: 'To use NFC',
+      NSBluetoothAlwaysUsageDescription: 'To use bluetooth',
+      'com.apple.developer.nfc.readersession.iso7816.select-identifiers': [
+        'A0000002471001',
+        'E80704007F00070302',
+        'A000000167455349474E',
+        'A0000002480100',
+        'A0000002480200',
+        'A0000002480300',
+        'A00000045645444C2D3031'
+      ]
+    },
+    entitlements: { 'com.apple.developer.nfc.readersession.formats': ['TAG'] },
+    appleTeamId: ''
+  },
+  android: {
+    package: 'com.regula.example.dr.react',
+    permissions: [
+      'android.permission.BLUETOOTH_CONNECT',
+      'android.permission.NFC'],
+    edgeToEdgeEnabled: true
+  },
+  plugins: [
+    ['expo-custom-assets', { assetsPaths: ['./assets'] }],
+    ['expo-build-properties', {
+      android: {
+        extraMavenRepos: [
+          { url: 'https://maven.regulaforensics.com/RegulaDocumentReader' },
+          { url: 'https://maven.regulaforensics.com/RegulaDocumentReader/Beta' },
+          { url: 'https://maven.regulaforensics.com/RegulaDocumentReader/Nightly' },
+          { url: 'https://maven.regulaforensics.com/RegulaDocumentReader/Stage' }
+        ]
+      }
+    }]
+  ]
+})

package/examples/react_native/index.html

@@ -0,0 +1,11 @@
+<meta name="viewport" content="initial-scale=1, user-scalable=no, viewport-fit=cover">
+<link rel="stylesheet" href="src/main.css">
+
+<div id="content" style="height: 100%"></div>
+
+<script>
+    fetch("src/main.html")
+        .then(response => response.text())
+        .then(html => document.getElementById("content").innerHTML = html)
+        .then(_ => window.ReactNativeWebView.postMessage(`{"id": "ready"}`))
+</script>