> 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: ``
})
export class AppComponent {
title = 'angular-face';
}
```
***
### Step 8: Running the Project
```bash
npm start
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.accurascan.com/language/web-plugin/face-plugin/angular.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.