NAV

WebAR SDK

WebAR SDK Introduction

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

Installation

The WebAR SDK can be loaded as a script in html and also it can be installed in your application from NPM. PLease follow the following steps to install the WebAP SDK.

Via script tags:

<script src="https://unpkg.com/glamar-sdk@1.0.0/dist/glamar-sdk.umd.js"></script>

Using npm:

npm install glamar-sdk

Using yarn:

yarn add glamar-sdk

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_API_KEY>>);
GlamAR.addEventListener('opened', () =>
    GlamAR.applyMakeupBySku(<<SKU_ID>>)
);

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(optional): 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 ID
  • callback(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 event
  • handlerFunction: 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 event
  • handlerFunction: 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)
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: 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.

Sample WebAR SDK app

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


Android SDK

Android SDK Introduction

With GlamAR Android SDK, you can apply different SKUs such as lipstick, blush, eyeliner and eyeshadow. **Note :- You can only apply SKUs that you’ve already configured in the Admin Panel. **With the GlamAR SDK, you can take snapshots of the preview, change the makeup opacity and even capture a video recording. Because the GlamAR SDK can apply makeup in real-time, you can use it in applications such as displaying your shop’s cataolgue.

Key capabilities

Getting Started

Before you begin

  1. Add the Artifactory Repository dependency to your module's app-level gradle file, which is usually app/build.gradle. For bundling the model in your app:
   android{   
        packagingOptions {
            //This is required since the aar is built
            //for all archs, while building your app this will
            //will ensure it will pick the correct native files           
            pickFirst '**/*.so'
        }   
   }   

   repositories {
        maven{url 'https://dl.bintray.com/glamario/Glamar'}
    }

    dependencies {    
        implementation "com.fynd:glamarcore-v1:1.0.0"
        implementation "com.fynd:artoolkit-v1:1.0.0"
    }
  1. Since the app required Internet, Camera and External Storage permissions, you will have to declare them in your app's AndroidManifest.xml file ( *Note :- For Android 6.0 and higher, you'll have to request permissions in run-time) *:
      <application ...>
        ...
        <uses-permission android:name="android.permission.INTERNET"/>
        <uses-permission android:name="android.permission.CAMERA"/>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
      </application>

Initialize the GlamAR SDK

Before you apply an SKU, You will have to initialize the SDK with your API key to fetch the available list of SKUs, which you have pre-configured in the admin panel.

new Glamar.Builder()
               .setAPIKey("YOUR API KEY") //Replace this with your API Key
               .setContext(getApplicationContext()) //Application Context
               .setAuthenticationCallback(new GlamARAutenticationCallback() { //Callback for various lifecycle of api authentication
                   @Override
                   public void onAuthenticationDone(List<SKU> list) {
                        //Returns list of SKUs on successful authentication
                   }

                   @Override
                   public void onAuthenticationFailed(String reason) {
                        //Called when authentication fails
                   }

                   @Override
                   public void onAuthenticationStart() {
                       //Start of authentication
                   }
               })
               .build();

The returned list of SKUs can then be used for UI purposes, as it contains the following parameters:

Variable Type Function Usage
Id Integer getId() Contains the SKU id
--- --- --- ---
name String getName() Contains the SKU name
MakeUpType MakeUpType ( ENUM) getCategory() Contains the SKU Type :- Lipstick, Blush, EyeLiner, EyeShadow
colorIntensity Integer getColorIntensity() Contains the default color intensity for the SKU
color String getColor() Contains the color hex for the SKU
patternName String getPatternName() Contains the pattern name for the SKU

Configure the Layout

You will have to configure the layout of the activity, where you wish to show the makeup, to integrate the custom views that are required by the SDK. You will have to use the com.fynd.glamarcore.camera.common.CameraSourcePreview ** class which should have **com.fynd.glamarcore.camera.common.GraphicOverlay as it’s child in the xml layout. The GraphicOverlay view is used by the SDK to display the camera preview after having applied the desired SKU , whereas the CameraSourcePreview is used to handle the preview, i.e, start or stop the preview . *By default no SKU is applied. *

<com.fynd.glamarcore.camera.common.CameraSourcePreview
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <com.fynd.glamarcore.camera.common.GraphicOverlay
            android:id="@+id/graphicOverlay"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

</com.fynd.glamarcore.camera.common.CameraSourcePreview>

Assign these views to variables in the activity as these will be later required by the MakeUp Processor.

//CameraSourcePreview object declaration
CameraSourcePreview cameraPreview;

//GraphicOverlay object declaration
GraphicOverlay graphicOverlay;

//Find the views and initialize the variables
cameraPreview=findViewById(R.id.cameraPreview);

graphicOverlay=findViewById(R.id.graphicOverlay);

Prepare the MakeUp Processor

To start the real-time application of the make up, we require 2 more things. One is a CameraSource, which will provide the camera frames, the other is the MakeUp Processor, which will process these camera frames.

Creating the CAMERASOURCE

Creating the CameraSource is relatively easy. We have already pre-defined a CameraSource in the SDK, however if you wish to create your own CameraSource, you can do so by reflecting the class and then add on your own customizations.

 private CameraSource commonCameraSource;

  //Initializing the cameraSource object with the previous graphicOverlay object
    commonCameraSource = new CameraSource(this, commonGraphicOverlay);

Here we pass in the GraphicOverlay variable, that we defined above, so that the camera frames are displayed within it.

Creating the makeup-processor

Now we need to initialize a MakeUpProcessor instance and then pass it to the CameraSource object that we’ve already created.

//Makeup Processor
private MakeUpProcessor makeUpProcessor;

//initialize MakeUpProcessor
makeUpProcessor = new MakeUpProcessor(getApplicationContext(), 
                                    activityContext, 
                                    "YOUR_API_KEY");

The MakeUpProcessor requires the ApplicationContext, the Activity/Fragment context ( where the preview is being shown ) and the API key.

Having initialized the MakeUpProcessor, we need to pass it into the CamerSource object, so that it acts as the FrameProcessor for the camera frames

//Set the Frame processor
commonCameraSource.setMachineLearningFrameProcessor(makeUpProcessor);

Starting the preview

After all the above steps are done, all that we are left to do is to start the preview

try {
    //Start the preview
    commonCameraSourcePreview.start(commonCameraSource);
} catch (IOException e) {
    e.printStackTrace();
}

Now you should be able to view a default preview with no SKU being applied. To apply any SKU, pass the SKU id to the processor

//Apply makeup on cameraPreview callback
makeUpProcessor.changeSKU("<SKU-ID>");

MakeUpProcessor

Constructor Summary

Constructor and Description
MakeUpProcessor(android.content.Context context, android.app.Activity activity,StringAPI_KEY)

Constructor for this class

Constructors

Method Summary

Modifier and Type Method and Description
void captureImage(com.fynd.glamarcore.utils.callbacks.ImageCaptureCallback imageCaptureCallback)
This method is used to capture a snapshot of the preview.
void changeSKU(StringskuID)
This changes the SKU to the given id.
void endVideoCapture(com.fynd.glamarcore.utils.callbacks.VideoCaptureCallback videoCaptureCallback)
This method is used to stop an already going video capture This method requires a VideoCaptureCallback variable, where the video file [ *.mp4] will be returned
void setMakeupOpacity(float makeupOpacity)
This method is used to change the MakeUpOpacity for the current SKU applied.
void setToNoFilterMode()
void startVideoCapture()
This method is used to start the video capture of the preview
void stop()

Sample Android SDK app

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