Skip to main content

Android Webview API References

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

Android Webview Method

All communication is achieved by sending post messages via the webView.

private fun sendMessageToWebView(type: String, payload: Map<String, Any>) {
val message = mapOf("type" to type, "payload" to payload)
val jsonData = JSONObject(message).toString()
webView.evaluateJavascript("window.postMessage($jsonData, '*');", null)
}

We just send different payloads and types 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.

private fun initializeSDK() {
val payload = mapOf(
"apiKey" to "YOUR_ACCESS_KEY",
"platform" to "android"
)
sendMessageToWebView("initialize", payload)
}

Initialization Payload

NameTypeDescription
apiKeystringYour Access Key
platformstringPlatform you're targeting (e.g. web)
categorystringSupports lots of categories
parentDomainstringbundle identifier or domain to check for whitelisting
configurationConfigurationOptionsInitialization 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

NameTypeDescription
globalGlobalOptionsGlobal options that customize sdk ui and camera options
uiUIOptionsLoader and watermark configuration object
arAROptions3D Modelviewer options

GlobalOptions

NameTypeDescription
openLiveOnInitbooleanSkip landing and go directly to camera
disableClosebooleanHide the close button
disableBackbooleanHide the back button

Example

val payload = mapOf(
"apiKey" to "YOUR_ACCESS_KEY",
"platform" to "android",
"configuration" to mapOf(
"global" to {
"openLiveOnInit" to true,
"disableClose" to false,
"disableBack" to false
}
)
)
sendMessageToWebView("initialize", payload)

UIOptions

NameTypeDescription
loaderLoaderOptionsLoader configuration options
watermarkWatermarkOptionsWatermark configuration options

LoaderOptions

NameTypeDescription
disablebooleanDisable loader screen
jsonDatastringCustom Lottie animation JSON URL
backgroundColorstringLoader screen background color (HEX or RGB)

Example

val payload = mapOf(
"apiKey" to "YOUR_ACCESS_KEY",
"platform" to "android",
"configuration" to mapOf(
"loader" to {
"disable" to false,
"jsonData" to "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
"backgroundColor" to "#000000"
}
)
)
sendMessageToWebView("initialize", payload)

WatermarkOptions

NameTypeDescription
textstringText shown next to watermark
fontColorstringColor of watermark text
logostringURL for the watermark logo image

Example

val payload = mapOf(
"apiKey" to "YOUR_ACCESS_KEY",
"platform" to "android",
"configuration" to mapOf(
"watermark" to {
"text" to "Water Mark Text",
"fontColor" to "#00ff00",
"logo" to "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
}
)
)
sendMessageToWebView("initialize", payload)

AROptions

NameTypeDescription
disable3DUIbooleanHide 3D model viewer UI

Example

val payload = mapOf(
"apiKey" to "YOUR_ACCESS_KEY",
"platform" to "android",
"configuration" to mapOf(
"ar" to {
"disable3DUI" to false
}
)
)
sendMessageToWebView("initialize", payload)

Basic Example

val payload = {
"apiKey" to "YOUR_API_KEY",
"platform" to "android",
"parentDomain" to "io.pixelbin.glamar.dev"
};
sendMessageToWebView("initialize", payload)

Advanced Example (with Configuration)

val payload = {
"apiKey" to "YOUR_API_KEY",
"platform" to "android",
"category" to "sunglasses",
"parentDomain" to "io.pixelbin.glamar.dev",
"configuration" to {
"global" to {
"openLiveOnInit" to true,
"disableClose" to false,
"disableBack" to false
},
"ui" to {
"loader" to {
"disable" to false,
"jsonData" to "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
"backgroundColor" to "#000000"
},
"watermark" to {
"text" to "Water Mark Text",
"fontColor" to "#00ff00",
"logo" to "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
}
},
"ar" to {
"disable3DUI" to false
}
}
};
sendMessageToWebView("initialize", payload)

applyBySku

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

val payload = {
"type" to "applyBySku",
"payload" to {
"skuId" to "your sku id"
}
};
sendMessageToWebView("applyBySku", payload)
ParametersDescriptionOptions
skuIdA string that uniquely identifies the skuID to be applied.
Type: string

applyPatternByID

Apply a pattern using a pattern ID.

val payload = {
"type" to "applyPatternByID",
"payload" to {
"patternId" to "your pattern id"
}
};
sendMessageToWebView("applyPatternByID", payload)
ParametersDescriptionOptions
patternIdA string that uniquely identifies the pattern to be applied.
Type: string

clearSku

Clears the currently applied SKU.

val payload = {
"type" to "clearSku"
};
sendMessageToWebView("clearSku", payload)

snapshot

Capture a snapshot of the current preview.

val payload = {
"type" to "snapshot"
};
sendMessageToWebView("snapshot", payload)

comparison

Toggles comparison mode in AR widget.

val payload = {
"type" to "comparison",
"payload" to {
"options" to "sliderUI",
"value" to "show"
}
};
sendMessageToWebView("comparison", payload)
ParametersDescriptionOptions
optionsChoose type of options for the comparison mode
Type: string
Options: sliderUItouch
valueShow or hide comparison mode
Type: string
Options: showhide

closePreview

Close the live preview.

val payload = {
"type" to "closePreview"
};
sendMessageToWebView("closePreview", payload)

openLivePreview

Start a live Camera mode.

val payload = {
"type" to "openLivePreview",
"payload" to {
"mode" to "imgTryOn",
"imgURL" to ""
}
};
sendMessageToWebView("openLivePreview", payload)
ParametersDescriptionOptions
modeWhether 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
imgURLA valid url to image you want to use
Type: string

pausePreview

Pause the live preview.

val payload = {
"type" to "pausePreview"
};
sendMessageToWebView("pausePreview", payload)

resumePreview

Resume the live preview.

val payload = {
"type" to "resumePreview"
};
sendMessageToWebView("resumePreview", payload)

WebView Events

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

EventPayloadDescription
loadingNoneFired when the GlamAR module is initiated and the SDK proceeds with the loading process.
loadedNoneFired when the GlamAR module is loaded.
openedNoneFired when the GlamAR module is opened.
closedNoneFired when the canvas is closed and the user returns to the main widget page.
camera-openedNoneFired when the camera is opened.
camera-closedNoneFired when the camera is closed.
camera-failedNoneFired 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-loadedImage (base64), Status (success/failed)Fired when a screenshot of the AR effect is successful or fails.
sku-appliedNoneFired when a given SKU effect is applied.
sku-failedNoneFired when a given SKU is not applied successfully.
resetNoneFired when all the effects are reset.
errorError: Error informationFired anytime an error occurs.
upload-startedNoneFired when the upload mode dialogue is shown.
upload-cancelledNoneFired when the upload mode dialogue is canceled.
subscription-invalidstring: ReasonFired when the subscription is found to be invalid or expired.