npm package: @glamario/core-web
Description: GlamAR Web SDK provides a set of APIs that enable real-time virtual makeup try-on on a web page.
Author: GlamAR
Latest version: 1.0.4

# 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](https://nodejs.org/).

## 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:

   ```bash
   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:

   ```bash
   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:

```sh
npm install
```

2. Run the development server:

```sh
npm start
```

3. Open the project in your browser:

- Without certificate: [http://localhost:4000](http://localhost:4000)
- With certificate: [https://local.pixelbinz0.de:9090](https://local.pixelbinz0.de:9090)

## Installation

### Via NPM

To install GlamAR SDK run:

```bash
# 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`:

```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:

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

## Usage

To use GlamAR in your project, first import it:

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

Then, initialize the SDK and set up event listeners:

```js
// 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

```sh
npm run build-staging
```

### Production Build

```sh
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