v4.0.0

Biomix Face Installation

Install the face capture component (v4.0.0) with liveness detection for Angular, React, native mobile, Cordova, and Capacitor.

Biomix Face guides users to position their face in an oval, performs Haar cascade face detection, runs liveness via MediaPipe Face Mesh, and sends the result to Biomix Headless for verification.

Requirements

GitHub account with access to Securbase packages
Classic personal access token with read:packages scope
For iOS: SSH key configured for GitHub and CocoaPods repo access
For web (Angular/React): HTTPS and MediaPipe assets served statically
Camera access (front-facing camera on mobile)

Package registry

Configure GitHub Packages before installing any npm-based package (@securbase scope).

.npmrc

@securbase:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_CLASSIC_TOKEN}

GitHub Token

Generate a classic token at GitHub → Settings → Developer settings → Personal access tokens with read:packages permission.

Angular

Standalone Angular component published as @securbase/biomix-face-web-component. Requires Angular 20 or 21 and MediaPipe assets.

View package on GitHub

Install the package

npm install @securbase/biomix-face-web-component

Peer dependencies: Angular ^20.0.0 || ^21.0.0, @securbase/biomix-headless-angular-component ^0.0.3

Configure MediaPipe

# Copiar assets de MediaPipe al directorio public
cp -r node_modules/@securbase/biomix-face-web-component/assets/libs/mediapipe public/libs/mediapipe

MediaPipe

Copy face_mesh.js from the package assets to your public folder and set mediaPipeBasePath accordingly. Without it, the liveness step is skipped.

Basic usage

import { Component } from '@angular/core';
import { BiomixFaceCaptureComponent } from '@securbase/biomix-face-web-component';

@Component({
  selector: 'app-verificacion',
  standalone: true,
  imports: [BiomixFaceCaptureComponent],
  template: `
    <lib-biomix-face-capture
      [publicKey]="publicKey"
      [mediaPipeBasePath]="'/libs/mediapipe'"
      (faceCaptured)="onFaceCaptured($event)"
      (processCancelled)="onCancelado($event)"
      (processCompleted)="onCompletado()">
    </lib-biomix-face-capture>
  `,
})
export class VerificacionComponent {
  publicKey = 'TU_PUBLIC_KEY';

  onFaceCaptured(base64: string) {
    console.log('Rostro capturado (JPEG base64)');
  }

  onCancelado(motivo: string) {
    console.warn('Proceso cancelado:', motivo);
  }

  onCompletado() {
    console.log('Verificación completada');
  }
}

React

React component with zero ML-model dependencies for face detection. Requires React 17, 18, or 19.

View package on GitHub

Install the package

npm install @securbase/biomix-face-react-component

Import styles

import '@securbase/biomix-face-react-component/dist/index.css';

Basic usage

import '@securbase/biomix-face-react-component/dist/index.css';
import { BiomixFaceCapture } from '@securbase/biomix-face-react-component';

export default function App() {
  return (
    <BiomixFaceCapture
      publicKey="YOUR_RSA_PUBLIC_KEY"
      onProcessCompleted={() => console.log('done')}
      onProcessCancelled={(reason) => console.warn('cancelled', reason)}
    />
  );
}

Android Native

Native Android library distributed via Maven on GitHub Packages. Artifact: com.securbase.biomix:biomix-face-lib:4.0.0.

View package on GitHub

Maven (~/.m2/settings.xml)

settings.xml

<settings>
  <profiles>
    <profile>
      <id>securbase</id>
      <repositories>
        <repository>
          <id>securbase</id>
          <url>https://maven.pkg.github.com/securbase/ui_component_pkg</url>
          <snapshots>
            <enabled>true</enabled>
          </snapshots>
        </repository>
      </repositories>
    </profile>
  </profiles>
  <servers>
    <server>
      <id>securbase</id>
      <username>${GITHUB_USERNAME}</username>
      <password>${GITHUB_CLASSIC_TOKEN}</password>
    </server>
  </servers>
  <activeProfiles>
    <activeProfile>securbase</activeProfile>
  </activeProfiles>
</settings>

Gradle

Add the Maven repository and dependency in your module build.gradle:

gradle.properties

gpr.user=${GITHUB_USERNAME}
gpr.key=${GITHUB_CLASSIC_TOKEN}

build.gradle

allprojects {
    repositories {
        // ... existing repositories
        maven {
            url = uri("https://maven.pkg.github.com/securbase/ui_component_pkg")
            credentials {
                username = project.findProperty("gpr.user") ?: System.getenv("GITHUB_USERNAME")
                password = project.findProperty("gpr.key") ?: System.getenv("GITHUB_TOKEN")
            }
        }
    }
}

dependencies {
    implementation "com.securbase.biomix:biomix-face-lib:4.0.0"
}

iOS Native

Native iOS library distributed via CocoaPods from the Securbase private repo. Tag: 4.0.0.

View package on GitHub

1. Add Securbase CocoaPods repo

pod repo add securbase git@github.com:securbase/cocoapod-repo.git

2. Configure Podfile sources

Podfile

source 'git@github.com:securbase/cocoapod-repo.git'
source 'https://cdn.cocoapods.org/'

SSH Access

Access to the Securbase CocoaPods repo requires SSH key authentication configured in your GitHub account.

3. Add to your Podfile

Podfile

pod 'BiomixFaceLib', '~> 3.9.0'

Cordova (Android + iOS)

Cordova plugin for live face recognition on both platforms. Install version 4.0.0.

View package on GitHub

Install the plugin

cordova plugin add @securbase/biomix-face-cordova-component@4.0.0 --save
cordova prepare

iOS

Access to the Securbase CocoaPods repo requires SSH key authentication configured in your GitHub account.

Basic usage

if (window.SobioSelfieLivenessPlugin) {
  const cfgData = {
    key: 'YOUR_RSA_PUBLIC_KEY',
    title: 'Control de vivo',
    mode: 'FACE_GESTURES_CONTROL',
    maxRetry: 0,
    checkImageQuality: true,
    frameFormat: 'PNG',
    strictGestureChecking: true,
    gesturesAvailables: [
      'FACE_GESTURE_LEFT',
      'FACE_GESTURE_RIGHT',
      'FACE_GESTURE_UP',
      'FACE_GESTURE_DOWN',
    ],
    useRandomGesturesOrder: true,
    videoLengthInSeconds: 5,
  };

  window.SobioSelfieLivenessPlugin.captureSelfie(
    cfgData,
    (successData) => console.log('OK', successData),
    (errorData) => console.error('Error', errorData)
  );
}

Capacitor (Android + iOS)

Capacitor plugin for face gestures and liveness. Install version 4.0.0. Requires additional native setup for Android and iOS.

View package on GitHub

Install the plugin

npm install @securbase/biomix-face-capacitor-component@4.0.0
npx cap sync

Native dependencies

Android: configure Gradle as described in the Android Native section above.

iOS: configure CocoaPods as described in the iOS Native section above.

Basic usage

import { BiomixFaceComponent } from '@securbase/biomix-face-capacitor-component';

const result = await BiomixFaceComponent.capture({
  key: 'YOUR_RSA_PUBLIC_KEY',
  mode: 'FACE_GESTURES_CONTROL',
  maxRetry: 0,
  checkImageQuality: true,
  frameFormat: 'PNG',
});

console.log(result.status, result.bufferBase64);