HTML - Vanilla JS

Accura Face Plugin — Vanilla HTML Integration Guide

This guide walks you through integrating the Accura Face Plugin into a standard HTML project using native ES Modules.

---

Prerequisites

Before proceeding, ensure the following requirement is met:

• accura.xml — Place your accura.xml file in the same directory as your index.html. 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: Implementation

Create an index.html file in your project directory and add the following import and initialization code inside a <script type="module"> block.

<script type="module">
  // Import the FacePlugin class directly from the Accura CDN.
  import FacePlugin from "https://unpkg.com/accurafaceplugin/dist/accuramain.js";

  // Declare a variable to hold the active plugin instance.
  // This allows us to safely call destroy() before re-initializing.
  let currentPlugin = null;

  // Destroy any previously active instance before creating a new one.
  // This prevents duplicate camera sessions or memory leaks.
  if (currentPlugin) currentPlugin.destroy();

  // Instantiate the FacePlugin with three required arguments:
  //   1. Path to the accura.xml file (relative to the HTML file)
  //   2. The callback function that receives the captured face image as base64
  //   3. A configuration object to customize UI appearance and detection threshold
  currentPlugin = new FacePlugin(
    "./accura.xml",   // Relative path to the XML license file
    base64Handler,    // Callback invoked upon successful face capture
    {
      threshold: 3,       // Face detection threshold (1–100; higher = stricter)
      textSize: "",       // Overlay instruction text size (leave empty for default)
      textColor: "",      // Overlay instruction text color (leave empty for default)
      textWeight: "",     // Overlay instruction text font weight (leave empty for default)
      textBgColor: "",    // Background color of the text overlay (leave empty for default)
      BodyBgColor: "",    // Background color of the camera viewport (leave empty for default)
    }
  );

  // Start the plugin engine. This opens the camera and begins face detection.
  // The call is wrapped in try/catch to handle permission denials or initialization errors.
  try {
    await currentPlugin.start();
  } catch (error) {
    console.error("Failed to start plugin:", error);
  }
</script>

---

Step 2: Response Handling

When the plugin successfully captures a face, it invokes the callback function you provided during instantiation. The callback receives a single object containing a base64 property — a Data URL string representing the captured facial image encoded in Base64 format.

What is Base64? Base64 is a binary-to-text encoding scheme that represents raw image data as an ASCII string. The string is prefixed with a MIME type header (e.g., data:image/jpeg;base64,...) followed by the encoded image payload. This format is suitable for direct transmission over HTTP in form fields or JSON bodies.

The following handler demonstrates how to extract that value and forward it to your server-side verification endpoint:

        // This function is invoked automatically by the plugin once a valid face is captured.
        // It receives a destructured object: { base64 } — the raw base64-encoded image string.
        const base64Handler = async ({ base64 }) => {
          console.log("Base64 received:", base64);

          try {
            // Construct a multipart form payload to transmit the image to the server.
            const formData = new FormData();

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

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

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

            // Access the liveness/match score from the response payload.
            // The `score` field indicates confidence level of the face verification result.
            if (data && data.score !== undefined) {
              console.log(`Score: ${data.score}`);
            }
          } catch (error) {
            console.error("Error sending to API:", error);
          }
        };

---

Step 3: Demo Implementation

The following is a complete, ready-to-use index.html file. Copy and paste it as-is into your project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accura Face Plugin - HTML Demo</title>
    <style></style>
  </head>
  <body>
    <script type="module">
        // Import the FacePlugin class directly from the Accura CDN.
        import FacePlugin from "https://unpkg.com/accurafaceplugin/dist/accuramain.js";

        // Declare a variable to hold the active plugin instance.
        // This allows us to safely call destroy() before re-initializing.
        let currentPlugin = null;

        // This function is invoked automatically by the plugin once a valid face is captured.
        // It receives a destructured object: { base64 } — the raw base64-encoded image string.
        const base64Handler = async ({ base64 }) => {
          console.log("Base64 received:", base64);

          try {
            // Construct a multipart form payload to transmit the image to the server.
            const formData = new FormData();

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

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

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

            // Access the liveness/match score from the response payload.
            // The `score` field indicates confidence level of the face verification result.
            if (data && data.score !== undefined) {
              console.log(`Score: ${data.score}`);
            }
          } catch (error) {
            console.error("Error sending to API:", error);
          }
        };

      // Destroy any previously active instance before creating a new one.
      // This prevents duplicate camera sessions or memory leaks.
      if (currentPlugin) currentPlugin.destroy();

      // Instantiate the FacePlugin with three required arguments:
      //   1. Path to the accura.xml file (relative to the HTML file)
      //   2. The callback function that receives the captured face image as base64
      //   3. A configuration object to customize UI appearance and detection threshold
      currentPlugin = new FacePlugin(
        "./accura.xml",   // Relative path to the XML license file
        base64Handler,    // Callback invoked upon successful face capture
        {
          threshold: 3,       // Face detection threshold (1–100; higher = stricter)
          textSize: "",       // Overlay instruction text size (leave empty for default)
          textColor: "",      // Overlay instruction text color (leave empty for default)
          textWeight: "",     // Overlay instruction text font weight (leave empty for default)
          textBgColor: "",    // Background color of the text overlay (leave empty for default)
          BodyBgColor: "",    // Background color of the camera viewport (leave empty for default)
        }
      );

      // Start the plugin engine. This opens the camera and begins face detection.
      // The call is wrapped in try/catch to handle permission denials or initialization errors.
      try {
        await currentPlugin.start();
      } catch (error) {
        console.error("Failed to start plugin:", error);
      }
    </script>
  </body>
</html>

Note: Since this uses ESM imports, you must serve the file via a local server (e.g., using Live Server in VS Code or npx serve .). Opening the file directly via file:// may cause CORS or module issues.