Nextjs

Accura Face Plugin — Next.js Integration Guide

This guide walks you through integrating the Accura Face Plugin into a Next.js project using the App Router.


Prerequisites

Before proceeding, ensure the following requirement is met:

  • accura.xml — Place your accura.xml 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.

941KB
Open

Step 1: Initialize Project

If you do not have an existing Next.js project, create one using the official CLI:

npx create-next-app@latest my-face-app
cd my-face-app

Step 2: Install Plugin

Install the Accura Face Plugin package from the npm registry:


Step 3: TypeScript Support

Since the accurafaceplugin package does not ship with TypeScript declarations, create a type definition file at the project root to resolve module errors and enable type checking:

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


Step 4: Implementation

Create components/FaceScanner.tsx. The snippet below demonstrates only the plugin import and instantiation — the minimal code required to activate the face detection engine in a Next.js client component:


Step 5: Response Handling

Upon a successful face capture, the plugin invokes the base64Handler callback asynchronously. The callback receives a single argument — an object with a base64 property containing the captured image encoded as a Base64 Data URL string (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 safe and seamless transmission of binary content over text-based protocols such as HTTP multipart form submissions.

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


Step 6: Demo Implementation

The following is the complete, production-ready component. Copy and paste it directly into components/FaceScanner.tsx. The original logic is preserved exactly as-is.


Step 7: Usage

Import and render the component in your app/page.tsx:


Step 8: Running the Project

Last updated