Vue

Accura Face Plugin — Vue 3 Integration Guide

This guide walks you through integrating the Accura Face Plugin into a Vue 3 project built with Vite.

---

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.

941KB

accura.xml

Open

---

Step 1: Initialize Project

If you do not have an existing Vue 3 project, scaffold one using Vite:

npm create vite@latest my-face-app -- --template vue
cd my-face-app
npm install

---

Step 2: Install Plugin

Install the Accura Face Plugin package from the npm registry:

npm install accurafaceplugin

---

Step 3: Implementation

Create a dedicated scanner component at components/FaceScanner.vue. The following snippet shows only the plugin import and initialization logic:

<script setup>
import { onMounted, onUnmounted } from 'vue';

let plugin = null; // Holds the active plugin instance for lifecycle management

onMounted(async () => {
  // Dynamically import the plugin inside onMounted to guarantee browser-only execution.
  // Vue's onMounted lifecycle hook runs exclusively on the client side,
  // making it safe to access browser APIs such as the camera.
  const { default: FacePlugin } = await import('accurafaceplugin');

  // Instantiate the plugin with:
  //   1. The file path (served from public/)
  //   2. The capture callback invoked on successful face detection
  //   3. A configuration object for UI and detection tuning
  plugin = new FacePlugin(
    "/accura.xml",   // Resolves to public/accura.xml at runtime
    base64Handler,   // Fired automatically when the plugin captures a face
    {
      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)
    }
  );

  // Activate the camera and begin the face detection session.
  await plugin.start();
});

// Release camera resources and destroy the plugin instance when the component unmounts.
onUnmounted(() => {
  if (plugin) {
    plugin.destroy();
  }
});
</script>

---

Step 4: Response Handling

When the plugin captures a valid face, it invokes the base64Handler callback with an object containing a base64 property — a Data URL string representing the captured 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 safe and seamless transmission over text-based HTTP protocols without requiring binary transfer mechanisms.

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

// Automatically invoked by the plugin upon a successful face capture event.
// Receives: { base64 } — a complete Data URL of the captured face image.
const base64Handler = async ({ base64 }) => {
    console.log("Base64 received:", base64);

    try {
        // Construct a multipart form payload for HTTP transmission.
        const formData = new FormData();

        // Attach the base64 string under the field key expected by your backend.
        formData.append("imagebase64", base64);

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

        // Parse the JSON response returned by the verification server.
        const data = await response.json();
        console.log("API Response:", data);

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

---

Step 5: Demo Implementation

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

<template>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const isReady = ref(false);
let plugin = null;

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

    const base64Handler = async ({ base64 }) => {
        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);
        }
    };
    
    plugin = new FacePlugin(
      "/accura.xml",
      base64Handler,
      {
        threshold: 3,
        textSize: "",
        textColor: "",
        textWeight: "",
        textBgColor: "",
        BodyBgColor: "",
      }
    );
    
    await plugin.start();
    isReady.value = true;
  } catch (error) {
    console.error("Plugin failed to start:", error);
  }
});

onUnmounted(() => {
  if (plugin) {
    plugin.destroy();
  }
});
</script>

<style scoped>

</style>

---

Step 6: Usage

Import and use the component in App.vue:

<script setup>
import FaceScanner from './components/FaceScanner.vue';
</script>

<template>
  <FaceScanner />
</template>

---

Step 7: Running the Project

npm run dev