GlamAR Web Demo App

Built With

• React
• Node.js
• Express
• Webpack

Prerequisites

Make sure you have installed all of the following prerequisites:

• Node.js
• npm

Clone the repository

To clone the repository:

$ git clone git@github.com:gofynd/glamar-web-demo.git

You can follow a thorough guide here

Starting the project

To start the project locally,

1. Install npm packages

yarn install

2. Setup local SSL certificate

1. First install mkcert. Refer this link to install it.
2. We will be using mkcert to generate locally-trusted development certificate. Use this command to generate SSL certificate

$ mkcert -key-file key.pem -cert-file cert.pem "*.glamar.io"

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

4. Copy the two .pem files (i.e key.pem & cert.pem) generated above command to ssl folder

5. Next up we will bind localhost or 127.0.0.1 to host name i.e local.sdk.glamar.io

6. open and edit /etc/hosts and insert

127.0.0.1       local.sdk.glamar.io

How to Open /etc/hosts File

• Mac: Use Terminal and type sudo nano /etc/hosts.
• Windows: Open hosts file in Notepad as administrator from C:\Windows\System32\drivers\etc.

Remember to be cautious when editing system files like hosts.

3. Running the Project

1. To run the project locally, use the following command:

yarn serve

This command will start the server, and your code will be running on http://localhost:59089.

2. Open your web browser and navigate to http://localhost:59089 to view the project.

4. Setting Up GlamAR Activation Key

To use GlamAR's features, update the TryonFrame.jsx file with your GlamAR Activation Key. In useEffect, replace 'Replace it with your GlamAR Activation Key' with your actual key. For SKU-specific features, refer to the GlamAR SDK documentation.

5. Usage

If you are using via npm, then you need to import the GlamAR SDK as a module. Then you can call the APIs available on the GlamAR object.

Import GlamAR module

import * as GlamAR from 'glamar-sdk';

Init GlamAR module with your API KEY

// Pass in the id of a container and your API key
GlamAR.init('GlamAR-module', <<YOUR_ACCESS_KEY>>, {
  platform: 'web',
  mode: ’private’,
  hideTryOnScreen: false,
  theme: 'dark',
  hideLiveCamera: false,
  hideModelTryOn: false,
  hideUploadMode: false 
});
GlamAR.addEventListener('opened', () =>
    GlamAR.applyBySku(<<SKU_ID>>)
);

Call applyBySku on any event to apply the SKU

<button onclick="GlamAR.applyBySku(<<SKU_ID>>)">Apply Lip Color</button>

API Reference

Methods

Methods	Description
init	GlamAR.init(containerId, apiKey, options)
	Parameters: containerId: string, id of the div to mount the widget apiKey: string, api key options(optional): boolean, whether to open widget in live mode.
	Return Value: None
	Initializes the widget
applyBySku	GlamAR.applyBySku(skuId, callback)
	Parameters: skuId: number, a sku ID callback(optional): function, fires after the VTO effect is applied
	Return Value: None
	Changes the VTO effect by the given SKU ID, you could retrieve your SKU information from the admin panel.
addEventListener	GlamAR.addEventListener(eventName, handlerFunction)
	Parameters: eventName: string, a named event handlerFunction: function, a handler
	Return Value: None
	Adds the listener to the given event name.
removeEventListener	GlamAR.removeEventListener(eventName, handlerFunction)
	Parameters: eventName: string, a named event handlerFunction: function, a handler
	Return Value: None
	Removes the given listener for the event name.
getAllSKUs	GlamAR.getAllSKUs()
	Parameters: None
	Return Value: Promise that resolves to an array of SKUs available for the given API key.
	Returns an array of available SKUs for the given API key.
reset	GlamAR.reset()
	Parameters: None
	Return Value: None
	Removes all the makeup effects from the canvas.
close	GlamAR.close()
	Parameters: None
	Return Value: None
	Closes canvas and back to main widget page.
snapshot	GlamAR.snapshot(contentType)
	Parameters: contentType: string, valid value: `base64` or `blob`
	Return Value: image in `base64` or `blob`
	Takes a snapshot of current result window.
isLoaded	GlamAR.isLoaded()
	Parameters: None
	Return Value: `true` if the module is loaded else `false`
	Returns status of module loading.
isLoading	GlamAR.isLoading()
	Parameters: None
	Return Value: `true` if the module is loading else `false`
	Returns status of module loading.

Events

Events	Description
loaded	Payload: None This event is fired when GlamAR module is loaded
opened	Payload: None This event is fired when the GlamAR module is opened.
closed	Payload: None This event is fired when the canvas is closed and user returns to main widget page.
camera-opened	Payload: None This event is fired when the camera is opened.
camera-closed	Payload: None This event is fired when the camera is closed.
camera-failed	Payload: None This event is fired when the camera failed. Either user refuses to grant permission or the app is unable to retrieve video stream normally.
photo-loaded	Payload: None This event is fired when a given photo loaded on the canvas.
sku-applied	Payload: None This event is fired when a given sku effects are applied.
sku-failed	Payload: None This event is fired when a given sku is not applied successfully.
reset	Payload: None This event is fired when all the effects are reset.
error	Payload: Error This event is fired anytime an error occurs.

---