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

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

@@ -1,4 +1,5 @@
-import { setupBTDevice, useBtDevice } from './extra/bt_device.js'
+import { loadAsset, pickImage } from '../index.js'
+import { initializeWithBTDevice, setupBTDevice, useBtDevice } from './extra/bt_device.js'
 import { useRfidSelfHostedUI, rfidSelfHostedUI } from './extra/custom_rfid.js'
 
 var documentReader = DocumentReader.instance
@@ -6,7 +7,7 @@ var selectedScenario
 var doRfid = false
 var isReadingRfid = false
 
-async function init() {
+export async function init() {
   if (!await initialize()) return
   setScenarios(documentReader.availableScenarios)
   setCanRfid(await documentReader.isRFIDAvailableForUse())
@@ -69,7 +70,7 @@ function shouldRfid(results) {
     results != null && results.chipPage != 0
 }
 
-async function initialize() {
+var initialize = async () => {
   setStatus("Initializing...")
 
   var license = await loadAsset("regula.license")
@@ -87,7 +88,26 @@ export function handleException(error) {
   }
 }
 
-// ui --------------------------------------------------------------------------------------------------------------------
+// --------------------------------------------------------------------------------------------------------------------
+
+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)
@@ -117,86 +137,37 @@ function setCanRfid(data) {
   if (data) {
     checkbox.disabled = false
     checkboxDescription.innerHTML = "Process rfid reading"
-    checkboxDescription.onclick = () => {
+    var onclick = () => {
       doRfid = !doRfid
       checkbox.checked = doRfid
     }
+    checkbox.onclick = onclick
+    checkboxDescription.onclick = onclick
   }
 }
 
-// not equal --------------------------------------------------------------------------------------------------------------------
-
-async function loadAsset(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)
-      })
-    })
-  })
-}
-
-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)
+  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)
+  })
 
-  return div
+  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

@@ -4,6 +4,7 @@
     <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" />
         <preference name="android-minSdkVersion" value="24" />
         <preference name="android-targetSdkVersion" value="35" />
@@ -17,6 +18,7 @@
         </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,10 +2,48 @@ import 'zone.js';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { BrowserModule } from '@angular/platform-browser'
 import { IonicModule, Platform } from '@ionic/angular'
-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, Camera],

package/examples/ionic/package.json

@@ -6,9 +6,9 @@
     "android": "scripts/android.sh"
   },
   "dependencies": {
-    "@regulaforensics/document-reader": "8.2.204-beta",
-    "@regulaforensics/document-reader-core-fullauthrfid": "8.2.8-beta",
-    "@regulaforensics/document-reader-btdevice": "8.2.8-beta",
+    "@regulaforensics/document-reader": "8.3.242-beta",
+    "@regulaforensics/document-reader-core-fullauthrfid": "8.3.9-beta",
+    "@regulaforensics/document-reader-btdevice": "8.3.10-beta",
     "@awesome-cordova-plugins/file": "6.14.0",
     "@awesome-cordova-plugins/camera": "6.14.0",
     "cordova-ios": "7.1.1",

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

@@ -1,26 +1,27 @@
 import { DocumentReader, InitConfig } from "@regulaforensics/document-reader"
-import { handleException, setStatus } from "../main"
+import { handleException, init, setStatus } from "../main"
 
 export const useBtDevice = false
-const btDeviceName = "Regula 0000"
+export const btDeviceName = "Regula 0000"
 
 export function setupBTDevice() {
-  document.getElementById("bt-device").style.display = "flex"
-  document.getElementById("connect").onclick = () => connect()
+  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 initialize()
+    await init()
     DocumentReader.instance.functionality.useAuthenticator = true
     document.getElementById("bt-device").style.display = "none"
   } else
     setStatus("Failed to connect")
 }
 
-async function initialize() {
+export async function initializeWithBTDevice() {
   setStatus("Initializing...")
 
   var initConfig = InitConfig.withBleDevice()

package/examples/ionic/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;

package/examples/ionic/src/main.html

@@ -14,10 +14,6 @@
                 <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>
@@ -29,6 +25,7 @@
             <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/ionic/src/main.ts

@@ -1,10 +1,6 @@
-import { Component } from '@angular/core'
-import { Platform } from '@ionic/angular'
-import { File } from '@awesome-cordova-plugins/file'
-import { Camera as CameraClass,DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera/ngx'
-
 import { DocumentReader, DocReaderAction, FieldType, GraphicFieldType, InitConfig, RecognizeConfig, ResultType, RFIDConfig, ScannerConfig, Scenario } from '@regulaforensics/document-reader'
-import { setupBTDevice, useBtDevice } from './extra/bt_device'
+import { loadAsset, pickImage } from '../index'
+import { initializeWithBTDevice, setupBTDevice, useBtDevice } from './extra/bt_device'
 import { useRfidSelfHostedUI, rfidSelfHostedUI } from './extra/custom_rfid'
 
 var documentReader = DocumentReader.instance
@@ -12,7 +8,7 @@ var selectedScenario
 var doRfid = false
 var isReadingRfid = false
 
-async function init() {
+export async function init() {
   if (!await initialize()) return
   setScenarios(documentReader.availableScenarios)
   setCanRfid(await documentReader.isRFIDAvailableForUse())
@@ -75,7 +71,7 @@ function shouldRfid(results) {
     results != null && results.chipPage != 0
 }
 
-async function initialize() {
+var initialize = async () => {
   setStatus("Initializing...")
 
   var license = await loadAsset("regula.license")
@@ -93,7 +89,26 @@ export function handleException(error) {
   }
 }
 
-// ui --------------------------------------------------------------------------------------------------------------------
+// --------------------------------------------------------------------------------------------------------------------
+
+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)
@@ -123,91 +138,37 @@ function setCanRfid(data) {
   if (data) {
     checkbox.disabled = false
     checkboxDescription.innerHTML = "Process rfid reading"
-    checkboxDescription.onclick = () => {
+    var onclick = () => {
       doRfid = !doRfid
       checkbox.checked = doRfid
     }
+    checkbox.onclick = onclick
+    checkboxDescription.onclick = onclick
   }
 }
 
-// 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, camera: CameraClass) {
-    Camera = camera
-    platform.ready().then(() => {
-      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)
+  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)
+  })
 
-  return div
+  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/react_native/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. 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 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/react_native/index.tsx

@@ -1,13 +1,16 @@
 import { registerRootComponent } from 'expo'
 import WebView from 'react-native-webview'
 import React from 'react'
-import { onload } from './src/main'
+import * as RNFS from 'react-native-fs'
+import { Platform } from 'react-native'
+import { launchImageLibrary } from 'react-native-image-picker'
+import { main } from './src/main'
 
 var webViewRef: any
 const onclicks: any = {}
 const onMessage = (json: any) => {
   const event = JSON.parse(json.nativeEvent.data)
-  if (event.id === "ready") onload()
+  if (event.id === "ready") main()
   if (event.id === "onclick") {
     onclicks[event.value]()
   }
@@ -35,8 +38,12 @@ export const document = {
             return true
           }
         })
+        if (prop === "insertAdjacentHTML") return (position: string, html: string) => {
+          webViewRef.injectJavaScript(`document.getElementById("${id}").insertAdjacentHTML('${position}', \`${html}\`); true`)
+          return true
+        }
         return undefined
-      },
+      }
     }
     )
   }
@@ -53,6 +60,21 @@ registerRootComponent(() =>
     onMessage={onMessage}
     source={require("./index.html")}
     scrollEnabled={false}
-    injectedJavaScript="document.body.addEventListener('touchmove', function(e) { e.preventDefault() }, { passive: false })"
+    overScrollMode={'content'}
   />
 )
+
+export async function loadAsset(path: string): Promise<string> {
+  if (Platform.OS === 'ios') path = RNFS.MainBundlePath + "/" + path
+  var readFile = Platform.OS === 'ios' ? RNFS.readFile : RNFS.readFileRes
+  return await readFile(path, 'base64')
+}
+
+export async function pickImage(): Promise<string | null> {
+  var response = await launchImageLibrary({
+    mediaType: 'photo',
+    selectionLimit: 1,
+    includeBase64: true
+  })
+  return response?.assets?.[0].base64!
+}