> For the complete documentation index, see [llms.txt](https://docs.accurascan.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.accurascan.com/language/web-plugin/face-plugin/angular.md).

# 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. 

{% file src="/files/o2j8mdwAz97PfiXxilS5" %}

***

### Step 1: Initialize Project

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

```bash
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:

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

***

### Step 2: Install Plugin

Install the Accura Face Plugin package from the npm registry:

```bash
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:

```typescript
declare module 'accurafaceplugin';
```

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

```json
{
  "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:

```typescript
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:

```typescript
// 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.

```typescript
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`:

```typescript
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

```bash
npm start
```