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

package/examples/ionic/src/extra/{bt_device.ts → bt_device.tsx}

@@ -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"
+    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/extra/{custom_rfid.ts → custom_rfid.tsx}

@@ -28,7 +28,7 @@ function setup() {
     setProgress(-1)
     currentProgress = -1
     setShowing(true)
-    document.getElementById("cancel-rfid").onclick = () => stop()
+    document.getElementById("cancel-rfid")!.onclick = () => stop()
 }
 
 function stop() {
@@ -37,13 +37,13 @@ function stop() {
     setShowing(false)
 }
 
-function setDescription(data) {
-    document.getElementById("rfid-description").innerHTML = data
+function setDescription(data: string) {
+    document.getElementById("rfid-description")!.innerHTML = data
 }
 
 var currentProgress = -1
-function setProgress(next) {
-    var progress = document.getElementById("progress")
+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
@@ -55,7 +55,7 @@ function setProgress(next) {
     currentProgress = next
 }
 
-function setShowing(data) {
-    document.getElementById("main").style.display = data ? "none" : "flex"
-    document.getElementById("custom-rfid").style.display = data ? "flex" : "none"
+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

@@ -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.tsx

@@ -0,0 +1,171 @@
+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)
+  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)
+  }
+}
+
+// --------------------------------------------------------------------------------------------------------------------
+
+var documentUIImage: HTMLImageElement
+var portraitUIImage: HTMLImageElement
+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
+}
+
+function setPortrait(data: string | null) {
+  if (data != null)
+    portraitUIImage.src = "data:image/png;base64," + data
+}
+
+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

@@ -1,12 +1,13 @@
 {
   "include": [
-    "*.ts"
+    "*.tsx"
   ],
   "compilerOptions": {
     "types": [],
     "module": "esnext",
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "target": "es2022"
+    "target": "es2022",
+    "jsx": "react-jsx"
   }
 }

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,19 +1,22 @@
 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]()
   }
 }
 
-export const document = {
+const document = {
   getElementById(id: string): any {
     return new Proxy({}, {
       set(_, prop: string, 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
-      },
+      }
     }
     )
   }
@@ -47,12 +54,28 @@ function parseValue(value: any) {
   return value
 }
 
+(globalThis as any).document = document;
 registerRootComponent(() =>
   <WebView
     ref={ref => { webViewRef = ref }}
     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!
+}