### Install Project Dependencies with npm

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/vuejs/README.md

Installs all the necessary dependencies for the project using the npm package manager. This command should be run in the project's root directory.

```sh
npm install
```

--------------------------------

### Run Development Server with npm

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/vuejs/README.md

Compiles and hot-reloads the application for development. This command starts a local development server, allowing for live updates as code changes.

```sh
npm run dev
```

--------------------------------

### Start HTTPS Server with Node.js

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

Instructions to install and run a local HTTPS server using Node.js and the 'http-server' package. This enables testing with SSL.

```bash
# Install http-server globally
npm install -g http-server

# Start server with SSL
http-server -S -p 8000

# Then visit: https://localhost:8000
```

--------------------------------

### Build Project for Production with npm

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/vuejs/README.md

Compiles and minifies the project for production deployment. This command generates optimized build artifacts ready for serving.

```sh
npm run build
```

--------------------------------

### External Camera Stream Setup

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Provides instructions and a code example for setting up an external camera stream with the WebAR SDK for custom camera handling and optimal AR performance.

```APIDOC
## External Camera Stream

For advanced use cases, you can provide your own camera stream to the SDK for custom camera handling.

### Description
This section details how to configure and set an external camera stream for the WebAR SDK, ensuring optimal AR performance.

### Method
Asynchronous JavaScript function `setupExternalCamera()`

### Parameters
None directly for the function, but it uses `navigator.mediaDevices` and `WEBARSDK.SetCameraStream`.

### Request Example
```javascript
// Camera configuration for optimal AR performance
const CAMERA_CONFIG = {
  VIDEO_CONSTRAINTS: {
    facingMode: 'environment',  // Use rear camera
    advanced: [{
      focusMode: 'manual',
      focusDistance: 0
    }]
  }
};

async function setupExternalCamera() {
  try {
    // Get available video devices
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(d => d.kind === 'videoinput');

    // Select rear camera (usually last device on mobile)
    const selectedDevice = videoDevices[videoDevices.length - 1];
    if (selectedDevice.deviceId) {
      CAMERA_CONFIG.VIDEO_CONSTRAINTS.deviceId = selectedDevice.deviceId;
    }

    // Request camera stream
    const stream = await navigator.mediaDevices.getUserMedia({
      video: CAMERA_CONFIG.VIDEO_CONSTRAINTS
    });

    // Pass stream to WebAR SDK
    WEBARSDK.SetCameraStream(stream);

    console.log('External camera stream set successfully');

  } catch (error) {
    if (error.name === 'NotAllowedError') {
      console.error('Camera permission denied');
    } else if (error.name === 'NotFoundError') {
      console.error('No camera found');
    }
  }
}

// Initialize when SDK is ready
WEBARSDK.SetAppReadyCallback(() => {
  setupExternalCamera();
});
```

### Response
- Logs success message or error to the console.

### Response Example
```
External camera stream set successfully
```
(or specific error messages like 'Camera permission denied')
```

--------------------------------

### Start HTTPS Server with Python

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

Commands to start a local HTTPS server using Python 3 or Python 2. This is required for camera access on most browsers.

```bash
# Python 3
python -m http.server 8000 --bind 0.0.0.0

# Python 2
python -m SimpleHTTPServer 8000

# Then visit: https://localhost:8000
```

--------------------------------

### Install Project Files

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

This command copies the necessary files for the advanced surface tracking integration into your project directory. Ensure you have a project structure ready to receive these files.

```bash
# Copy these files to your project:
├── index.html          # Main HTML structure
├── styles.css          # Modern styling
├── custom-handlers.js  # Progress & error handlers
├── loader.js          # Permission & camera handling
└── README.md          # This documentation
```

--------------------------------

### Download and Extract WebAR SDK Sandbox

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

Instructions to clone the repository or download and extract the WebAR SDK sandbox files. This is the initial step to get the project files.

```bash
# Download the sandbox files
git clone <repository-url>
cd webar-sdk-sandbox

# Or download and extract the ZIP file
unzip webar-sdk-sandbox.zip
cd webar-sdk-sandbox
```

--------------------------------

### A-Frame Surface Tracking with Blippar WebAR SDK

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

An A-Frame example demonstrating surface tracking using the Blippar WebAR SDK. It includes SDK initialization, setting up callbacks for guide view, model placement, and reset events. The scene is configured with an AR camera, assets, and a stage for placing 3D models with user interaction controls.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://ar-libs.blippar.com/aframe/1.3.0/aframe-v1.3.0.min.js"></script>
  <script src="https://ar-libs.blippar.com/components/aframe-extras/6.1.1/aframe-extras.min.js"></script>
  <script src="https://webar-sdk.blippar.com/releases/2.1.0/webar-sdk-v2.1.0.min.js"
    webar-mode="surface-tracking"
    auto-init="false"
    auto-start="true">
  </script>
</head>
<body>
  <script>
    WEBARSDK.Init();

    // Callback when guide animation starts/stops
    WEBARSDK.SetGuideViewCallbacks(
      () => console.log("Guide animation started"),
      () => console.log("Guide animation stopped")
    );

    // Callback when AR model is placed on surface
    WEBARSDK.SetARModelPlaceCallback(() => {
      console.log("AR model placed on surface");
    });

    // Callback when reset button is clicked
    WEBARSDK.SetResetButtonCallback(() => {
      console.log("Tracking reset");
    });
  </script>

  <a-scene
    webar-scene="key: YOUR_LICENSE_KEY_HERE"
    vr-mode-ui="enabled: false"
    device-orientation-permission-ui="enabled: false"
    loading-screen="enabled: false"
    renderer="colorManagement: true;"
    gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/">

    <!-- AR Camera with SDK integration -->
    <a-camera webar-camera></a-camera>

    <!-- Preload 3D assets -->
    <a-assets timeout="60000">
      <a-asset-item id="astronaut" src="models/astronaut.glb"></a-asset-item>
    </a-assets>

    <!-- Surface tracking stage - models placed here appear on detected surfaces -->
    <a-entity webar-stage position="0 1 -2">
      <!-- UX controls for gestures (rotate/scale) and stage cursor -->
      <a-entity webar-ux-control="stageCursorUX: true; userGestureRotation: true; userGestureScale: true">
        <a-entity
          gltf-model="#astronaut"
          animation-mixer="clip: moon_walk"
          rotation="0 0 0"
          position="0 0 0"
          scale="0.35 0.35 0.35"
          webar-loadmonitor="elType: glb">
        </a-entity>
      </a-entity>
    </a-entity>

  </a-scene>
</body>
</html>
```

--------------------------------

### WebAR SDK API Reference - Initialization and Tracking

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Provides essential WebAR SDK methods for initialization and controlling AR tracking. It includes functions to initialize the SDK, set up BabylonJS integration, and start or stop AR tracking. These are fundamental for setting up and managing the AR experience.

```javascript
// Initialization
WEBARSDK.Init();
WEBARSDK.InitBabylonJs(canvas, scene, camera, stage, uxControl);

// Tracking Control
WEBARSDK.StartTracking();
WEBARSDK.StopTracking();
```

--------------------------------

### A-Frame Face Tracking Setup with WebAR SDK

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

This HTML snippet sets up an A-Frame scene for face tracking using the WebAR SDK. It includes necessary script includes, WebAR SDK initialization parameters, and A-Frame entities for camera, assets, video background, face mesh, and 3D model placement. The script section initializes the SDK and demonstrates how to fill face mesh areas.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
  <script src="https://webar-sdk.blippar.com/releases/2.1.0/webar-sdk-v2.1.0.min.js"
    webar-mode="face-tracking"
    debug-mode="false"
    auto-init="false"
    auto-start="true"
    enable-tracking-on-desktop="true"
    enable-photo-ui="true"
    show-guide-view="true">
  </script>
</head>
<body>
  <a-scene
    webar-scene="key: YOUR_LICENSE_KEY_HERE"
    webar-raycaster="objects: .clickable; enabled: true;"
    vr-mode-ui="enabled: false"
    device-orientation-permission-ui="enabled: false"
    loading-screen="enabled: false"
    renderer="colorManagement: true; antialias: true;">

    <a-camera webar-camera></a-camera>

    <a-assets timeout="60000">
      <a-asset-item id="glasses" src="models/Fuel-glass.glb"></a-asset-item>
      <a-asset-item id="pumpkin" src="models/Pumpkin.glb"></a-asset-item>
      <img id="liptexture" src="images/lipmask.png" alt=""/>
    </a-assets>

    <!-- Video plane background (set visible=false for blank background) -->
    <a-plane id="webar-video-plane" color="white" visible="true"></a-plane>

    <!-- Face mesh for applying textures/masks -->
    <a-plane webar-facemesh
      material="src: #liptexture; side: front; alphaTest: 0; color: #E32531; shader: flat; transparent: true; opacity: 1;">
    </a-plane>

    <!-- Face tracking - origin is center of line between eyes -->
    <a-entity webar-face>
      <a-entity
        id="glasses"
        class="clickable"
        gltf-model="#glasses"
        position="0 0.05 0.01"
        scale="0.075 0.075 0.075"
        webar-loadmonitor="elType: glb">
      </a-entity>
    </a-entity>

    <!-- Face pivot for models that follow face orientation -->
    <a-entity webar-face-pivot>
      <a-entity
        gltf-model="#pumpkin"
        rotation="0 30 0"
        position="-0.75 -0.25 1"
        scale="0.01 0.01 0.01"
        webar-loadmonitor="elType: glb">
      </a-entity>
    </a-entity>

  </a-scene>

  <script>
    WEBARSDK.Init();

    // Fill eyes/mouth areas in face mesh
    WEBARSDK.SetEyesMeshFilled(true);
    WEBARSDK.SetMouthMeshFilled(true);

    // Get mouth open magnitude for interactive effects
    // Returns value 0-1 based on mouth openness
    // let mouthOpen = WEBARSDK.GetMouthOpenedMagnitude();

    // Click interaction on 3D models
    document.getElementById('glasses').addEventListener('click', (evt) => {
      console.log('Glasses clicked', evt);
    });
  </script>
</body>
</html>
```

--------------------------------

### BabylonJS Marker Tracking Initialization

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Initializes the WebAR SDK for marker tracking with BabylonJS. This setup allows for multi-marker experiences by mapping specific marker IDs to corresponding 3D meshes. The SDK then anchors AR content to detected markers.

```html
<script>
  var webarMarkerMeshMap = [];

  var createScene = function() {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 0, 0), scene);
    var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(5, 10, -2), scene);

    // Create mesh containers for each marker
    var markerMesh1 = new BABYLON.Mesh("markerMesh1", scene);
    var markerMesh2 = new BABYLON.Mesh("markerMesh2", scene);

    // Map marker IDs to mesh containers
    webarMarkerMeshMap.push({ markerId: "MARKER_ID_1", markerMesh: markerMesh1 });
    webarMarkerMeshMap.push({ markerId: "MARKER_ID_2", markerMesh: markerMesh2 });

    // Load model for first marker
    BABYLON.SceneLoader.ImportMesh(null, "./models/", "shoe.glb", scene, function(meshes) {
      for (var mesh of meshes) {
        if (mesh.name !== '__root__') {
          mesh.setParent(markerMesh1);
          mesh.rotationQuaternion.multiplyInPlace(
            BABYLON.Quaternion.FromEulerAngles(-Math.PI/2, 0, 0)
          );
          mesh.scaling = mesh.scaling.scale(6);
        }
      }
    });

    // Load model for second marker
    BABYLON.SceneLoader.ImportMesh(null, "./models/", "bottle.glb", scene, function(meshes) {
      for (var mesh of meshes) {
        if (mesh.name !== '__root__') {
          mesh.setParent(markerMesh2);
          mesh.position.y = -0.75;
          mesh.scaling = mesh.scaling.scale(5);
        }
      }
    });

    // Initialize WebAR SDK with marker mesh mapping
    WEBARSDK.InitBabylonJs(canvas, scene, camera, webarMarkerMeshMap);

    return scene;
  };
</script>
```

--------------------------------

### A-Frame Marker Tracking Setup with Blippar SDK

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

This HTML snippet initializes the Blippar WebAR SDK for marker tracking and configures an A-Frame scene. It includes necessary scripts, defines AR camera and assets, and sets up entities to display 3D models when specific image markers are detected. Marker IDs must be obtained from the Blippar Hub.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://ar-libs.blippar.com/aframe/1.3.0/aframe-v1.3.0.min.js"></script>
  <script src="https://webar-sdk.blippar.com/releases/2.1.0/webar-sdk-v2.1.0.min.js"
    webar-mode="marker-tracking"
    auto-init="false"
    auto-marker-detection="true"
    auto-scan-instruction="Look for a marker to scan..."
    auto-scan-instruction-detect="Detecting..."
    scan-btn-display="block"
    scan-btn-instruction="Tap to scan">
  </script>
</head>
<body>
  <a-scene
    webar-scene="key: YOUR_LICENSE_KEY_HERE"
    vr-mode-ui="enabled: false"
    device-orientation-permission-ui="enabled: false"
    loading-screen="enabled: false">

    <a-camera webar-camera></a-camera>

    <a-assets timeout="60000">
      <a-asset-item id="shoe" src="models/MaterialsVariantsShoe.glb"></a-asset-item>
      <a-asset-item id="bottle" src="models/milk_bottle_1l.glb"></a-asset-item>
    </a-assets>

    <!-- First marker - displays shoe model when marker detected -->
    <a-entity webar-marker="id: MARKER_ID_FROM_BLIPPAR_HUB_1">
      <a-entity
        gltf-model="#shoe"
        rotation="90 0 0"
        position="0 0 0"
        scale="5 5 5"
        webar-loadmonitor="elType: glb">
      </a-entity>
    </a-entity>

    <!-- Second marker - displays bottle model when marker detected -->
    <a-entity webar-marker="id: MARKER_ID_FROM_BLIPPAR_HUB_2">
      <a-entity
        gltf-model="#bottle"
        rotation="0 0 0"
        position="0 -0.5 0"
        scale="5 5 5"
        webar-loadmonitor="elType: glb">
      </a-entity>
    </a-entity>

  </a-scene>

  <script>
    WEBARSDK.Init();

    // Callback when marker is detected
    WEBARSDK.SetMarkerDetectedCallback((markerId) => {
      console.info('Marker detected:', markerId);
    });

    // Callback when marker tracking is lost
    WEBARSDK.SetMarkerLostCallback((markerId) => {
      console.info('Marker lost:', markerId);
    });

    // Optional: Custom HTML for auto marker detection UI
    // WEBARSDK.SetAutoMarkerDetectionStyle(htmlElement, showScanInstructions);
  </script>
</body>
</html>
```

--------------------------------

### HTML Structure for WebAR Application

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

The `index.html` file provides the basic structure for the WebAR application. It includes placeholders for A-Frame and WebAR SDK setup, custom handler registration, camera stream, AR scene, and UI elements like permission dialogs and loading screens.

```html
<!DOCTYPE html>
<html>
<head>
    <!-- A-Frame and WebAR SDK setup -->
    <!-- Custom handler registration -->
</head>
<body>
    <!-- Video element for camera stream -->
    <!-- A-Frame AR scene with test objects -->
    <!-- Permission dialogs -->
    <!-- Loading screen -->
</body>
</html>

```

--------------------------------

### Initialize Blippar WebAR SDK

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/face-tracking/index.html

Initializes the Blippar WebAR SDK. This is a prerequisite for using other SDK functionalities. No specific dependencies are mentioned, and it takes no arguments.

```javascript
WEBARSDK.Init();
```

--------------------------------

### Camera and Permissions Logic in JavaScript

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

The `loader.js` file handles essential device interactions for WebAR. It manages iOS permission requests, camera stream setup, gyroscope access, and coordinates the initialization of the WebAR SDK.

```javascript
// iOS permission handling
// Camera stream setup
// Gyroscope access management
// SDK initialization coordination

```

--------------------------------

### Initialize and Configure WebAR SDK

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/face-tracking/face-trynow.html

Initializes the WebAR SDK and sets properties for face mesh rendering. It also configures the scene's environment with an equirectangular reflection map.

```javascript
WEBARSDK.Init();
WEBARSDK.SetEyesMeshFilled(true);
WEBARSDK.SetMouthMeshFilled(true);

let reflectionMap = new THREE.TextureLoader().load("images/poly_haven_studio_1k.jpg");
reflectionMap.encoding = THREE.sRGBEncoding;
reflectionMap.mapping = THREE.EquirectangularReflectionMapping;
document.querySelector('a-scene').object3D.environment = reflectionMap;
```

--------------------------------

### Initialize Babylon.js Engine and Scene for WebAR

Source: https://github.com/blippar/webar-sdk-example/blob/main/babylon/marker-tracking/index.html

Sets up the Babylon.js engine and creates a scene for WebAR applications. It handles engine creation, scene configuration, camera, lighting, and prepares for marker tracking.

```javascript
var canvas = document.getElementById("renderCanvas");
var engine = null;
var sceneToRender = null;
var webarStage = null;
var webarMarkerMeshMap = [];

var scaleByFactor = function(obj, factor) {
  obj.scaling.x = obj.scaling.x * factor;
  obj.scaling.y = obj.scaling.y * factor;
  obj.scaling.z = obj.scaling.z * factor;
}

var createDefaultEngine = function() {
  return new BABYLON.Engine(canvas, true, {
    preserveDrawingBuffer: true,
    stencil: true,
    disableWebGL2Support: false
  });
};

var createScene = function () {
  var scene = new BABYLON.Scene(engine);
  scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("./models/environment.dds", scene);
  var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 0, 0), scene);
  var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(5, 10, -2), scene);
  light.intensity = 0.7;

  let webarMarkerMesh1 = new BABYLON.Mesh("webarMarkerMesh1", scene);
  let webarMarkerMesh2 = new BABYLON.Mesh("webarMarkerMesh2", scene);

  webarMarkerMeshMap.push({
    markerId: "dddddddd-uuuu-mmmm-mmmm-yyyyyyy11111",
    markerMesh: webarMarkerMesh1
  });
  webarMarkerMeshMap.push({
    markerId: "dddddddd-uuuu-mmmm-mmmm-yyyyyyy11111",
    markerMesh: webarMarkerMesh2
  });

  BABYLON.SceneLoader.ImportMesh(null, "./models/", "MaterialsVariantsShoe.glb", scene, function (meshes, particleSystems, skeletons) {
    let xQuat = new BABYLON.Quaternion();
    for (mesh of meshes) {
      if (mesh.name !== '__root__') {
        mesh.setParent(webarMarkerMesh1);
        BABYLON.Quaternion.FromEulerAnglesToRef(-Math.PI / 2, 0, 0, xQuat);
        mesh.rotationQuaternion.multiplyInPlace(xQuat);
        scaleByFactor(mesh, 6);
      }
    }
  });

  BABYLON.SceneLoader.ImportMesh(['Object_4', 'Object_6'], "./models/", "milk_bottle_1l.glb", scene, function (meshes, particleSystems, skeletons) {
    for (mesh of meshes) {
      if (mesh.name !== '__root__') {
        mesh.setParent(webarMarkerMesh2);
        mesh.position.y = -0.75;
        scaleByFactor(mesh, 5);
      }
    }
  });

  WEBARSDK.InitBabylonJs(canvas, scene, camera, webarMarkerMeshMap);
  return scene;
};

window.initFunction = async function() {
  var asyncEngineCreation = async function() {
    try {
      return createDefaultEngine();
    } catch(e) {
      console.log("the available createEngine function failed. Creating the default engine instead");
      return createDefaultEngine();
    }
  }
  window.engine = await asyncEngineCreation();
  if (!engine) throw 'engine should not be null.';
  window.scene = createScene();
};

initFunction().then(() => {
  sceneToRender = window.scene;
  sceneToRender.executeWhenReady(function () {
    engine.runRenderLoop(function () {
      if (sceneToRender && sceneToRender.activeCamera) {
        sceneToRender.render();
      }
    });
  });
});

window.addEventListener("resize", function () {
  engine.resize();
});
```

--------------------------------

### Initialize and Configure Blippar WebAR SDK (JavaScript)

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/surface-tracking/index.html

Initializes the Blippar WebAR SDK and sets up callback functions for various events such as starting and stopping the hand guide animation, video playback, AR model placement, and reset button clicks. This code assumes the WEBARSDK object is globally available.

```javascript
WEBARSDK.Init();
WEBARSDK.SetGuideViewCallbacks( startGuideViewCallback = () => {
  console.log(" Start(ed) hand guide animation");
}, stopGuideViewCallback = () => {
  console.log(" Stop(ped) hand guide animation");
} );
WEBARSDK.SetVideoStartedCallback(() => {
  deskenv.parentNode.removeChild(deskenv);
});
WEBARSDK.SetARModelPlaceCallback(() => {
  console.log("AR model placed");
});
WEBARSDK.SetResetButtonCallback(() => {
  console.log("Reset button clicked");
});
```

--------------------------------

### WebAR SDK API Reference - Camera and Callbacks

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Details methods for camera stream management and various callback functions in the WebAR SDK. This includes setting an external camera stream and registering callbacks for application readiness, video start, stage readiness, tracking stop, and surface tracking events. These are crucial for managing the AR lifecycle and user interactions.

```javascript
// Camera Control
WEBARSDK.SetCameraStream(mediaStream);

// Callbacks - Lifecycle
WEBARSDK.SetAppReadyCallback(callback);
WEBARSDK.SetVideoStartedCallback(callback);
WEBARSDK.SetStageReadyCallback(callback);
WEBARSDK.SetTrackingStoppedCallback(callback);

// Callbacks - Surface Tracking
WEBARSDK.SetARModelPlaceCallback(callback);
WEBARSDK.SetResetButtonCallback(callback);
WEBARSDK.SetGuideViewCallbacks(startCb, stopCb);
```

--------------------------------

### SDK API Reference

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

A comprehensive reference of the WebAR SDK methods, categorized by functionality including Initialization, Tracking Control, Camera Control, Callbacks, and Face Tracking.

```APIDOC
## SDK API Reference

Complete list of available SDK methods and their usage.

### Initialization
- **`WEBARSDK.Init()`**: Initializes the SDK. Use when `auto-init` is set to `false`.
- **`WEBARSDK.InitBabylonJs(canvas, scene, camera, stage, uxControl)`**: Initializes the SDK with BabylonJS specific components.

### Tracking Control
- **`WEBARSDK.StartTracking()`**: Starts the AR tracking process.
- **`WEBARSDK.StopTracking()`**: Stops the AR tracking process.

### Camera Control
- **`WEBARSDK.SetCameraStream(mediaStream)`**: Sets an external media stream as the camera source.

### Callbacks - Lifecycle
- **`WEBARSDK.SetAppReadyCallback(callback)`**: Registers a callback function to be executed when the SDK is initialized.
- **`WEBARSDK.SetVideoStartedCallback(callback)`**: Registers a callback function to be executed when the camera video feed starts.
- **`WEBARSDK.SetStageReadyCallback(callback)`**: Registers a callback function to be executed when the AR stage is ready.
- **`WEBARSDK.SetTrackingStoppedCallback(callback)`**: Registers a callback function to be executed when AR tracking is stopped.

### Callbacks - Surface Tracking
- **`WEBARSDK.SetARModelPlaceCallback(callback)`**: Registers a callback function to be executed when a model is placed on a detected surface.
- **`WEBARSDK.SetResetButtonCallback(callback)`**: Registers a callback function to be executed when the reset button is clicked.
- **`WEBARSDK.SetGuideViewCallbacks(startCb, stopCb)`**: Registers callback functions for the start and stop events of a guide view animation.

### Callbacks - Marker Tracking
- **`WEBARSDK.SetMarkerDetectedCallback((markerId) => {})`**: Registers a callback function to be executed when a marker is detected. Receives the `markerId`.
- **`WEBARSDK.SetMarkerLostCallback((markerId) => {})`**: Registers a callback function to be executed when a marker is lost. Receives the `markerId`.
- **`WEBARSDK.SetAutoMarkerDetectionStyle(htmlEl, showInstructions)`**: Configures the UI style for automatic marker detection, including an HTML element and an option to show instructions.

### Face Tracking
- **`WEBARSDK.SetEyesMeshFilled(boolean)`**: Sets whether the eyes in the face mesh should be filled.
- **`WEBARSDK.SetMouthMeshFilled(boolean)`**: Sets whether the mouth in the face mesh should be filled.
- **`WEBARSDK.GetMouthOpenedMagnitude()`**: Returns the magnitude of the mouth opening, ranging from 0 to 1.
```

--------------------------------

### Configure SDK Parameters

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

HTML script tag showcasing various SDK configuration parameters like AR mode, auto-initialization, minimal UI, and debug mode.

```html
<script src="webar-sdk.js"
    webar-mode="surface-tracking"          <!-- AR mode: surface-tracking, marker-tracking -->
    auto-init="true"                       <!-- Auto-initialize: true, false -->
    auto-start-tracking="true"             <!-- Auto-start: true, false -->
    minimal-ui="true"                      <!-- Minimal UI: true, false -->
    external-camera-stream="true"          <!-- External camera: true, false -->
    render-scene-on-desktop="false"       <!-- Desktop preview: true, false -->
    debug-mode="true">                     <!-- Debug logging: true, false -->
</script>
```

--------------------------------

### Configure WebAR SDK Initialization

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

HTML script tag for initializing the WebAR SDK. It includes parameters for AR mode, auto-initialization, camera stream, and debugging.

```html
<!-- In index.html, line 46-58 -->
<!-- Replace the placeholder with your actual SDK path -->
<script src="path/to/your/webar-sdk.js"
    on-load="customProgressCallback"
    on-progress="customProgressCallback"
    on-error="customErrorCallback"
    webar-mode="surface-tracking"
    auto-init="true"
    auto-start-tracking="true"
    minimal-ui="true"
    render-scene-on-desktop="false"
    external-camera-stream="true"
    debug-mode="true">
</script>
```

--------------------------------

### CSS for WebAR Canvas

Source: https://github.com/blippar/webar-sdk-example/blob/main/babylon/marker-tracking/index.html

Styles the rendering canvas for the WebAR experience, ensuring it covers the entire screen and handles touch events appropriately.

```css
#renderCanvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
```

--------------------------------

### Initialize Face Filter with JavaScript

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/face-tracking/face-trynow.html

This line calls the `enableFaceFilter` function with an index of 0, indicating that the default face filter should be activated upon initialization.

```javascript
// default filter
enableFaceFilter(0);
```

--------------------------------

### Add Custom 3D Models

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

HTML snippet demonstrating how to add custom 3D models (e.g., GLTF) within the 'webar-stage' entity in 'index.html'.

```html
<!-- In index.html, replace demo objects -->
<a-entity webar-stage>
    <a-entity webar-ux-control="stageCursorUX: true; userGestureRotation: true; userGestureScale: true">
        <!-- Add your models here -->
        <a-gltf-model src="models/your-model.glb" position="0 0 0" scale="1 1 1"></a-gltf-model>
    </a-entity>
</a-entity>
```

--------------------------------

### Configure A-Frame Scene

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

HTML snippet for configuring the A-Frame scene, including setting the license key and disabling default UI elements for a cleaner AR experience.

```html
<a-scene 
    webar-scene="key: YOUR_LICENSE_KEY"
    xr-mode-ui="enabled: false"           <!-- Disable WebXR UI -->
    device-orientation-permission-ui="enabled: false"  <!-- Disable A-Frame permission UI -->
    loading-screen="enabled: false">       <!-- Disable A-Frame loading screen -->
```

--------------------------------

### BabylonJS Surface Tracking Initialization

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Initializes the WebAR SDK for surface tracking using BabylonJS. It requires a canvas, scene, camera, and stage mesh references. The SDK then manages AR content placement on detected surfaces and supports user gestures for interaction.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
  <script src="https://webar-sdk.blippar.com/releases/2.1.0/webar-sdk-v2.1.0.min.js?license-key=YOUR_LICENSE_KEY"
    webar-mode="surface-tracking"
    auto-init="true"
    auto-start="true"
    rendering-engine="babylonjs"
    show-guide-view="true">
  </script>
</head>
<body>
  <canvas id="renderCanvas" style="width:100vw; height:100vh;"></canvas>

  <script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });

    var createScene = function() {
      var scene = new BABYLON.Scene(engine);
      scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("./models/environment.dds", scene);

      var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 0, 0), scene);
      var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(5, 10, -2), scene);
      light.intensity = 0.7;

      // Create empty stage mesh - children will appear on detected surface
      var webarStage = new BABYLON.Mesh("webarStage", scene);

      // Create UX control mesh for gestures
      var webarUXControl = new BABYLON.Mesh("webar-ux-control", scene);
      webarUXControl.setParent(webarStage);
      webarUXControl.webarOptions = {
        stageCursorUX: true,
        userGestureRotation: true,
        userGestureScale: true
      };

      // Load 3D model
      BABYLON.SceneLoader.ImportMesh("", "./models/", "astronaut.glb", scene, function(meshes) {
        for (var mesh of meshes) {
          if (mesh.name !== '__root__') {
            mesh.setParent(webarUXControl);
            mesh.scaling = mesh.scaling.scale(0.60);
          }
        }

        // Initialize WebAR SDK with BabylonJS
        WEBARSDK.InitBabylonJs(canvas, scene, camera, webarStage, webarUXControl);
      });

      return scene;
    };

    var scene = createScene();
    engine.runRenderLoop(function() {
      if (scene && scene.activeCamera) {
        scene.render();
      }
    });

    // Stage ready callback
    WEBARSDK.SetStageReadyCallback(() => {
      console.info('Stage is ready!');
    });
  </script>
</body>
</html>
```

--------------------------------

### Custom WebAR SDK Handlers

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Shows how to implement custom loading screens, progress indicators, and error handling for the WebAR SDK using provided callback attributes and global functions. This allows for a more tailored user experience.

```html
<script src="https://webar-sdk.blippar.com/releases/2.1.0/webar-sdk-v2.1.0.min.js"
  on-load="customLoadCallback"
  on-progress="customProgressCallback"
  on-error="customErrorCallback"
  webar-mode="surface-tracking"
  auto-init="true"
  minimal-ui="true">
</script>

<script>
// Progress callback receives loading status
function customProgressCallback(progress) {
  console.log('Loading:', progress.percentage + '%');
  console.log('Step:', progress.current, 'of', progress.total);

  // Update custom progress UI
  document.getElementById('progressBar').style.width = progress.percentage + '%';
}

// Error callback receives error details
function customErrorCallback(error) {
  console.error('WebAR Error:', error.code);
  console.error('Message:', error.message);
  console.error('Instructions:', error.instruction);

  // Handle specific errors
  if (error.code === 'ERR_CAMERA_PERMISSION_DENIED') {
    showCameraPermissionDialog();
  } else if (error.code === 'ERR_WEBRTC_NOT_SUPPORTED') {
    showBrowserNotSupportedMessage();
  }
}

// SDK ready callbacks
WEBARSDK.SetAppReadyCallback(() => {
  console.log('SDK initialized and ready');
});

WEBARSDK.SetVideoStartedCallback(() => {
  console.log('Camera video started');
  hideLoadingScreen();
});

WEBARSDK.SetStageReadyCallback(() => {
  console.log('AR stage is ready for interaction');
});
</script>

```

--------------------------------

### Add Blippar License Key

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/SETUP_GUIDE.md

HTML snippet to add your Blippar license key to the A-Frame scene. This is essential for SDK authentication.

```html
<!-- In index.html, line 82 -->
<a-scene webar-scene="key: YOUR_LICENSE_KEY_HERE">
```

--------------------------------

### Vue.js Integration with WebAR SDK

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Demonstrates integrating the WebAR SDK into a Vue.js application using both the Composition API and Options API. It shows how to manage AR stage readiness and load scenes.

```vue
<!-- App.vue -->
<script setup>
import SceneLoader from './components/SceneLoader.vue';
import UIView from './components/UIView.vue';
</script>

<template>
  <SceneLoader />
  <UIView v-if="stageReady" />
</template>

<script>
export default {
  data() {
    return {
      stageReady: false
    }
  },
  created() {
    WEBARSDK.SetStageReadyCallback(() => {
      this.stageReady = true;
    });
  }
}
</script>

```

```vue
<!-- SceneLoader.vue -->
<template>
  <a-scene
    webar-scene="key: YOUR_LICENSE_KEY"
    vr-mode-ui="enabled: false"
    device-orientation-permission-ui="enabled: false"
    loading-screen="enabled: false">

    <a-camera webar-camera></a-camera>

    <a-assets timeout="60000">
      <a-asset-item id="model" src="models/astronaut.glb"></a-asset-item>
    </a-assets>

    <a-entity webar-stage position="0 1 -2">
      <a-entity
        gltf-model="#model"
        scale="0.35 0.35 0.35"
        webar-loadmonitor="elType: glb">
      </a-entity>
    </a-entity>

  </a-scene>
</template>

```

--------------------------------

### Configure License Key in HTML

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

Update the `index.html` file with your unique Blippar WebAR SDK license key. This key is essential for initializing and authenticating the SDK for use in your AR application.

```html
<!-- In index.html, line 31 -->
<a-scene webar-scene="key: YOUR_LICENSE_KEY_HERE">

```

--------------------------------

### CSS for Modern UI Styling

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

The `styles.css` file is responsible for the visual presentation of the WebAR application. It includes styles for a splash screen, responsive dialogs, smooth animations, and mobile-optimized layouts.

```css
/* Beautiful splash screen with gradients */
/* Responsive permission dialogs */
/* Smooth animations and transitions */
/* Mobile-optimized layouts */

```

--------------------------------

### React Integration with WebAR SDK

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Integrates the WebAR SDK into a React application using component lifecycle methods and refs to manage the AR scene. It includes loading assets and handling tracking resets.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';

class SceneLoader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { assetsReady: false };
  }

  componentDidMount() {
    this.setState({ assetsReady: true });
  }

  handleResetTracking = () => {
    window.WEBARSDK.SetTrackingStoppedCallback(() => {
      console.log("Tracking stopped");
      window.WEBARSDK.StartTracking();
    });
    window.WEBARSDK.StopTracking();
  };

  render() {
    return (
      <div>
        <a-scene
          webar-scene="key: YOUR_LICENSE_KEY"
          vr-mode-ui="enabled: false"
          device-orientation-permission-ui="enabled: false"
          loading-screen="enabled: false"
          renderer="colorManagement: true;">

          <a-camera webar-camera></a-camera>

          <a-assets timeout="60000">
            <a-asset-item id="astronaut" src="models/astronaut.glb"></a-asset-item>
            <a-asset-item id="shoe" src="models/shoe.glb"></a-asset-item>
          </a-assets>

          <a-entity webar-stage position="0 1 -2">
            {this.state.assetsReady && (
              <a-entity>
                <a-entity
                  gltf-model="#astronaut"
                  scale="0.25 0.25 0.25"
                  webar-loadmonitor="elType: glb">
                </a-entity>
                <a-entity
                  gltf-model="#shoe"
                  position="0 0 -0.5"
                  scale="4 4 4"
                  webar-loadmonitor="elType: glb">
                </a-entity>
              </a-entity>
            )}
          </a-entity>

        </a-scene>

        <button className="reset" onClick={this.handleResetTracking}>
          Reset
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<SceneLoader />);

```

--------------------------------

### Scale 3D Model by Factor

Source: https://github.com/blippar/webar-sdk-example/blob/main/babylon/surface-tracking/index.html

A utility function to scale a 3D object in Babylon.js by a given factor across all its scaling axes (x, y, z). This is useful for adjusting the size of imported models.

```javascript
var scaleByFactor = function(obj, factor) {
    obj.scaling.x = obj.scaling.x * factor;
    obj.scaling.y = obj.scaling.y * factor;
    obj.scaling.z = obj.scaling.z * factor;
}
```

--------------------------------

### Custom SDK Event Handlers in JavaScript

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

The `custom-handlers.js` file defines functions to manage SDK progress and errors. `customProgressHandler` displays loading progress and debugging information, while `customErrorHandler` provides user-friendly error messages and solutions.

```javascript
// Custom progress handler with real SDK data
function customProgressHandler(progress) {
    // Shows actual loading progress from SDK
    // Updates beautiful progress UI
    // Logs detailed debugging information
}

// Custom error handler with user-friendly messages  
function customErrorHandler(error) {
    // Displays helpful error dialogs
    // Handles different error types appropriately
    // Provides solutions for common issues
}

```

--------------------------------

### Handle UI Element Clicks for Filters and Palettes

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/face-tracking/face-trynow.html

Attaches click event listeners to filter and palette buttons. When clicked, these functions call `enableFaceFilter` or `enableColorPalette` respectively, to update the AR experience.

```javascript
var filterBtns = [ ff0, ff1, ff2, ff3, ff4 ];
var currentFilterIndex = 0;
var paletteBtns = [ ff4a, ff4b, ff4c, ff4d ];
var currentPaletteIndex = 0;

for (let i = 0; i < filterBtns.length; ++i) {
  filterBtns[i].addEventListener('click', () => {
    enableFaceFilter(i);
  });
}

for (let i = 0; i < paletteBtns.length; ++i) {
  paletteBtns[i].addEventListener('click', () => {
    enableColorPalette(i);
  });
}
```

--------------------------------

### Enable and Configure Color Palette with JavaScript

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/face-tracking/face-trynow.html

This function enables and configures a color palette by toggling its visibility and setting the facemesh material color based on the selected palette button. It also updates the current palette index.

```javascript
function enableColorPalette(activateIndex) {
  togglePalette(activateIndex);
  facemesh.setAttribute('material', 'color', paletteBtns[activateIndex].style.backgroundColor);
  currentPaletteIndex = activateIndex;
}
```

--------------------------------

### Customize Splash Screen Content

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/advanced-surface-tracking/readme.md

Modify the `custom-handlers.js` file to personalize the splash screen. You can change the logo, text, and other elements to match your brand identity, providing a unique user experience.

```javascript
// In custom-handlers.js, modify the splash content:
loadingScreen.innerHTML = `
    <div class="custom-splash-content">
        <div class="custom-splash-logo">
            <img src="YOUR_LOGO_URL" alt="Your Brand">
            <div class="logo-text">Your App Name</div>
        </div>
        <!-- ... rest of splash content ... -->
    </div>
`;

```

--------------------------------

### Set Custom Style for Auto Marker Detection

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/marker-tracking/index.html

Allows setting a custom HTML layout and controlling the visibility of scan instructions for auto marker detection. The SetAutoMarkerDetectionStyle function takes an HTMLElement for the custom division and a boolean to indicate whether scan instructions should be shown.

```javascript
/**
 * Sets custom style for auto marker detection(auto-marker-detection = true):
 * (1) Add your custom html layout for auto marker detection
 * (2) May disable scan instruction if needed, by default it is true
 * @param {HTMLElement} custom division
 * @param {boolean} showScanInstructions set it to false to disable it
 */
//WEBARSDK.SetAutoMarkerDetectionStyle(htmlElement, showScanInstructions)
```

--------------------------------

### Initialize Blippar WebAR SDK with HTML Configuration

Source: https://context7.com/blippar/webar-sdk-example/llms.txt

Demonstrates how to load the WebAR SDK using a script tag and configure its behavior through HTML attributes. This includes setting tracking modes, UI elements, and permission handling. Manual initialization is shown for when 'auto-init' is set to 'false'.

```html
<script src="https://webar-sdk.blippar.com/releases/2.1.0/webar-sdk-v2.1.0.min.js"
  webar-mode="surface-tracking"
  auto-init="false"
  auto-start="true"
  static-camera="true"
  render-scene-on-desktop="true"
  show-qr-card-on-desktop="true"
  ios-camera-permission="false"
  enable-photo-ui="true"

  logo-src="./images/logo.png"
  logo-width="116px"
  logo-height="116px"

  progress-dot-ring-scale="0.30"
  progress-dot-ring-color="#00AAFF"
  progress-ring-scale="0.36"
  progress-ring-color="#00FFFF"

  alert-border-color="#00FFFF"
  alert-background-color="#283747"
  alert-camera-permission-text="We need camera access for AR!"
  alert-camera-permission-button-text="Allow Camera"

  show-guide-view="true">
</script>

<script>
  // Manual initialization when auto-init is false
  WEBARSDK.Init();
</script>
```

--------------------------------

### Initialize and Configure WebAR SDK

Source: https://github.com/blippar/webar-sdk-example/blob/main/aframe/marker-tracking/index.html

Initializes the WebAR SDK and sets up callbacks for marker detection and loss. The SDK is initialized using WEBARSDK.Init(). Callbacks for marker detection and loss are registered using SetMarkerDetectedCallback and SetMarkerLostCallback respectively. These functions take a callback function that receives the markerId as an argument.

```javascript
WEBARSDK.Init(); // Give a callback when the WebAR Marker <a-entity webar-marker> is ready to track the marker image
WEBARSDK.SetMarkerDetectedCallback((markerId) => {
  console.info('Marker is detected for marker id: ', markerId);
});
// Give a callback when the WebAR Marker <a-entity webar-marker> is lost
WEBARSDK.SetMarkerLostCallback((markerId) => {
  console.info('Marker tracking is lost for marker id: ', markerId);
});
```