@regulaforensics/face-sdk 7.2.408-rc → 7.2.414-beta

package/examples/ionic/src/main.css

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

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

@@ -1,15 +1,21 @@
-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 initialize()) return
+  if (!await initializeReader()) 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({
@@ -40,30 +46,15 @@ async function matchFaces() {
   setStatus("Ready")
 }
 
-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)
+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)
   }
-  return success
 }
 
 function setImage(base64: string, type: number, position: number) {
@@ -80,82 +71,46 @@ function setImage(base64: string, type: number, position: number) {
   }
 }
 
-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)
-}
+// If 'regula.license' exists, init using license(enables offline match)
+// otherwise init without license.
+async function initializeReader() {
+  setStatus("Initializing...")
 
-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)
-}
+  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 })
 
-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
+  if (error != null) {
+    setStatus(error.message)
+    console.log(error.code + ": " + error.message)
   }
+  return success
 }
 
-var app: Main
-var faceSdk = FaceSDK.instance
-var image1: MatchFacesImage | null
-var image2: MatchFacesImage | null
+// --------------------------------------------------------------------------------------------------------------------
+
+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()
+
+  init()
+}
 
-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 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 resetImages = () => {
+var clearResults = () => {
+  setStatus("Ready")
+  setSimilarityStatus("null")
+  setLivenessStatus("null")
   setUiImage1("images/portrait.png")
   setUiImage2("images/portrait.png")
-}
-
-@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()
-    });
-  }
+  image1 = null
+  image2 = null
 }

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/index.tsx

@@ -1,18 +1,22 @@
 import { registerRootComponent } from 'expo'
 import WebView from 'react-native-webview'
-import { onload } from './src/main'
+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'
 
 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) {
@@ -24,29 +28,67 @@ export const document = {
             }; true
           `)
         } else
-          webViewRef.injectJavaScript(`document.getElementById("${id}").${prop} = "${value}"; true`)
+          webViewRef.injectJavaScript(`document.getElementById("${id}").${prop} = ${parseValue(value)}; true`)
         return true
       },
       get(_, prop: string) {
         if (prop === "style") return new Proxy({}, {
           set(_, styleProp: string, value) {
-            webViewRef.injectJavaScript(`document.getElementById("${id}").style.${styleProp} = "${value}"; true`)
+            webViewRef.injectJavaScript(`document.getElementById("${id}").style.${styleProp} = ${parseValue(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}
-    injectedJavaScript="document.body.addEventListener('touchmove', function(e) { e.preventDefault() }, { passive: false })"
+    overScrollMode={'content'}
   />
 )
+
+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) })
+  })
+}

package/examples/react_native/package.json

@@ -8,19 +8,19 @@
     "start": "expo start"
   },
   "dependencies": {
-    "@regulaforensics/face-sdk": "7.2.408-rc",
-    "@regulaforensics/face-core-basic": "7.2.241-rc",
-    "react-native": "0.79.2",
+    "@regulaforensics/face-sdk": "7.2.414-beta",
+    "@regulaforensics/face-core-basic": "7.1.240-nightly",
+    "react-native": "0.79.5",
     "react-native-fs": "2.20.0",
     "react-native-image-picker": "8.2.1",
-    "react-native-webview": "13.13.5",
-    "@react-native/metro-config": "0.79.2",
+    "react-native-webview": "13.15.0",
+    "@react-native/metro-config": "0.79.5",
     "react": "19.1.0",
-    "@types/react": "19.1.4",
-    "expo": "53.0.9",
-    "expo-dev-client": "5.1.8",
+    "@types/react": "19.1.8",
+    "expo": "53.0.20",
+    "expo-dev-client": "5.2.4",
     "expo-custom-assets": "1.4.1",
-    "expo-build-properties": "0.14.6",
+    "expo-build-properties": "0.14.8",
     "typescript": "5.8.3"
   }
 }

package/examples/react_native/src/main.css

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

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