GlamAR Web SDK

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

Installation

Via script tags:

<script src="https://unpkg.com/[email protected]/dist/glamar-sdk.umd.js"></script>

Via npm:

Using npm:

npm install glamar-sdk

Using yarn:

yarn install glamar-sdk

Usage

If you are using via npm, first add:

import * as GlamAR from "glamar-sdk";

Then:

// Pass in the id of a container and your API key
GlamAR.init("GlamAR-module", <<YOUR_API_KEY>>);
GlamAR.addEventListener('opened', () =>
  GlamAR.applyMakeupBySku(<<SKU_ID>>)
);

also call applyMakeupBySku on any event to apply the makeup

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

API Reference

Methods

| Methods | Description | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | GlamAR.init | GlamAR.init(containerId, apiKey, openLiveMakeup) | | | Parameters: containerId: string, id of the div to mount the widget apiKey: string, api key openLiveMakeup: boolean, whether to open widget in live mode. | | | Return Value: None | | | Initializes the widget | | GlamAR.applyMakeupBySku | GlamAR.applyMakeupBySku(skuId, callback) | | | Parameters: skuId: number, a sku IDcallback(optional): function, fires after the makeup effect is applied | | | Return Value: None | | | Changes the makeup effect by the given sku ID, you could retrieve your sku information from admin panel. | | GlamAR.addEventListener | GlamAR.addEventListener(eventName, handlerFunction) | | | Parameters: eventName: string, a named eventhandlerFunction: function, a handler | | | Return Value: None | | | Adds the listener to the given event name. | | GlamAR.removeEventListener | GlamAR.removeEventListener(eventName, handlerFunction) | | | Parameters:eventName: string, a named eventhandlerFunction: function, a handler | | | Return Value: None | | | Removes the given listener for the event name. | | GlamAR.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. | | GlamAR.reset | GlamAR.reset() | | | Parameters: None | | | Return Value: None | | | Removes all the makeup effects from the canvas. | | GlamAR.close | GlamAR.close() | | | Parameters: None | | | Return Value: None | | | Closes canvas and back to main widget page. | | GlamAR.snapshot | GlamAR.snapshot(contentType, callback) | | | Parameters:contentType: string, valid value: base64 or blob | | | Return Value: image in base64 or blob | | | Takes a snapshot of current result window. | | GlamAR.isLoaded | GlamAR.isLoaded() | | | Parameters: None | | | Return Value: true if the module is loaded else false | | | Returns status of module loading. | | GlamAR.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: NoneThis event is fired when GlamAR module is loaded | | opened | Payload: NoneThis event is fired when the GlamAR module is opened. | | closed | Payload: NoneThis event is fired when the canvas is closed and user returns to main widget page. | | camera-opened | Payload: NoneThis event is fired when the camera is opened. | | camera-closed | Payload: NoneThis event is fired when the camera is closed. | | camera-failed | Payload: NoneThis 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: NoneThis event is fired when a given photo loaded on the canvas. | | sku-applied | Payload: NoneThis event is fired when a given sku effects are applied. | | sku-failed | Payload: NoneThis event is fired when a given sku is not applied successfully. | | reset | Payload: NoneThis event is fired when all the effects are reset. | | error | Payload: ErrorThis event is fired anytime an error occurs. |

Sample WebAR SDK app

See the Glamar SDK quickstart sample on Gitlab for an example of this SDK in use.