Android Webview Setup

To integrate the GlamAR SDK into an Android project using WebView, follow these detailed steps:

Setup

Make sure to setup Android project correctly. If you need any documentation for that, we do not cover that here.
Make sure to add the following dependency insde the gradle file so that we can use webkit.

dependencies {
   // other dependencies
    implementation("androidx.webkit:webkit:1.12.0")
}

Ensure you have the necessary permissions for internet access and camera usage.

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />

WebView

Set up a WebView in your MainActivity.java or MainActivity.kt.

import android.os.Bundle;
import android.util.Log
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private lateinit var webView: WebView

    @Override
    protected void onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
        webView.webChromeClient = object : WebChromeClient() {
            override fun onPermissionRequest(request: PermissionRequest) {
                Log.e("WebView", "onPermissionRequest: $request")
                handlePermissionRequest(request)
            }
        };
        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                Log.e("Webview", "Page finished loading: $url")
                if (hasCameraPermission()) {
                    initializeSDK()
                }
            }
        }
        webView.loadUrl("https://www.glamar.io/sdk");
    }
}

Handle Permissions

Ensure you handle camera permissions appropriately.

import android.content.pm.PackageManager;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat


private val requestCodePermissions = 1001
private var pendingPermissionRequest: PermissionRequest? = null

private void handlePermissionRequest(request: PermissionRequest) {
    val permissions = arrayOf(Manifest.permission.CAMERA)
    val missingPermissions = permissions.filter {
        ContextCompat.checkSelfPermission(this, it) != PackageManager.PERMISSION_GRANTED
    }

    if (missingPermissions.isEmpty()) {
        request.grant(request.resources)
    } else {
        ActivityCompat.requestPermissions(this, missingPermissions.toTypedArray(), requestCodePermissions)
        pendingPermissionRequest = request
    }
}

private fun hasCameraPermission(): Boolean {
    return ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED
}

override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<out String>, grantResults: IntArray) {
    if (requestCode == requestCodePermissions) {
        if (grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                pendingPermissionRequest?.grant(pendingPermissionRequest?.resources)
                initializeSDK()
        } else
        {
            pendingPermissionRequest?.deny()
        }
        pendingPermissionRequest = null
    }
}

SDK

Send Initialization Payload to start loading the SDK

private fun initializeSDK() {
    val type = "initialize"
    val payload = mapOf(
        "type" to type,
        "payload" to mapOf(
            "apiKey" to "YOUR_ACCESS_KEY",
            "category" to "skinanalysis",
            "platform" to "ios",
            "configuration" to mapOf(
                "global" to mapOf(
                    "openLiveOnInit" to true,
                    "disableClose" to false,
                    "disableBack" to false
                ),
                "skinAnalysis" to mapOf(
                    "version" to "GlamGen",
                    "defaultFilter" to true,
                    "startScreen" to true
                )
            )
        )
    )

    val jsonData = JSONObject(payload).toString()
    webView.evaluateJavascript("window.postMessage($jsonData, '*');", null)
}

Replace 'YOUR_ACCESS_KEY' with your organization access key.

Event Handling

Create a JavaScript interface to handle messages from the SDK.

webView.addJavascriptInterface(object {
    @JavascriptInterface
    fun onLog(args: String) {
        try {
            val argsJson = JSONObject(args)
            val type = argsJson.getString("type")

            when (type) {
                "loaded" -> // Handle onLoadedCallback
                "skin-analysis" -> {
                    val payload = argsJson.optJSONObject("payload")
                    val options = payload?.optString("options")
                    if (options == "result") {
                        val value = payload.opt("value")
                        Log.d(value)
                    }
                }
                else -> Log.e("GlamAR", "Unhandled type: $type")
            }
        } catch (e: Exception) {
            Log.e("GlamARView", "Error processing JavaScript message", e)
            // Handle error
        }
    }
}, "Android")