Skip to main content

iOS 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.

iOS Webview Method

All communication is achieved by sending post messages using the webView

var payload = payloadData
payload["type"] = type
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

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.

let type = "initialize"
let payload: [String: Any] = [
"type": type,
"payload": [
"apiKey": "YOUR_ACCESS_KEY",
"platform": "ios",
]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

Initialization Payload

NameTypeDescription
apiKeystringYour Access Key
platformstringPlatform you're targeting (e.g. web)
categorystringSupports lots of categories
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
skinAnalysisSkinAnalysisOptionsOptions regarding skin anaylysis
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

let type = "initialize"
let payload: [String: Any] = [
"type": type,
"payload": [
"apiKey": "YOUR_ACCESS_KEY",
"platform": "ios",
"configuration": [
"global": {
"openLiveOnInit": true,
"disableClose": false,
"disableBack": false
}
]
]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

SkinAnalysisOptions

NameTypeDescription
versionstringSkin analysis engine version
defaultFilterbooleanEnable default filter at startup
startScreenbooleanShow intro screen before scan

Example

let type = "initialize"
let payload: [String: Any] = [
"type": type,
"payload": [
"apiKey": "YOUR_ACCESS_KEY",
"platform": "ios",
"configuration": [
"skinAnalysis": {
"version": "GlamGen",
"defaultFilter": true,
"startScreen": true
}
]
]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

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

let type = "initialize"
let payload: [String: Any] = [
"type": type,
"payload": [
"apiKey": "YOUR_ACCESS_KEY",
"platform": "ios",
"configuration": [
"loader": {
"disable": false,
"jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
"backgroundColor": "#000000"
}
]
]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

WatermarkOptions

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

Example

let type = "initialize"
let payload: [String: Any] = [
"type": type,
"payload": [
"apiKey": "YOUR_ACCESS_KEY",
"platform": "ios",
"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"
}
]
]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

AROptions

NameTypeDescription
disable3DUIbooleanHide 3D model viewer UI

Example

let type = "initialize"
let payload: [String: Any] = [
"type": type,
"payload": [
"apiKey": "YOUR_ACCESS_KEY",
"platform": "ios",
"configuration": [
"ar": {
"disable3DUI": false
}
]
]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

Basic Example

let type = "initialize"
let payload: [String: Any] = {
"apiKey": "YOUR_API_KEY",
"platform": "ios",
"category": "skinanalysis",
"configuration": {
"global": {
"openLiveOnInit": true
},
"skinAnalysis": {
"version": "GlamGen",
"defaultFilter": true,
"startScreen": true
}
}
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

Advanced Example (with Configuration)

let type = "initialize"
let payload: [String: Any] = {
"apiKey": "YOUR_API_KEY",
"platform": "ios",
"category": "skinanalysis",
"configuration": {
"global": {
"openLiveOnInit": true,
"disableClose": false,
"disableBack": false
},
"skinAnalysis": {
"version": "GlamGen",
"defaultFilter": true,
"startScreen": true
},
"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
}
}
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

snapshot

Capture a snapshot of the current preview.

let payload: [String: Any] = {
"type": "snapshot"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

closePreview

Close the live preview.

let payload: [String: Any] = {
"type": "closePreview"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

openLivePreview

Open the live preview.

let payload: [String: Any] = {
"type": "openLivePreview"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

backPreview

To simulate back button without using UI

let payload: [String: Any] = {
"type": "backPreview"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
let jsonString = String(data: jsonData, encoding: .utf8) {
let script = "window.postMessage(\(jsonString), '*');"
webView.evaluateJavaScript(script, completionHandler: nil)
}

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.
errorError: Error informationFired anytime an error occurs.
subscription-invalidstring: Reason why the subscription is invalidFired when the subscription is found to be invalid or expired.
skin-analysisoptions: type of payload (result, retouch, error, capture), value: associated dataFired for skin analysis related events. Use the `options` field to determine the kind of event.