Skip to main content

Web Setup

GlamAR SDK enables real-time AR try-ons directly on web pages while enhancing the AR experience through live camera feed and image rendering. Use the following steps to install and configure the SDK to unlock immersive AR features.

Installation​

The GlamAR SDK can be loaded as a script tag. Follow the steps below to integrate the GlamAR SDK.

Load SDK via script tags

<script src="https://www.glamar.io/sdk/wrapper"></script>

Init​

To get started, The first step is to initialize GlamAR by calling the initialize function:

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category: "skinanalysis",
  configuration: {
    global: {
      openLiveOnInit: true,
      disableClose: false,
      disableBack: false,
    },
    skinAnalysis: {
      version: "GlamGen",
      defaultFilter: true,
      startScreen: true,
    },
  },
});

Replace 'YOUR CONTAINER ID' with your CSS container ID and 'YOUR ACCESS KEY' with your organization access key.

addEventListener​

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events. Refer list of events

GlamAR.addEventListener("*", (e) => {
  switch (e) {
    case "skin-analysis":
      if (payload?.options === "result") {
        console.log(payload.value);
      }
      break;
  }
});

removeEventListener​

To be used for removing the registered events.

window.GlamAR.removeEventListener("*", (e) => {});

Example​

Here's an example demonstrating the usage of GlamAR SDK

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Temp Sciprt for GlamAR SDK" />
    <title>GlamAR React Demo</title>
    <script src="https://www.glamar.io/sdk/wrapper"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f7f7f7;
      }
      .container {
        max-width: 1000px;
        margin: 0 auto;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
      }
      h1 {
        color: #333;
      }
      #container__frame_wrapper {
        width: 100%;
        height: 600px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eaeaea;
        background: black;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GlamAR AR Try-On</h1>
      <!-- SDK Container -->
      <div id="container__frame_wrapper"></div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        try {
          window.GlamAR.init(
            "container__frame_wrapper",
            "YOUR ACCESS KEY", // <<--- Replace this with your GlamAR Access Key
            {
              platform: "web",
              category: "skinanalysis",
              configuration: {
                global: {
                  openLiveOnInit: true,
                  disableClose: false,
                  disableBack: false,
                },
                skinAnalysis: {
                  version: "GlamGen",
                  defaultFilter: true,
                  startScreen: true,
                },
              },
            }
          );

          window.GlamAR.addEventListener("*", (event) => {
            switch (event) {
              case "loaded":
                console.log("SDK Loaded");
                break;
              case "opened":
                console.log("SDK Opened");
                break;
              case "closed":
                console.log("SDK Closed");
                break;
              case "camera-failed":
                console.log("SDK Camera Failed");
                break;
              case "sku-applied":
                console.log("SDK Sku applied");
                break;
              case "sku-failed":
                console.log("SDK Sku Failed");
                break;
              case "error":
                console.log("SDK Error", event);
                break;
            }
          });
        } catch (error) {
          console.log("SDK Init Failed: " + error.message);
        }
      });
    </script>
  </body>
</html>