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

package/README.md

@@ -1,11 +1,10 @@
 # Regula Face SDK plugin
 Face SDK is a framework that is used for face matching, recognition and liveness detection.
-This plugin makes possible to use it with react-native, cordova and ionic applications.
+This plugin makes possible to use it with react-native, cordova and capacitor applications.
 
 ## Demo applications
-In the [examples](examples/) folder you can find 4 demo applications:
+In the [examples](examples/) folder you can find 3 demo applications:
 * [React-native](examples/react_native)
-* [Cordova](examples/cordova)
 * [Ionic(ionic app with cordova, angular)](examples/ionic)
 * [Capacitor(ionic app with capacitor, react)](examples/capacitor)
 

package/RNFaceSDK.podspec

@@ -5,7 +5,7 @@ source = File.join(__dir__, 'ios')
 
 Pod::Spec.new do |s|
   s.name         = 'RNFaceSDK'
-  s.version      = '7.2.404-beta'
+  s.version      = '7.2.414-beta'
   s.summary      = package['description']
   s.license      = package['license']
 
@@ -16,6 +16,6 @@ Pod::Spec.new do |s|
   s.ios.deployment_target = '13.0'
   s.source_files = 'ios/**/*.{h,m}'
   s.exclude_files = [ 'ios/CVDFaceSDK.h', 'ios/CVDFaceSDK.m' ]
-  s.dependency 'FaceSDKStage', '7.2.3006'
+  s.dependency 'FaceSDKNightly', '7.1.3008'
   s.dependency 'React'
 end

package/android/build.gradle

@@ -32,7 +32,7 @@ android {
 rootProject.allprojects {
     repositories {
         maven {
-            url "https://maven.regulaforensics.com/RegulaDocumentReader/Stage"
+            url "https://maven.regulaforensics.com/RegulaDocumentReader/Nightly"
         }
     }
 }
@@ -41,7 +41,7 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
     //noinspection GradleDependency
-    implementation('com.regula.face:api:7.2.3946'){
+    implementation('com.regula.face:api:7.1.3926'){
         transitive = true
     }
 }

package/android/cordova.gradle

@@ -6,13 +6,13 @@ android {
 
 repositories {
     maven {
-        url "https://maven.regulaforensics.com/RegulaDocumentReader/Stage"
+        url "https://maven.regulaforensics.com/RegulaDocumentReader/Nightly"
     }
 }
 
 dependencies {
     //noinspection GradleDependency
-    implementation('com.regula.face:api:7.2.3946'){
+    implementation('com.regula.face:api:7.1.3926'){
         transitive = true
     }
 }

package/examples/capacitor/android/app/src/main/AndroidManifest.xml

@@ -18,8 +18,8 @@
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
-
         </activity>
     </application>
+
     <uses-permission android:name="android.permission.INTERNET" />
-</manifest>
+</manifest>

package/examples/capacitor/index.html

@@ -1,10 +1,5 @@
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-<script type="module" src="/src/main.tsx"></script>
-
 <div id="content" style="height: 100%"></div>
 
-<script>
-    fetch("main.html")
-        .then(response => response.text())
-        .then(html => document.getElementById("content").innerHTML = html)
-</script>
+<script type="module" src="./index.tsx"></script>
+<script type="module" src="/src/main.tsx"></script>

package/examples/capacitor/index.tsx

@@ -0,0 +1,53 @@
+import '@ionic/react/css/core.css'
+import '/src/main.css'
+import { setupIonicReact } from '@ionic/react'
+import { StatusBar, Style } from '@capacitor/status-bar'
+import { File } from '@awesome-cordova-plugins/file'
+import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera'
+import { main } from './src/main'
+import { Dialog } from '@capacitor/dialog'
+
+document.addEventListener('deviceready', () => fetch("main.html")
+    .then(response => response.text())
+    .then(html => document.getElementById("content").innerHTML = html)
+    .then(_ => document.dispatchEvent(new Event('ready')))
+)
+
+export async function loadAssetIfExists(path: string): Promise<string | null> {
+    try {
+        var dir = await File.resolveDirectoryUrl(File.applicationDirectory + "public/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
+    }
+}
+
+export async function pickImage(): Promise<string | null> {
+    return await Camera.getPicture({
+        destinationType: DestinationType.DATA_URL,
+        mediaType: MediaType.PICTURE,
+        sourceType: PictureSourceType.PHOTOLIBRARY
+    })
+}
+
+export async function chooseOption(): Promise<boolean | null> {
+    var response = await Dialog.confirm({
+        message: "Select option",
+        okButtonTitle: "Use camera",
+        cancelButtonTitle: "Use gallery"
+    })
+    return response.value
+}
+
+document.addEventListener('ready', main)
+
+setupIonicReact()
+StatusBar.setStyle({ style: Style.Light })

package/examples/capacitor/package.json

@@ -6,19 +6,19 @@
     "android": "scripts/android.sh"
   },
   "dependencies": {
-    "@regulaforensics/face-sdk": "7.2.404-beta",
-    "@regulaforensics/face-core-basic": "7.2.238-rc",
+    "@regulaforensics/face-sdk": "7.2.414-beta",
+    "@regulaforensics/face-core-basic": "7.1.240-nightly",
     "@awesome-cordova-plugins/file": "6.6.0",
     "@awesome-cordova-plugins/camera": "6.6.0",
     "cordova-plugin-file": "8.1.3",
     "cordova-plugin-camera": "8.0.0",
-    "@capacitor/dialog": "7.0.1",
     "@capacitor/cli": "7.0.1",
     "@capacitor/core": "7.0.1",
     "@capacitor/app": "7.0.0",
     "@capacitor/ios": "7.0.1",
     "@capacitor/android": "7.0.1",
     "@capacitor/status-bar": "7.0.0",
+    "@capacitor/dialog": "7.0.1",
     "@ionic/react": "8.4.3",
     "@vitejs/plugin-react": "4.3.4",
     "vite-plugin-static-copy": "2.3.1",

package/examples/capacitor/scripts/setup.sh

@@ -2,5 +2,7 @@
 set -e
 
 npm install
-cd ios/App
-pod install || pod update
+ionic cap sync ios || {
+    cd ios/App
+    pod update
+}

package/examples/capacitor/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/capacitor/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/capacitor/src/main.tsx

@@ -1,17 +1,21 @@
-import '@ionic/react/css/core.css'
-import './main.css'
-import { setupIonicReact } from '@ionic/react'
-import { StatusBar, Style } from '@capacitor/status-bar'
-import { File } from '@awesome-cordova-plugins/file'
-import { Dialog } from '@capacitor/dialog'
-import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera'
 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
   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({
@@ -42,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 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 (!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) {
@@ -82,71 +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 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 response = await Dialog.confirm({
-    message: "Select option",
-    okButtonTitle: "Use camera",
-    cancelButtonTitle: "Use gallery"
-  })
-  if (response.value) useCamera(position)
-  else useGallery(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 + "public/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 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()
 
-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
+  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 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")
+  image1 = null
+  image2 = null
 }
-
-setupIonicReact()
-StatusBar.setStyle({ style: Style.Light })
-document.addEventListener('deviceready', () => {
-  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/angular.json

@@ -11,17 +11,17 @@
           "options": {
             "outputPath": "www",
             "index": "index.html",
-            "main": "index.ts",
+            "main": "index.tsx",
             "tsConfig": "tsconfig.json",
             "assets": [
               {
                 "glob": "**/*",
-                "input": "src/assets",
+                "input": "assets",
                 "output": "assets"
               },
               {
                 "glob": "**/*",
-                "input": "src/images",
+                "input": "images",
                 "output": "images"
               }
             ]

package/examples/ionic/config.xml

@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <widget android-packageName="com.regula.documentreader.api.androidtest" ios-CFBundleIdentifier="com.regula.documentreader.qa" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android">
     <name>FaceSDK</name>
-    <icon src="src/images/icon.png" />
+    <icon src="images/icon.png" />
     <platform name="android">
         <preference name="orientation" value="portrait" />
         <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">

package/examples/ionic/index.tsx

@@ -0,0 +1,68 @@
+import 'zone.js';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { BrowserModule } from '@angular/platform-browser'
+import { IonicModule, Platform } from '@ionic/angular'
+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 { Dialogs } from '@awesome-cordova-plugins/dialogs/ngx'
+
+import { main } from './src/main'
+
+export 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
+    }
+}
+
+export async function pickImage(): Promise<string | null> {
+    return await cameraInstance.getPicture({
+        destinationType: DestinationType.DATA_URL,
+        mediaType: MediaType.PICTURE,
+        sourceType: PictureSourceType.PHOTOLIBRARY
+    })
+}
+
+export async function chooseOption(): Promise<boolean | null> {
+    return await dialogsInstance.confirm("", "Select option", [
+        "Use camera",
+        "Use gallery"
+    ]) == 1
+}
+
+var cameraInstance: Camera
+var dialogsInstance: Dialogs
+@Component({
+    selector: 'app-root',
+    templateUrl: 'src/main.html',
+    styleUrl: 'src/main.css'
+})
+class Main {
+    constructor(platform: Platform, camera: Camera, dialogs: Dialogs) {
+        cameraInstance = camera
+        dialogsInstance = dialogs
+        platform.ready().then(main)
+    }
+}
+
+@NgModule({
+    bootstrap: [Main],
+    providers: [Platform, Camera, Dialogs],
+    imports: [BrowserModule, IonicModule.forRoot()]
+})
+class MainModule { }
+
+platformBrowserDynamic().bootstrapModule(MainModule)

package/examples/ionic/package.json

@@ -6,8 +6,8 @@
     "android": "scripts/android.sh"
   },
   "dependencies": {
-    "@regulaforensics/face-sdk": "7.2.404-beta",
-    "@regulaforensics/face-core-basic": "7.2.238-rc",
+    "@regulaforensics/face-sdk": "7.2.414-beta",
+    "@regulaforensics/face-core-basic": "7.1.240-nightly",
     "@awesome-cordova-plugins/file": "6.16.0",
     "@awesome-cordova-plugins/camera": "6.16.0",
     "@awesome-cordova-plugins/dialogs": "6.16.0",

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>