Glamar-sdk NPM

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/glamar-sdk@1.0.0/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.

mitt

@infinitebrahmanuniverse/nolb-gla @everything-registry/sub-chunk-1769

1.0.0

3 years ago