NAV Navbar
html

Introduction

The JavaScript SDK provides a set of client-side primitives that enable virtual makeup try-on features on a webpage.

Basic Setup

Include the following code snippet in an HTML page.

<script>
  (function (d,k) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://plugins-media.perfectcorp.com/smb/sdk.js?apiKey=' + k;
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })(document, 'for-draft');
</script>
<div id="YMK-module"></div>

Make sure to replace for-draft with your API key.

The JavaScript SDK doesn’t have any standalone files that need to be downloaded or installed. Instead, put a piece of regular JavaScript code into a HTML page that asynchronously loads the SDK into a webpage. The async load means that it does not block loading other elements of a webpage. Insert the following code snippet after the beginning of <body> tag in the HTML code of the page to display the web module.

The code snippet loads and initiates the SDK. A global variable, “YMK”, will be registered after page is initialized. This variable is designed for the webpage to communicate with the SDK.

Predefined callback

Declare a global function 'window.ymkAsyncInit' on a webpage. It will be fired when the SDK has finished loading.

<script>
  window.ymkAsyncInit = function() {
    YMK.init();
  }
</script>

Apply makeup effect

Add a button or a link calling YMK.applyMakeupBySku.

<button onClick="YMK.applyMakeupBySku('LIP_COLOR_01_01')">
  Apply Lip Color
</button>

Reference

Methods

Methods
YMK.init YMK.init(args)
    Parameters:
  • args: JSONObject
    • autoOpen(optional): boolean, default is false; whether to open the YMK web module after script is loaded.
    • hideButtonsOnResult(optional): boolean, default is false; whether to hide all the buttons on result page or not.
    Return Value: None
    Passes initial arguments to change the default behavior of YMK module.
YMK.open YMK.open([loadLiveMode, image])
    Parameters:
  • loadLiveMode(optional): boolean, whether to open the YMK web module and enter live mode or not
  • image(optional): base64OrBlob, whether to open the YMK web module and enter photo mode. Both base64 format image or a blob of image object is supported.
    Return Value: None
    Open YMK web module page.
YMK.applyMakeupBySku YMK.applyMakeupBySku(skuId, callback)
    Parameters:
  • skuId: string, 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 perfect SMB.
YMK.applyMakeupByLook YMK.applyMakeupByLook(lookId, callback)
    Parameters:
  • lookId: string, a look ID
  • callback(optional): function, fires after the makeup effect applied
    Return Value: None
    Changes the makeup effect by the given look ID, you could retrieve your look information from perfect SMB.
YMK.addEventListener YMK.addEventListener(eventName, handlerFunction)
    Parameters:
  • eventName: string, a named event
  • handlerFunction: function, a handler function
    Return Value: an EventListenerIdentifier
    Adds the listener to the given event name. Returns an identifier for this listener that can be used with removeEventListener.
YMK.removeEventListener YMK.removeEventListener(EventListenerIdentifier)
    Parameters:
  • EventListenerIdentifier: integer
    Return Value: None
    Removes the given listener, which should have been returned by the YMK.addEventListner above.
YMK.reset YMK.reset()
    Parameters: None
    Return Value: None
    Removes all the makeup effects from the canvas.
YMK.closeEngine YMK.closeEngine()
    Parameters: None
    Return Value: None
    Closes canvas and back to launcher page.
YMK.close YMK.close()
    Parameters: None
    Return Value: None
    Closes YMK module page.
YMK.pause YMK.pause()
    Parameters: None
    Return Value: None
    Works on live mode only. To pause the live-stream.
YMK.resume YMK.resume()
    Parameters: None
    Return Value: None
    Works on live mode only. To resume the live-stream.
YMK.snapshot YMK.snapshot(contentType, callback)
    Parameters:
  • contentType: string, valid value:['base64', 'blob']
  • callback: function
    • base64OrBlob: An image in base64 format or binary format
    Return Value: None
    Takes a snapshot of current result window and retrieves the returned object from the given callback function.
YMK.isLoaded YMK.isLoaded()
    Parameters: None
    Return Value: None
    Whether a live streaming or a given photo is loaded on canvas or not.
YMK.getTuner YMK.getTuner(type)
    Parameters:
  • type: string, valid value:['eyebrow']
    Return Value: A Tuner Object
    Please check EyebrowTuner for details
YMK.enableCompare YMK.enableCompare()
    Parameters: None
    Return Value: None
    Enable compare mode
YMK.disableCompare YMK.disableCompare()
    Parameters: None
    Return Value: None
    Disable compare mode

Events

The YMK JavaScript API event model creates and manages its own custom events.

Events
cameraClosed function()
    Arguments: None
This event is fired when the camera is closed.
cameraFailed function()
    Arguments: 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.
cameraOpened function()
    Arguments: None
This event is fired when the camera is opened.
compare function()
    Arguments: None
This event is fired when the compare mode is enabled.
compareDisabled function()
    Arguments: None
This event is fired when the compare mode is disabled.
closed function()
    Arguments: None
This event is fired when the YMK module is hidden.
engineClosd function()
    Arguments: None
This event is fired when the canvas is closed and user returns to launcher page.
loaded function()
    Arguments: None
This event is fired when a given photo or a live stream is loaded on the canvas.
loading function(progress)
    Arguments:
  • progress: integer, from 10 to 100
This event is fired when the YMK module is loading.
opened function()
    Arguments: None
This event is fired when the YMK module is opened.
photoLoaded function()
    Arguments: None
This event is fired when a given photo loaded on the canvas.
photoSaved function()
    Arguments: None
This event is fired when a photo is saved.
reset function()
    Arguments: None
This event is fired when all the effects are reset.
videoLoaded function()
    Arguments: None
This event is fired when a live stream is loaded on the canvas.
zoom function()
    Arguments: None
This event is fired when zooming.