@regulaforensics/face-sdk 7.2.404-beta → 7.2.414-beta

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.404-beta",
-    "@regulaforensics/face-core-basic": "7.2.238-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>

package/examples/react_native/src/main.tsx

@@ -1,14 +1,21 @@
-import { document } from '../index'
-import * as RNFS from 'react-native-fs'
-import { Alert, Platform } from 'react-native'
-import { launchImageLibrary } from 'react-native-image-picker'
 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({
@@ -19,7 +26,7 @@ async function startLiveness() {
     }
   })
   if (response.image == null) return
-  setImage(response.image, ImageType.LIVE, 1)
+  setImage("data:image/png;base64," + response.image, ImageType.LIVE, 1)
   setLivenessStatus(response.liveness == LivenessStatus.PASSED ? "passed" : "unknown")
 }
 
@@ -39,18 +46,34 @@ async function matchFaces() {
   setStatus("Ready")
 }
 
-function clearResults() {
-  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 setImage(base64: string, type: number, position: number) {
   setSimilarityStatus("null")
-  setLivenessStatus("null")
-  resetImages()
-  image1 = null
-  image2 = null
+  var mfImage = new MatchFacesImage(base64, type)
+  if (position == 1) {
+    image1 = mfImage
+    setUiImage1(base64)
+    setLivenessStatus("null")
+  }
+  if (position == 2) {
+    image2 = mfImage
+    setUiImage2(base64)
+  }
 }
 
 // If 'regula.license' exists, init using license(enables offline match)
 // otherwise init without license.
-async function initialize() {
+async function initializeReader() {
   setStatus("Initializing...")
 
   var license = await loadAssetIfExists("regula.license")
@@ -58,82 +81,36 @@ async function initialize() {
   if (license != null) config = new InitConfig(license)
   var [success, error] = await faceSdk.initialize({ config: config })
 
-  if (!success && error != null) {
+  if (error != null) {
     setStatus(error.message)
     console.log(error.code + ": " + error.message)
   }
   return success
 }
 
-function setImage(base64: string, type: number, position: number) {
-  setSimilarityStatus("null")
-  var mfImage = new MatchFacesImage(base64, type)
-  if (position == 1) {
-    image1 = mfImage
-    setUiImage1("data:image/png;base64," + base64)
-    setLivenessStatus("null")
-  }
-  if (position == 2) {
-    image2 = mfImage
-    setUiImage2("data:image/png;base64," + base64)
-  }
-}
-
-async function useCamera(position: number) {
-  var response = await faceSdk.startFaceCapture()
-  if (response.image == null) return
-  var image = response.image
-  setImage(image.image, image.imageType, position)
-}
+// --------------------------------------------------------------------------------------------------------------------
 
-function useGallery(position: number) {
-  launchImageLibrary({
-    mediaType: 'photo',
-    selectionLimit: 1,
-    includeBase64: true
-  }, (response: any) => {
-    if (response.assets == null) return
-    setImage(response.assets[0].base64!, 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()
 
-function pickImage(position: number) {
-  Alert.alert("Select option", "", [
-    { text: "Use gallery", onPress: () => useGallery(position) },
-    { text: "Use camera", onPress: () => useCamera(position) }
-  ], { cancelable: true })
-}
-
-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
-  }
+  init()
 }
 
-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 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")
-}
-
-export function onload() {
-  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regulaforensics/face-sdk",
-  "version": "7.2.404-beta",
+  "version": "7.2.414-beta",
   "description": "This is an npm module for Regula Face SDK. It allows you to easily compaire faces using your phone's camera.",
   "main": "www/react-native/index.js",
   "module": "www/capacitor/index.js",

package/plugin.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<plugin id="@regulaforensics/face-sdk" version="7.2.404-beta" xmlns="http://apache.org/cordova/ns/plugins/1.0">
+<plugin id="@regulaforensics/face-sdk" version="7.2.414-beta" xmlns="http://apache.org/cordova/ns/plugins/1.0">
   <name>FaceSDK</name>
   <description>Cordova plugin for Regula Face SDK</description>
   <license>commercial</license>
@@ -29,7 +29,7 @@
         <source url="https://github.com/CocoaPods/Specs.git" />
       </config>
       <pods>
-        <pod name="FaceSDKStage" spec="7.2.3006" />
+        <pod name="FaceSDKNightly" spec="7.1.3008" />
       </pods>
     </podspec>
   </platform>

package/test/package-lock.json

@@ -13,7 +13,7 @@
     },
     "..": {
       "name": "@regulaforensics/face-sdk",
-      "version": "7.2.404-beta",
+      "version": "7.2.414-beta",
       "dev": true,
       "license": "commercial"
     },

package/examples/cordova/.vscode/launch.json

@@ -1,28 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Debug Android on emulator",
-            "type": "cordova",
-            "request": "launch",
-            "platform": "android",
-            "target": "emulator",
-            "port": 9222,
-            "sourceMaps": true,
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "name": "Debug Android on device",
-            "type": "cordova",
-            "request": "launch",
-            "platform": "android",
-            "target": "device",
-            "port": 9222,
-            "sourceMaps": true,
-            "cwd": "${workspaceFolder}"
-        }
-    ]
-}