Flutter API References

We use _webViewController to communicate with the SDK. If you need any help to understand how we get _webViewController or to check how to setup InAppWebView and to initialize properly check the Setup Page.

Webview Method

All communication is achieved by sending post messages using the _webViewController

_webViewController?.evaluateJavascript(source: """
    window.parent.postMessage(payload, '*');
""");

We just send different payloads for different functionalities.

Payloads

To get started, we send the type asinitialize type and payload with the desired settings. This adds the GlamAR SDK into the target container and configures it with the provided API key and optional configuration we sent through the payload.

const payload = {
  type: "initialize",
  payload: {
    apiKey: "YOUR_ACCESS_KEY",
    platform: "flutter",
  },
};

Initialization Payload

Name	Type	Description
apiKey	string	Your Access Key
platform	string	Platform you're targeting (e.g. web)
category	string	Supports lots of categories
parentDomain	string	bundle identifier or domain to check for whitelisting
configuration	ConfigurationOptions	Initialization configuration object

Following are all the configuration options that can passed under theoptions object.
Subcategories defined in overview section can be passed in the category parameter.

ConfigurationOptions

Name	Type	Description
global	GlobalOptions	Global options that customize sdk ui and camera options
ui	UIOptions	Loader and watermark configuration object
ar	AROptions	3D Modelviewer options

GlobalOptions

Name	Type	Description
openLiveOnInit	boolean	Skip landing and go directly to camera
disableClose	boolean	Hide the close button
disableBack	boolean	Hide the back button

Example

const payload = {
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "flutter",
    "configuration": {
      "global": {
  "openLiveOnInit": true,
  "disableClose": false,
  "disableBack": false
}
    }
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

UIOptions

Name	Type	Description
loader	LoaderOptions	Loader configuration options
watermark	WatermarkOptions	Watermark configuration options

LoaderOptions

Name	Type	Description
disable	boolean	Disable loader screen
jsonData	string	Custom Lottie animation JSON URL
backgroundColor	string	Loader screen background color (HEX or RGB)

Example

const payload = {
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "flutter",
    "configuration": {
      "loader": {
  "disable": false,
  "jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
  "backgroundColor": "#000000"
}
    }
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

WatermarkOptions

Name	Type	Description
text	string	Text shown next to watermark
fontColor	string	Color of watermark text
logo	string	URL for the watermark logo image

Example

const payload = {
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "flutter",
    "configuration": {
      "watermark": {
  "text": "Water Mark Text",
  "fontColor": "#00ff00",
  "logo": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
}
    }
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

AROptions

Name	Type	Description
disable3DUI	boolean	Hide 3D model viewer UI

Example

const payload = {
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "flutter",
    "configuration": {
      "ar": {
  "disable3DUI": false
}
    }
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

Basic Example

const payload = {
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_API_KEY",
    "platform": "flutter",
    "parentDomain": "io.pixelbin.glamar.dev"
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

Advanced Example (with Configuration)

const payload = {
  "type": "initialize",
  "payload": {
    "apiKey": "YOUR_API_KEY",
    "platform": "flutter",
    "category": "sunglasses",
    "parentDomain": "io.pixelbin.glamar.dev",
    "configuration": {
      "global": {
        "openLiveOnInit": true,
        "disableClose": false,
        "disableBack": false
      },
      "ui": {
        "loader": {
          "disable": false,
          "jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
          "backgroundColor": "#000000"
        },
        "watermark": {
          "text": "Water Mark Text",
          "fontColor": "#00ff00",
          "logo": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
        }
      },
      "ar": {
        "disable3DUI": false
      }
    }
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

applyBySku

Load any virtual try-on using applyBySku type and passing the relevant SKU Id

const payload = {
  "type": "applyBySku",
  "payload": {
    "skuId": "your sku id"
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

Parameters	Description	Options
skuId	A string that uniquely identifies the skuID to be applied.	Type: string

applyPatternByID

Apply a pattern using a pattern ID.

const payload = {
  "type": "applyPatternByID",
  "payload": {
    "patternId": "your pattern id"
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

Parameters	Description	Options
patternId	A string that uniquely identifies the pattern to be applied.	Type: string

clearSku

Clears the currently applied SKU.

const payload = {
  "type": "clearSku"
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

snapshot

Capture a snapshot of the current preview.

const payload = {
  "type": "snapshot"
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

comparison

Toggles comparison mode in AR widget.

const payload = {
  "type": "comparison",
  "payload": {
    "options": "sliderUI",
    "value": "show"
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

Parameters	Description	Options
options	Choose type of options for the comparison mode	Type: string Options: sliderUItouch
value	Show or hide comparison mode	Type: string Options: showhide

closePreview

Close the live preview.

const payload = {
  "type": "closePreview"
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

openLivePreview

Start a live Camera mode.

const payload = {
  "type": "openLivePreview",
  "payload": {
    "mode": "imgTryOn",
    "imgURL": ""
  }
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

Parameters	Description	Options
mode	Whether you want to run live preview or image tryon. If you send imgTryOn in mode add proper url to imgURL	Type: string Options: liveimgTryOn Default: live
imgURL	A valid url to image you want to use	Type: string

pausePreview

Pause the live preview.

const payload = {
  "type": "pausePreview"
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

resumePreview

Resume the live preview.

const payload = {
  "type": "resumePreview"
};
_webViewController?.evaluateJavascript(source: """
  window.parent.postMessage(payload, '*');
""");

WebView Events

Refer to Setup Page to understand how we can register to events listed

Event	Payload	Description
loading	None	Fired when the GlamAR module is initiated and the SDK proceeds with the loading process.
loaded	None	Fired when the GlamAR module is loaded.
opened	None	Fired when the GlamAR module is opened.
closed	None	Fired when the canvas is closed and the user returns to the main widget page.
camera-opened	None	Fired when the camera is opened.
camera-closed	None	Fired when the camera is closed.
camera-failed	None	Fired when the camera fails. This can occur if the user refuses to grant permission or the app is unable to retrieve the video stream normally.
photo-loaded	Image (base64), Status (success/failed)	Fired when a screenshot of the AR effect is successful or fails.
sku-applied	None	Fired when a given SKU effect is applied.
sku-failed	None	Fired when a given SKU is not applied successfully.
reset	None	Fired when all the effects are reset.
error	Error: Error information	Fired anytime an error occurs.
upload-started	None	Fired when the upload mode dialogue is shown.
upload-cancelled	None	Fired when the upload mode dialogue is canceled.
subscription-invalid	string: Reason	Fired when the subscription is found to be invalid or expired.