Svelte

Accura Face Plugin — Svelte Integration Guide

This guide walks you through integrating the Accura Face Plugin into a Svelte 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 (Vite) or static/ folder (SvelteKit) as public/accura.xml or static/accura.xml respectively. 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

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

npm create vite@latest my-face-app -- --template svelte
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 src/lib/FaceScanner.svelte. The following snippet shows only the plugin import and initialization logic:

<script>
  import { onMount, onDestroy } from 'svelte';

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

  onMount(async () => {
    // Dynamically import the plugin inside onMount to guarantee browser-only execution.
    // Svelte's onMount 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 license file path (served from public/ or static/)
    //   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 (Vite) or static/accura.xml (SvelteKit)
      base64Handler,   // Fired automatically when the plugin captures a valid 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 when the component is removed from the DOM.
  onDestroy(() => {
    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 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 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 src/lib/FaceScanner.svelte. The original logic is preserved exactly as-is.

<script>
  import { onMount, onDestroy } from 'svelte';
  
  let container;
  let plugin = null;
  let isReady = false;

  onMount(async () => {
    try {
      // Dynamic import for client-side only execution
      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 = true;
    } catch (error) {
      console.error("Svelte Plugin Error:", error);
    }
  });

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

---

Step 6: Usage

Import and render the component in App.svelte:

<script>
  import FaceScanner from './lib/FaceScanner.svelte';
</script>

<FaceScanner />

---

Step 7: Running the Project

npm run dev