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
Name | Type | Description |
---|---|---|
apiKey | string | Your Access Key |
platform | string | Platform you're targeting (e.g. web) |
category | string | Supports lots of categories |
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 |
skinAnalysis | SkinAnalysisOptions | Options regarding skin anaylysis |
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
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
Name | Type | Description |
---|---|---|
version | string | Skin analysis engine version |
defaultFilter | boolean | Enable default filter at startup |
startScreen | boolean | Show 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
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
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
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
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
Name | Type | Description |
---|---|---|
disable3DUI | boolean | Hide 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
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. |
error | Error : Error information | Fired anytime an error occurs. |
subscription-invalid | string : Reason why the subscription is invalid | Fired when the subscription is found to be invalid or expired. |
skin-analysis | options : type of payload (result , retouch , error , capture ), value : associated data | Fired for skin analysis related events. Use the `options` field to determine the kind of event. |