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

Events

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

• Apply makeup such as lipstick, blush, eyeliner and eyeshadow in real-time.
• Capture images of the live preview while the makeup is applied
• Capture video of the live preview while the makeup is applied
• Change makeup opacity while the makeup is applied
• Average 12+ FPS

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:

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 for this class

Constructors

Method Summary

• Constructor Detail
  • MakeUpProcessor
    • public MakeUpProcessor(android.content.Context context, android.app.Activity activity, [String](https://docs.oracle.com/javase/8/docs/api/java/lang/String.html?is-external=true) API_KEY)
      • Constructor for this class
      • Parameters: context - Requires the application context activity - Requires the activity within which the makeup preview is being shown API_KEY - Requires a valid developer API_KEY

• Method Detail

  • changeSKU
    • public void changeSKU([String](https://docs.oracle.com/javase/8/docs/api/java/lang/String.html?is-external=true) skuID)
      • This changes the SKU to the given id. If an invalid SKU id is provided, then the original camera preview is shown
      • Parameters: skuID - The SKU Id to be applied
  • setToNoFilterMode
    • public void s
      • This changes the preview back to no SKUs
  • startVideoCapture
    • public void startVideoCapture()
      • This method is used to start the video capture of the preview
  • endVideoCapture
    • public 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
      • Parameters: videoCaptureCallback
  • captureImage
    • public void captureImage(com.fynd.glamarcore.utils.callbacks.ImageCaptureCallbackimageCaptureCallback)
      • This method is used to capture a snapshot of the preview. This needs a ImageCaptureCallback variable as a callback where the bitmap is returned
      • Parameters: imageCaptureCallback
  • setMakeupOpacity
    • public void setMakeupOpacity(float makeupOpacity)
      • This method is used to change the MakeUpOpacity for the current SKU applied.
      • Parameters: makeupOpacity - This value must be in the range of 0.0-1.0

Sample Android SDK app

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