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
    }
}

If the user does not grant camera permission, do not open the SDK. Instead, handle it on the client side by providing clear instructions that camera permission is necessary for the SDK to function properly.

SDK

Send Initialization Payload to start loading the SDK

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)
}

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

Replace 'YOUR_ACCESS_KEY' with your organization access key.

Event Handling

Create a JavaScript interface to handle messages from the SDK.

webView.addJavascriptInterface(new Object() {
@JavascriptInterface
    public void onLog(String args) {
        try {
                JSONObject argsJson = new JSONObject(args);
                String type = argsJson.getString("type");

                switch (type) {
                    case "loaded":
                        // Handle onLoadedCallback
                        break;
                    case "sku-applied":
                        // Handle on SKu applied
                        break;
                    default:
                        Log.e("GlamAR", "Unhandled type: " + type);
                        break;
                }
            } catch (Exception e) {
                Log.e("GlamARView", "Error processing JavaScript message", e);
                glamArCallback.onError("Error processing JavaScript message: " + e.getMessage());
            }
        }
     }, "Android");