> 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/html-vanilla-js.md).

# 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.

{% file src="/files/MRwhxxZYFOdyrVqnkT4A" %}

***

### 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.

```html
<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:

```js
        // 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.

```html
<!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.


---

# 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/html-vanilla-js.md?ask=<question>
```

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.