Skip to main content

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(
          containerRef.current.id,
          "YOUR_ACCESS_KEY", // Replace with your actual Access Key
          {
            platform: "web",
          }
        );
        SetSdkInitialized(true);
        handleSdkEvents(); // This function is shown below
      } catch (error) {
        console.log(`SDK Init Failed: ${error.message}`);
      }
    }
  }, []);

  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 "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;
    }
  });
}

applyBySku​

Load a virtual try-on using applyBySku method and passing the relevant SKU Id.

window.GlamAR.applyBySku("YOUR SKU ID");

removeEventListener​

To be used for removing the registered events.

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

Initialization options​

Open the SDK with Live mode (web camera) straightaway. This bypasses the SDK home screen.

window.GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  configuration: {
    global: {
      openLiveOnInit: true,
    },
  },
});

Opens the SDK Home screen with relevant category module setup.

window.GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category:”required category”, //sunglasses/watches/makeup etc
});
//sets up the sdk home screen with desired category type and pre-loads the model without SKU.

Open the SDK later in Live mode (web camera) .

window.GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
});
//When you want to open the live camera without user interaction
window.GlamAR.open();

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