Angular

Accura Face Plugin — Angular Integration Guide

This guide walks you through integrating the Accura Face Plugin into an Angular project (v17+) using standalone components.

---

Prerequisites

Before proceeding, ensure the following requirement is met:

• accura.xml — Place your accura.xml license file in the public/ folder of your project as public/accura.xml. This file is required by the plugin to initialize the face detection engine. You can download it from here.

accura.xml

941KB

Open

---

Step 1: Initialize Project

Create a new Angular project with standalone component architecture. When prompted, select No for Server-Side Rendering (SSR):

npx ng new my-face-app --standalone
cd my-face-app
npm install

After scaffolding, open angular.json and ensure SSR and prerendering are explicitly disabled:

"options": {
  "prerender": false,
  "ssr": false
}

---

Step 2: Install Plugin

Install the Accura Face Plugin package from the npm registry:

npm install accurafaceplugin

---

Step 3: TypeScript Support

Angular enforces strict TypeScript compilation. Create a type declaration file at src/types.d.ts to declare the module and suppress resolution errors:

declare module 'accurafaceplugin';

Ensure this file is included in your tsconfig.app.json's include array:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "node"
    ]
  },
  "files": [
    "src/main.ts",
    "src/main.server.ts",
    "server.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

---

Step 4: Implementation

Generate the scanner component or create it manually at src/app/face-scanner/face-scanner.component.ts. The following snippet shows only the plugin import and initialization logic:

import { Component, OnInit, OnDestroy } from '@angular/core';

export class FaceScannerComponent implements OnInit, OnDestroy {
  plugin: any = null;

  async ngOnInit() {
    // Dynamically import the plugin inside ngOnInit to ensure execution occurs
    // only in the browser context. Angular may run component lifecycle hooks
    // during server-side rendering; dynamic import defers plugin loading safely.
    const { default: FacePlugin } = await import('accurafaceplugin');

    // Instantiate the plugin with:
    //   1. The license file path (served from public/)
    //   2. The capture callback invoked upon face detection
    //   3. A configuration object for UI and detection sensitivity
    this.plugin = new FacePlugin(
      '/accura.xml',   // Resolves to public/accura.xml at runtime
      base64Handler,   // Fired automatically when a valid face is captured
      {
        threshold: 3,       // Detection sensitivity (1–100; higher = stricter)
        textSize: '',       // Overlay text size (default if empty)
        textColor: '',      // Overlay text color (default if empty)
        textWeight: '',     // Overlay font weight (default if empty)
        textBgColor: '',    // Overlay background color (default if empty)
        BodyBgColor: '',    // Viewport background color (default if empty)
      }
    );

    // Launch the camera and commence the face detection session.
    await this.plugin.start();
  }

  // Angular's destruction lifecycle hook — destroy the plugin instance
  // to free camera resources when the component is removed from the DOM.
  ngOnDestroy() {
    if (this.plugin) {
      this.plugin.destroy();
    }
  }
}

---

Step 5: Response Handling

When the plugin captures a valid face image, it invokes the base64Handler callback with an object containing a base64 property — a Data URL string representing the face image encoded in Base64 format (e.g., data:image/jpeg;base64,/9j/...).

What is Base64? Base64 is a binary-to-text encoding scheme that converts raw binary image data into a sequence of printable ASCII characters. The prefix segment (e.g., data:image/jpeg;base64,) conveys the MIME type, while the remainder is the encoded image payload. This format enables seamless transmission of binary content over text-based HTTP protocols without requiring binary transport mechanisms.

The following handler demonstrates forwarding the captured image to a remote verification endpoint:

// Invoked automatically by the plugin upon each successful face capture.
// Receives: { base64 } — a complete Data URL of the captured face image.
const base64Handler = async ({ base64 }: { base64: string }) => {
  console.log('Base64 received:', base64);

  try {
    // Compose a multipart form body to transmit the base64-encoded image.
    const formData = new FormData();

    // Attach the image string under the field name your backend expects.
    formData.append('imagebase64', base64);

    // Post the payload to your server-side verification endpoint.
    // Replace the URL with your actual backend host and path.
    const response = await fetch('https://ip:port/upload.php', {
      method: 'POST',
      body: formData,
    });

    // Deserialize the JSON-encoded response from the verification server.
    const data = await response.json();
    console.log('API Response:', data);

    // Extract the liveness/match confidence score from the response.
    if (data && data.score !== undefined) {
      console.log(`Score: ${data.score}`);
    }
  } catch (error) {
    console.error('Error sending to API:', error);
  }
};

---

Step 6: Demo Implementation

The following is the complete, production-ready component. Copy and paste it directly into src/app/face-scanner/face-scanner.component.ts. The original logic is preserved exactly as-is.

import {
  Component,
  OnInit,
  OnDestroy,
} from '@angular/core';
import { CommonModule, isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-face-scanner',
  standalone: true,
  imports: [CommonModule],
  template: ``,
  styles: [``],
})
export class FaceScannerComponent implements OnInit, OnDestroy {
  ready = false;
  plugin: any = null;

  async ngOnInit() {
    try {
      const { default: FacePlugin } = await import('accurafaceplugin');

      const base64Handler = async ({ base64 }: { base64: string }) => {
        console.log('Base64 received:', base64);

        try {
          const formData = new FormData();
          formData.append('imagebase64', base64);

          const response = await fetch('https://ip:port/upload.php', {
            method: 'POST',
            body: formData,
          });

          const data = await response.json();
          console.log('API Response:', data);

          // Display the score on UI
          if (data && data.score !== undefined) {
            console.log(`Score: ${data.score}`);
          }
        } catch (error) {
          console.error('Error sending to API:', error);
        }
      };

      this.plugin = new FacePlugin('/accura.xml', base64Handler, {
        threshold: 3,
        textSize: '',
        textColor: '',
        textWeight: '',
        textBgColor: '',
        BodyBgColor: '',
      });

      await this.plugin.start();
      this.ready = true;
    } catch (error) {
      console.error('Angular Initialization Error:', error);
    }
  }

  ngOnDestroy() {
    if (this.plugin) {
      this.plugin.destroy();
    }
  }
}

---

Step 7: Usage

Register and render the scanner component in app.component.ts:

import { Component } from '@angular/core';
import { FaceScannerComponent } from './face-scanner/face-scanner.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FaceScannerComponent],
  template: `<app-face-scanner></app-face-scanner>`
})
export class AppComponent {
  title = 'angular-face';
}

---

Step 8: Running the Project

npm start