GlamAR Web SDK

GlamAR Web SDK provides a set of APIs that enable real-time virtual makeup try-on on a web page.

Running Locally

Prerequisites

Make sure you have installed the following prerequisites:

• npm: Node package manager.

You can install npm with Node.js. If you don't have it installed yet, you can follow the instructions here.

Setup Local SSL Certificate

1. Install mkcert. Refer to this link to install it.

2. Use mkcert to generate a locally-trusted development certificate. Run the following command:

   mkcert -key-file key.pem -cert-file cert.pem “glamar.io”

3. Create a folder named ssl at the root level of the repository.

4. Copy the two .pem files (key.pem and cert.pem) generated by the above command into the ssl folder.

5. Bind localhost (or 127.0.0.1) to the host name local.sdk.glamar.io. To do this:

   Open and edit /etc/hosts.

   Insert the following lines:

   127.0.0.1       local.sdk.glamar.io

To run the GlamAR Web SDK locally, follow the steps below:

1. Clone the repository for the GlamAR Web SDK and install the dependencies:

npm install

2. Run the development server:

npm start

3. Open the project in your browser:

• Without certificate: http://localhost:4000
• With certificate: https://local.pixelbinz0.de:9090

Installation

Via NPM

To install GlamAR SDK run:

# Using npm
npm i @glamario/core-web

# Using yarn
yarn add @glamario/core-web

# Using pnpm
pnpm add @glamario/core-web

Make sure your below dependency is present in package.json:

"dependencies": {
    "@glamario/core-web": "^1.0.3"// or your desired version
  },

Via Script Tags:

To use the GlamAR SDK via script tags, add the following to your HTML:

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

Usage

To use GlamAR in your project, first import it:

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

Then, initialize the SDK and set up event listeners:

// Pass in the ID of a container and your API key
GlamAR.init('GlamAR-module', '<<YOUR_API_KEY>>');

// Set up an event listener for when the module is opened
GlamAR.addEventListener('opened', () => GlamAR.applyBySku('<<SKU_ID>>'));

// Call applyMakeupBySku on any event to apply makeup
<button onclick="GlamAR.applyBySku('<<SKU_ID>>')">Apply Lip Color</button>;

Build and Deploy

To build the SDK, use the following commands depending on your environment:

Development Build

npm run build-staging

Production Build

npm run build-prod

The build outputs are located in the dist directory, which you can deploy to a CDN or use directly in your application.

📡 API Reference

| Method | Description | | ---------------------------------- | ------------------------------------------------ | | GlamAr.init(config) | Initializes the SDK | | GlamAr.applySku(skuId) | Applies a specific SKU | | GlamAr.applyByCategory(category) | Applies the first SKU from a category | | GlamAr.snapshot() | Captures a snapshot (fires photo-loaded event) | | GlamAr.reset() | Clears current applied items | | GlamAr.open() / close() | Opens or closes the live preview mode | | GlamAr.on(event, cb) | Registers event listeners |

🔔 Supported Events

| Event | Description | | ---------------------- | ---------------------------- | | loaded | SDK initialized | | opened, closed | Widget opened or closed | | photo-loaded | Snapshot captured | | camera-opened | Camera successfully accessed | | camera-closed | Camera stopped | | camera-failed | Error accessing camera | | subscription-invalid | API key expired or invalid | | skin-analysis | Skin analysis data received | | error | Any error from SDK |

Detailed documentation available at https://www.glamar.io/docs/

✅ License

MIT