Skip to main content

React Setup

As you follow this tutorial, we recommend using our demo project reference to assist you in integrating the SDK into your project.

icon

React Demo Project

Prerequisites​

To follow along you should have basic knowledge of creating web apps with Javascript and it's ecosystem. In this tutorial we are going to use:

  • Webpack — Bundler for your JavaScript apps.
  • NPM — JavaScript package manager.

Don't worry if you don't have a lot of experience with these (or any experience at all). It is pretty straightforward to use and we will explain everything along.

Install node.js to be able to use NPM and Webpack if you haven't already.

  • Your access key must be setup under Pixelbin > GlamAR console.
  • Under tab GlamAR > Skin Analysis, should have atleast one app with its appId

Visit Getting Started Page if access key or appId has not been created

Installation​

Once you have obtained your access key and an appId, you're ready to integrate the GlamAR SDK into your Javascript project. This can be achieved through two primary methods:

  1. Installing it from NPM and using a build tool such as Parcel, WebPack, or Vite.
  2. Utilizing script tags

NPM​

Add GlamAR Web SDK to your project using npm:

npm i @glamario/core-web

Then you can simply import GlamAR SDK as follows

import * as GlamAR from "@glamario/core-web";

Because we use ES2017 syntax (such as import), this workflow assumes you are using a modern browser or a bundler/transpiler to convert your code to something older browsers understand. However, you are free to use any build tool that you prefer.

Script tag​

Instead of NPM you can add GlamAR Web SDK using script tag. Add the following code to an HTML file:

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

Initialization​

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

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category: "skinanalysis",
  configuration: {
    skinAnalysis: {
      appId: "YOUR_APP_ID",
    },
  },
});

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

NPM​

// Import GlamAR package
import * as GlamAR from "@glamario/core-web";

// Initialize GlamAR
function InitGlamAr() {
  const config = {
    platform: "web",
    category: "skinanalysis",
    configuration: {
      skinAnalysis: {
        appId: "YOUR_APP_ID",
      },
    },
  };
  GlamAR.init("container__frame_wrapper", "YOUR ACCESS KEY", config);
}

Script tag​

<head>
  <!-- Script to load GlmarAR SDK -->
  <script src="https://cdn.glamar.io/sdk/wrapper"></script>
</head>
<body>
  <!-- Div element where SDK will be inserted -->
  <div style='width: 640px; height: 360px' id='container__frame_wrapper'></div>
  <!-- Initialize GlamAR -->
  <script>
    (function() {
      GlamAR.init("container__frame_wrapper", "YOUR ACCESS KEY", {
        platform: "web",
        category: "skinanalysis",
        configuration: {
          skinAnalysis: {
            appId: "YOUR_APP_ID",
          },
        },
      });
    })();
  </script>
</body>

Replace 'YOUR ACCESS KEY' with your organization AccessKey.

Basic Functions​

skinAnalysis​

Launch Skin Analysis follow

GlamAR.skinAnalysis('start');

addEventListener​

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

GlamAR.addEventListener("*", (e) => {
  switch (e) {
    case "loaded":
      // Triggered when the SDK has successfully loaded
      break;
    case "skin-analysis":
      // Triggered when any skin analysis realted data changes
      if (payload?.options === "result") {
        console.log(payload.value);
      }
      break;
  }
});

removeEventListener​

To be used for removing the registered events.

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