GlamAR React Demo

GlamAR React Demo provides quick start to integrate GlamAR SDK in react platform.

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.pixelbinz0.de. 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:

Open and edit /etc/hosts.

Insert the following lines:

127.0.0.1       local.sdk.glamar.io

6. Login to https://console.pixelbin.io/

7. Goto GlamAR > SDK Config > Allowed Domains and add https://local.sdk.glamar.io

To run the GlamAR React Demo locally, follow the steps below:

1. Clone the repository for the GlamAR React Demo and install the dependencies:

npm install

2. Run the development server:

npm start

3. Open the project in your browser:

• With certificate: https://local.sdk.glamar.io:9090

Project Structure

Root
├── index.html                             # HTML template used by HtmlWebpackPlugin
│
├── ssl/
│   ├── key.pem                            # Local dev SSL key
│   └── cert.pem                           # Local dev SSL certificate
│
├── src/
│   ├── index.jsx                          # Entry point, renders <App />
│   ├── App.jsx                            # Root component handling access token flow
│   ├── GlamARDemo.jsx                     # Component that initializes GlamAR SDK and buttons
│   ├── styles/
│   │   └── app.css                        # All global CSS styles
│
├── .babelrc                               # Babel config (if using JSON format)
├── babel.config.js                        # Babel config (if using JS format)
├── webpack.config.js                      # Webpack config with SSL and dev server
├── package.json                           # Project dependencies and scripts
├── README.md                              # Setup instructions, SDK integration guide

📡 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
error	Any error from SDK

---

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