Anura Web Core SDK - v0.1.0-alpha.19

The Anura Web Core SDK is designed for JavaScript client-application developers. It offers simple, flexible way to take web-based measurements.

Installation

The main way that we ship our Anura Web Core SDK code to NPM is as ECMAScript modules with ECMAScript 2022, the 13th edition syntax. This allows developers to take advantage of modern JavaScript features and have greater control over what they ship to their end users.

You can use either of the following methods to add the library to your project:

Package managers

# yarn
yarn add @nuralogix.ai/anura-web-core-sdk

# npm
npm install @nuralogix.ai/anura-web-core-sdk

Load from a Content Delivery Network (CDN)

You can use Anura Web Core SDK directly in the browser via a CDN such as unpkg, jsDelivr, Skypack, esm.sh and npmmirror (a complete mirror of npmjs.com in China).

Here are some key advantages of using import maps to load Anura Web Core SDK from well-known CDNs:

1. Simplifies Dependency Management

  • No need for a bundler like Webpack or Rollup to resolve module imports.
  • Works directly in the browser without additional setup.

2. Faster Load Times with CDNs

  • CDNs optimize delivery with caching, compression, and edge locations.
  • Reduces latency compared to self-hosted libraries.

3. Automatic Versioning and Updates

  • Easily switch versions by updating the import map.
  • Can use version pinning (e.g., unpkg.com/:package@:version/:file).

4. Reduces Build Complexity

  • No need for npm install or package-lock files for browser-only apps.
  • Avoids dependency resolution issues in bundlers.

5. Optimized for Browser Environments

  • CDNs serve optimized ESM modules with minimal transformations.
  • Avoids CommonJS-to-ESM interop issues.

6. Flexible Module Resolution

  • Define custom mappings to override default module resolutions.
  • Allows switching between different CDNs or self-hosted versions without code changes.

7. Ideal for Prototyping and Demos

  • Great for quick experiments without setting up a full build pipeline.
  • Reduces friction when sharing code samples.

A. Using an Import Map

You can use importmap to reference the SDK:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anura Web Core SDK</title>
    <script type="importmap">
        {
          "imports": {
            "@nuralogix.ai/anura-web-core-sdk": "https://unpkg.com/@nuralogix.ai/anura-web-core-sdk",
            "@nuralogix.ai/anura-web-core-sdk/helpers": "https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/helpers/index.min.mjs",
            "@nuralogix.ai/anura-web-core-sdk/masks/anura": "https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/masks/anura/index.mjs",
            "@nuralogix.ai/anura-web-core-sdk/masks/tele": "https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/masks/tele/index.mjs"
          }
        }
    </script>
    <style>
        .measurement-container {width: 360px; height: 640px;}
    </style>
</head>
<body>
    <div class="measurement-container">
        <div id="measurement"></div>
    </div>
    <script type="module">
        import { Measurement, faceAttributeValue, faceTrackerState } from '@nuralogix.ai/anura-web-core-sdk';
        import helpers from "@nuralogix.ai/anura-web-core-sdk/helpers";
        import { AnuraMask } from "@nuralogix.ai/anura-web-core-sdk/masks/anura";

        const { CameraController } = helpers;
        const camera = CameraController.init();

        const mediaElement = document.getElementById('measurement');
        if (mediaElement && mediaElement instanceof HTMLDivElement) {
            const settings = {
                mediaElement,
                assetFolder: 'https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/assets',
                apiUrl: 'api.deepaffex.ai',
                mirrorVideo: true,
                displayMediaStream: true,
                metrics: false
            };
            const measurement = await Measurement.init(settings);
            const mask = new AnuraMask();
        }
    </script>
  </body>
</html>

B. Using Direct ES Module Import

Alternatively, you can import the module directly from a CDN without using import maps:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anura Web Core SDK</title>
    <style>
        .measurement-container {width: 360px; height: 640px;}
    </style>
</head>
<body>
    <div class="measurement-container">
        <div id="measurement"></div>
    </div>
    <script type="module">
        import { Measurement, faceAttributeValue, faceTrackerState } from 'https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/index.min.mjs';
        import helpers from "https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/helpers/index.min.mjs";
        import { AnuraMask } from "https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/masks/anura/index.mjs";

        const { CameraController } = helpers;
        const camera = CameraController.init();

        const mediaElement = document.getElementById('measurement');
        if (mediaElement && mediaElement instanceof HTMLDivElement) {
            const settings = {
                mediaElement,
                assetFolder: 'https://unpkg.com/@nuralogix.ai/anura-web-core-sdk/lib/assets',
                apiUrl: 'api.deepaffex.ai',
                mirrorVideo: true,
                displayMediaStream: true,
                metrics: false
            };
            const measurement = await Measurement.init(settings);
            const mask = new AnuraMask();
        }
    </script>
  </body>
</html>

Settings

On This Page

InstallationPackage managersLoad from a Content Delivery Network (CDN)