@regulaforensics/face-sdk 7.2.429-beta → 7.2.433-rc

package/examples/ionic/src/main.css

@@ -1,19 +1,15 @@
 html,
 body {
-    margin: 0;
-    width: 100%;
+    width: 99%;
     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;
+.page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .column {
@@ -56,14 +52,10 @@ body {
     margin-top: 13px;
 }
 
-.scroll {
-    flex-grow: 1;
-    overflow-y: auto;
-}
-
 .no-scroll {
     flex-grow: 1;
     overflow-y: hidden;
+    overflow-x: hidden;
 }
 
 .button {
@@ -75,7 +67,6 @@ body {
     color: white;
     border: none;
     padding: 10px 20px;
-    justify-content: center;
     font-size: 16px;
     border-radius: 100px;
     cursor: pointer;
@@ -89,49 +80,4 @@ body {
 .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;
-}
-
-.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

@@ -1,4 +1,4 @@
-<div class="column" style="height: 100%">
+<div class="page">
     <div class="column header">
         <span id="status">Loading...</span>
         <div class="column divider"></div>

package/examples/ionic/src/{main.tsx → main.ts}

@@ -1,21 +1,15 @@
+import { Component } from '@angular/core'
+import { Dialogs } from '@awesome-cordova-plugins/dialogs/ngx'
+import { File } from '@awesome-cordova-plugins/file'
+import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera/ngx'
+import { Platform } from '@ionic/angular'
 import { FaceSDK, MatchFacesRequest, MatchFacesImage, InitConfig, LivenessSkipStep, ImageType, LivenessStatus, LivenessConfig } from '@regulaforensics/face-sdk'
-import { loadAssetIfExists, chooseOption, pickImage } from '../index'
-
-var faceSdk = FaceSDK.instance
-var image1: MatchFacesImage | null
-var image2: MatchFacesImage | null
 
 async function init() {
-  if (!await initializeReader()) return
+  if (!await initialize()) return
   setStatus("Ready")
 }
 
-async function startFaceCapture(position: number) {
-  var image = (await faceSdk.startFaceCapture()).image
-  if (image == null) return
-  setImage("data:image/png;base64," + image.image, image.imageType, position)
-}
-
 async function startLiveness() {
   var response = await faceSdk.startLiveness({
     config: new LivenessConfig({
@@ -46,15 +40,30 @@ async function matchFaces() {
   setStatus("Ready")
 }
 
-async function getImage(position: number) {
-  var source = await chooseOption()
-  if (source == null) return
-  if (source) startFaceCapture(position)
-  else {
-    var image = await pickImage()
-    if (image == null) return
-    setImage(image, ImageType.PRINTED, position)
+function clearResults() {
+  setStatus("Ready")
+  setSimilarityStatus("null")
+  setLivenessStatus("null")
+  resetImages()
+  image1 = null
+  image2 = null
+}
+
+// If 'regula.license' exists, init using license(enables offline match)
+// otherwise init without license.
+async function initialize() {
+  setStatus("Initializing...")
+
+  var license = await loadAssetIfExists("regula.license")
+  var config: InitConfig | undefined
+  if (license != null) config = new InitConfig(license)
+  var [success, error] = await faceSdk.initialize({ config: config })
+
+  if (!success && error != null) {
+    setStatus(error.message)
+    console.log(error.code + ": " + error.message)
   }
+  return success
 }
 
 function setImage(base64: string, type: number, position: number) {
@@ -71,46 +80,82 @@ function setImage(base64: string, type: number, position: number) {
   }
 }
 
-// If 'regula.license' exists, init using license(enables offline match)
-// otherwise init without license.
-async function initializeReader() {
-  setStatus("Initializing...")
-
-  var license = await loadAssetIfExists("regula.license")
-  var config: InitConfig | undefined
-  if (license != null) config = new InitConfig(license)
-  var [success, error] = await faceSdk.initialize({ config: config })
-
-  if (error != null) {
-    setStatus(error.message)
-    console.log(error.code + ": " + error.message)
-  }
-  return success
+async function useCamera(position: number) {
+  var response = await faceSdk.startFaceCapture()
+  if (response.image == null) return
+  var image = response.image
+  setImage("data:image/png;base64," + image.image, image.imageType, position)
 }
 
-// --------------------------------------------------------------------------------------------------------------------
+async function useGallery(position: number) {
+  var image = await app.camera.getPicture({
+    destinationType: DestinationType.DATA_URL,
+    mediaType: MediaType.PICTURE,
+    sourceType: PictureSourceType.PHOTOLIBRARY
+  })
+  setImage(image, ImageType.PRINTED, position)
+}
 
-export function main() {
-  document.getElementById("first-image")!.onclick = () => getImage(1)
-  document.getElementById("second-image")!.onclick = () => getImage(2)
-  document.getElementById("match-faces")!.onclick = () => matchFaces()
-  document.getElementById("start-liveness")!.onclick = () => startLiveness()
-  document.getElementById("clear-results")!.onclick = () => clearResults()
+async function pickImage(position: number) {
+  var option = await app.dialogs.confirm("", "Select option", ["Use gallery", "Use camera"])
+  if (option == 1) useGallery(position)
+  else useCamera(position)
+}
 
-  init()
+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
+  }
 }
 
-var setStatus = (data: string) => document.getElementById("status")!.innerHTML = data
-var setLivenessStatus = (data: string) => document.getElementById("liveness-status")!.innerHTML = data
-var setSimilarityStatus = (data: string) => document.getElementById("similarity-status")!.innerHTML = data
+var app: Main
+var faceSdk = FaceSDK.instance
+var image1: MatchFacesImage | null
+var image2: MatchFacesImage | null
+
+var setStatus = (data: string) => document.getElementById("status").innerHTML = data
+var setLivenessStatus = (data: string) => document.getElementById("liveness-status").innerHTML = data
+var setSimilarityStatus = (data: string) => document.getElementById("similarity-status").innerHTML = data
 var setUiImage1 = (data: string) => (document.getElementById("first-image") as HTMLImageElement).src = data
 var setUiImage2 = (data: string) => (document.getElementById("second-image") as HTMLImageElement).src = data
-var clearResults = () => {
-  setStatus("Ready")
-  setSimilarityStatus("null")
-  setLivenessStatus("null")
+var resetImages = () => {
   setUiImage1("images/portrait.png")
   setUiImage2("images/portrait.png")
-  image1 = null
-  image2 = null
+}
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'main.html',
+  styleUrl: 'main.css'
+})
+export class Main {
+  dialogs: Dialogs
+  camera: Camera
+
+  constructor(platform: Platform, dialogs: Dialogs, camera: Camera) {
+    platform.ready().then(() => {
+      this.dialogs = dialogs
+      this.camera = camera
+      app = this
+
+      document.getElementById("first-image").onclick = () => pickImage(1)
+      document.getElementById("second-image").onclick = () => pickImage(2)
+      document.getElementById("match-faces").onclick = () => matchFaces()
+      document.getElementById("start-liveness").onclick = () => startLiveness()
+      document.getElementById("clear-results").onclick = () => clearResults()
+
+      init()
+    });
+  }
 }

package/examples/ionic/tsconfig.json

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

package/examples/react_native/README.md

@@ -19,7 +19,6 @@
 ```bash
 npm uninstall @regulaforensics/face-core-basic
 npm install @regulaforensics/face-core-match
-(cd ios && pod install)
 npm run setup
 ```
 

package/examples/react_native/app.config.ts

@@ -33,7 +33,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
           { url: 'https://maven.regulaforensics.com/RegulaDocumentReader/Stage' }
         ]
       },
-      // This fixes a bug in expo v53. https://github.com/expo/expo/issues/36908
+       // This fixes a bug in expo v53. https://github.com/expo/expo/issues/36908
       ios: { networkInspector: false }
     }]
   ]

package/examples/react_native/index.tsx

@@ -1,22 +1,18 @@
 import { registerRootComponent } from 'expo'
 import WebView from 'react-native-webview'
-import React from 'react'
-import * as RNFS from 'react-native-fs'
-import { Alert, Platform } from 'react-native'
-import { launchImageLibrary } from 'react-native-image-picker'
-import { main } from './src/main'
+import { onload } from './src/main'
 
 var webViewRef: any
 const onclicks: any = {}
 const onMessage = (json: any) => {
   const event = JSON.parse(json.nativeEvent.data)
-  if (event.id === "ready") main()
+  if (event.id === "ready") onload()
   if (event.id === "onclick") {
     onclicks[event.value]()
   }
 }
 
-const document = {
+export const document = {
   getElementById(id: string): any {
     return new Proxy({}, {
       set(_, prop: string, value) {
@@ -28,67 +24,29 @@ const document = {
             }; true
           `)
         } else
-          webViewRef.injectJavaScript(`document.getElementById("${id}").${prop} = ${parseValue(value)}; true`)
+          webViewRef.injectJavaScript(`document.getElementById("${id}").${prop} = "${value}"; true`)
         return true
       },
       get(_, prop: string) {
         if (prop === "style") return new Proxy({}, {
           set(_, styleProp: string, value) {
-            webViewRef.injectJavaScript(`document.getElementById("${id}").style.${styleProp} = ${parseValue(value)}; true`)
+            webViewRef.injectJavaScript(`document.getElementById("${id}").style.${styleProp} = "${value}"; true`)
             return true
           }
         })
-        if (prop === "insertAdjacentHTML") return (position: string, html: string) => {
-          webViewRef.injectJavaScript(`document.getElementById("${id}").insertAdjacentHTML('${position}', \`${html}\`); true`)
-          return true
-        }
         return undefined
-      }
+      },
     }
     )
   }
 }
 
-function parseValue(value: any) {
-  if (value !== true && value !== false) return `"${value}"`
-  return value
-}
-
-(globalThis as any).document = document;
 registerRootComponent(() =>
   <WebView
     ref={ref => { webViewRef = ref }}
     onMessage={onMessage}
     source={require("./index.html")}
     scrollEnabled={false}
-    overScrollMode={'content'}
+    injectedJavaScript="document.body.addEventListener('touchmove', function(e) { e.preventDefault() }, { passive: false })"
   />
 )
-
-export async function loadAssetIfExists(path: string): Promise<string | null> {
-  if (Platform.OS === 'ios') path = RNFS.MainBundlePath + "/" + path
-  var readFile = Platform.OS === 'ios' ? RNFS.readFile : RNFS.readFileRes
-  try {
-    return await readFile(path, 'base64')
-  } catch {
-    return null
-  }
-}
-
-export async function pickImage(): Promise<string | null> {
-  var response = await launchImageLibrary({
-    mediaType: 'photo',
-    selectionLimit: 1,
-    includeBase64: true
-  })
-  return "data:image/png;base64," + response?.assets?.[0].base64!
-}
-
-export async function chooseOption(): Promise<boolean | null> {
-  return new Promise<boolean | null>((resolve) => {
-    Alert.alert("Select option", "", [
-      { text: "Use gallery", onPress: () => { resolve(false) } },
-      { text: "Use camera", onPress: () => { resolve(true) } }
-    ], { cancelable: true, onDismiss: () => resolve(null) })
-  })
-}