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:
|
|
Return Value: None | |
Initializes the widget | |
GlamAR.applyMakeupBySku | GlamAR.applyMakeupBySku(skuId, callback) |
Parameters:
|
|
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:
|
|
Return Value: None | |
Adds the listener to the given event name. | |
GlamAR.removeEventListener | GlamAR.removeEventListener(eventName, handlerFunction) |
Parameters:
|
|
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:
|
|
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
- 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
- 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"
}
- 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, String API_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 ( String skuID) 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 () |
- 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 contextactivity
- Requires the activity within which the makeup preview is being shownAPI_KEY
- Requires a valid developer API_KEY
- MakeUpProcessor
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
- This method is used to stop an already going video capture This method requires a
- captureImage
public void captureImage(com.fynd.glamarcore.utils.callbacks.ImageCaptureCallback
imageCaptureCallback)- 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
- This method is used to capture a snapshot of the preview. This needs a
- 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
- changeSKU
Sample Android SDK app
See the Glamar SDK quickstart sample on Gitlab for an example of this SDK in use.