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

Prerequisites

Node.js and npm installed on your machine
Basic knowledge of React and JavaScript
GlamAR Access Key (required for initializing the SDK)

Project Setup

Create a New React App

If you do not have a React app already, create one using Vite :

npm create vite@latest

change directory to your project after its setup and run

cd your-project-name
npm install

Include GlamAR SDK Script

Edit the public/index.html file and add the GlamAR SDK script inside the <head> tag:

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

Create the GlamARViewer Component

Create a new file src/GlamARViewer.js and add the following code:

import React, { useEffect, useRef, useState } from "react";

const GlamARViewer = () => {
  const containerRef = useRef(null);
  const [sdkInitialized, SetSdkInitialized] = useState(false);

  useEffect(() => {
    if (window.GlamAR && containerRef.current) {
      try {
        window.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,
            },
          },
        });
        SetSdkInitialized(true);
        handleSdkEvents(); // This function is shown below
      } catch (error) {
        console.log(`SDK Init Failed: ${error.message}`);
      }
    }
  }, []);

  function handleSdkEvents() {
    window.GlamAR.addEventListener("*", (e) => {
      switch (e) {
        case "loaded":
          //will be triggered when sdk is loaded and subsequent processes can be handled here.
          //i.e GlamAR.applyBySku("c3dd1bac-a060-4bc2-bfae-05092049d1fa");
          break;
      }
    });
  }

  return (
    <div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
      <h1>GlamAR AR Try-On</h1>
      <div
        id="glamar-container"
        ref={containerRef}
        style={{
          width: "100%",
          height: "600px",
          borderRadius: "8px",
          overflow: "hidden",
          border: "1px solid #eaeaea",
          background: "black",
          marginBottom: "20px",
        }}
      ></div>
    </div>
  );
};

Replace 'YOUR ACCESS KEY' with your organization AccessKey.

Above code provides you with a base code to initialize GlamAR SDK in your project.

`addEventListener`

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

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

Notes

Ensure you replace 'YOUR_ACCESS_KEY' with a valid key provided by GlamAR.
SKU IDs must match the products configured on the GlamAR platform.
Further customization of the viewer layout and control buttons is possible based on your project requirements.
Also make sure to add the project url in GlamAR Console > Model Config > Domain Config

Prerequisites​

Project Setup​

Create a New React App​

Include GlamAR SDK Script​

Create the GlamARViewer Component​

addEventListener​

Notes​