/**
* @param {[object]} init_options [ Camera initializing options ]
* @return {[void]} none
*/
init(init_options);{primary} Calling this method will initialize the virtual tryon experiance
| # | Name | Type | Description |
|---|---|---|---|
| 1 | key |
string | The Tryon license key. Click here - for tutorial on generating api key |
| # | Name | Type | Description |
|---|---|---|---|
| 2 | ExID |
string | The ID of the html container, inside which the camera has to be initialized |
| 3 | brandLogo |
string | To add your brand logo, pass the logo url to this property |
document.addEventListener("init", function () {
console.log("Tryon Initialized");
});{info} The Event is triggered once the Virtual tryon initialization is complete
/**
* @return {[void]} none
*/
start();{info} Calling this method to will start the Virtual Tryon camera. Note: Call the
init()method before calling start.
/**
* @param {[string]} action [Options: 'add', 'remove' ]
* @param {[object]} tryonPayload [Payload with parameters required for Tryon]
* @param {[string]} selectScreen [Options: 'screen1', 'screen2'; Default: screen1.
* Specify the screen to which the filter should be applied in split screen mode]
* @return {[void]} none
*/
filterAddRemove(action, tryonPayload, selectScreen);{info} Use the method to apply and remove tryon filter
tryonPayload| # | Name | Type | Description |
|---|---|---|---|
| 1 | _id |
int | SKU of the product |
| 2 | product_category |
string | The category of the product to try-on. Options: SET, NECK, EAR, WATCH, RING, BRACELET, EYELENS, LIPSTICK, EYESHADOW, EYEKAJAL, EYELINER, FACEBLUSH |
| 3 | product_name |
string | Name of the product to try-on |
| 4 | product_id |
int | ID of the product to try-on |
| 5 | thumbnail |
string | The image thumbnail of the try-on product |
tryonPayload Conditional Properties{primary} Depending on the value of the
product_categorythese properties changes
| # | Name | Type | Description |
|---|---|---|---|
| 1 | ear_wearing |
string | URL of the try-on image to be applied on ears. |
| 2 | neck_wearing |
string | URL of the try-on image to be applied on the neck. |
| 3 | ppu_ear |
float | Floating-point value to set the pixels per unit (ppu) of the ear try-on image. |
| 4 | x_ear |
float | Horizontal position offset for the ear try-on image. |
| 5 | y_ear |
float | Vertical position offset for the ear try-on image. |
| 6 | ppu_neck |
float | Floating-point value to set the pixels per unit (ppu) of the neck try-on image. |
| 7 | x_neck |
float | Horizontal position offset for the neck try-on image. |
| 8 | y_neck |
float | Vertical position offset for the neck try-on image. |
| 9 | ppu_hand |
float | Floating-point value to set the pixels per unit (ppu) of the hand try-on image. |
| 10 | x_hand |
float | Horizontal position offset for the hand try-on image. |
| 11 | y_hand |
float | Vertical position offset for the hand try-on image. |
| 12 | eyelens_img |
string | URL of the try-on image to be applied for eyelens. |
| 13 | color |
hex string | Hexadecimal string representing the color parameter for cosmetic products, including the alpha value. Example: #FFFFFF65 |
| 14 | lineHeight |
integer | The thickness of lines applied on cosmetics, applicable only for EYEKAJAL and EYELINER. |
{warning} Note: Depending on the value of the
product_category, the payload should be as follows
product_category: 'SET'
{
"_id": "",
"product_category": "SET",
"product_name": "",
"product_id": "",
"thumbnail": "",
"ear_wearing": "",
"neck_wearing": "",
"ppu_ear": null,
"ppu_neck": null,
"x_ear": null,
"x_neck": null,
"y_ear": null,
"y_neck": null,
}document.addEventListener("filterAddRemove", function () {
console.log("Event filterAddRemove triggered");
});{info} The Event is triggered while tryon filter is added or removed
/**
* @param {[string]} filter_type [Options: 'necklace', 'earring', 'bracelet', 'watch', 'ring', 'eyelens', 'lipstick', 'eyeshadow', 'eyekajal', 'eyeliner', 'faceblush' ]
* @param {[string]} action [Options: 'show', 'hide' ]
* @return {[void]} none
*/
showHideItem(filter_type, action);{info} Use this method to show or hide a tryon filter
/**
* @return {[void]} none
*/
takePicture();{info} Call this method to capture a picture, you can get the captured image from the
takephotoevent listener
document.addEventListener("takePhoto", function (img) {
console.log("Event takephoto triggered", img);
});{info} You can get the captured image using this event listener. Image is in base64 format
/**
* @return {[array]} an array of all available cameras
*/
getAllCamera();{info} Use the method to get all the available camera devices
/**
* @param {[string]} zoom_option [Options: 'zoomIn', 'zoomOut']
* @return {[void]} none
*/
camZoom(zoom_option);{info} Use the method to make the subject appear closer or farther away from the camera.
/**
* @param {[string]} zoom_option [Options: 'zoomIn', 'zoomOut']
* @return {[void]} none
*/
filterItemZoom(zoom_option);{info} Use the method to scale-up and scale-down the tryon filter item
/**
* @param {[int]} device_index [Index of the camera from array returned from the
* promise navigator.mediaDevices.enumerateDevices()]
* @return {[void]} none
*/
switchCamera(device_index);{info} Use the method to switch your active camera device.
/**
* @return {[void]} none
*/
multiCam();/**
* @return {[void]} none
*/
multiCamDisable();{info} Use these methods to enable and disable split screen. A maximum of two screens available at a time.
document.addEventListener("screenSelection", function (data) {
console.log("Event screenSelection triggered", data.detail.data);
});{info} The event gives you the selected screen in compare mode.
/**
* @return {[void]} type
*/
startCamera();/**
* @return {[void]} none
*/
stopCamera();{info} Use these methods to start/stop the virtual tryon camera
/**
* @param {[string]} filter_type [Options: 'necklace', 'earring', 'bracelet', 'watch', 'ring', 'eyelens', 'lipstick', 'eyeshadow', 'eyekajal', 'eyeliner', 'faceblush' ]
* @return {[bool]} true/false
*/
isShowItem( filter_type );{info} Use this method to get the current state of a filter type (visible / hidden)