Native Integration - frankieone

Prerequisites

You have installed OneSDK in your web app
Android/iOS development experience
Your Native App has Camera, Microphone, and Location permissions
Your Web App is live

Implementation Steps

Setup Web WebAppInterface

First, ensure your web app is properly configured with OneSDK:

<!-- Add our SDK to your web app -->
<script>
    // Initialize OneSDK
    const oneSdk = await OneSDK({
			session: {
				token: YOUR_TOKEN
			},
			// Additional configuration options
    });

		// rest of your OneSDK Implementation
</script>

Implement in Native

Android
iOS

Permissions Setup

First, add required permissions to your AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Camera permissions -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    
    <!-- Microphone permissions -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    
    <!-- Location permissions -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>

WebView Implementation

Add WebView support with device access permissions:

class WebViewActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    private val PERMISSION_REQUEST_CODE = 1234

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)

        // Request permissions
        requestPermissions()

        webView = findViewById(R.id.webView)
        
        // Enable JavaScript
        webView.settings.apply {
            javaScriptEnabled = true
            domStorageEnabled = true
            allowFileAccess = true
            allowContentAccess = true
            mediaPlaybackRequiresUserGesture = false  // Allow media autoplay
        }

        // Configure WebChromeClient for handling permissions
        webView.webChromeClient = object : WebChromeClient() {
            // Camera permission request
            override fun onPermissionRequest(request: PermissionRequest) {
                runOnUiThread {
                    request.grant(request.resources)
                }
            }

            // Geolocation permission request
            override fun onGeolocationPermissionsShowPrompt(
                origin: String,
                callback: GeolocationPermissions.Callback
            ) {
                callback.invoke(origin, true, false)
            }
        }

        // Load your web app
        webView.loadUrl("https://your-webapp-url.com")
    }

    private fun requestPermissions() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            requestPermissions(
                arrayOf(
                    Manifest.permission.CAMERA,
                    Manifest.permission.RECORD_AUDIO,
                    Manifest.permission.ACCESS_FINE_LOCATION
                ),
                PERMISSION_REQUEST_CODE
            )
        }
    }

    override fun onRequestPermissionsResult(
        requestCode: Int,
        permissions: Array<String>,
        grantResults: IntArray
    ) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        when (requestCode) {
            PERMISSION_REQUEST_CODE -> {
                if (grantResults.isNotEmpty() && 
                    grantResults.all { it == PackageManager.PERMISSION_GRANTED }) {
                    // All permissions granted, proceed with WebView setup
                } else {
                    // Handle permission denial
                }
            }
        }
    }
}

Permissions Setup

First, add required permissions to your Info.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <!-- Camera permissions -->
    <key>NSCameraUsageDescription</key>
    <string>We need access to your camera for [YOUR REASON]</string>
    
    <!-- Microphone permissions -->
    <key>NSMicrophoneUsageDescription</key>
    <string>We need access to your microphone for [YOUR REASON]</string>
    
    <!-- Location permissions -->
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>We need access to your location for [YOUR REASON]</string>
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>We need access to your location for [YOUR REASON]</string>
</dict>
</plist>

WebView Implementation

Implement WebView with device access permissions:

import WebKit
import AVFoundation
import CoreLocation

class WebViewController: UIViewController, WKNavigationDelegate, CLLocationManagerDelegate {
    var webView: WKWebView!
    private let locationManager = CLLocationManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Configure WebView
        let configuration = WKWebViewConfiguration()
        configuration.allowsInlineMediaPlayback = true
        
        // Configure camera and microphone access
        configuration.mediaTypesRequiringUserActionForPlayback = []
        
        // Add script for location access
        let contentController = configuration.userContentController
        contentController.add(self, name: "locationHandler")
        
        webView = WKWebView(frame: view.bounds, configuration: configuration)
        webView.navigationDelegate = self
        webView.configuration.allowsInlineMediaPlayback = true
        
        // Set up location manager
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        
        view.addSubview(webView)
        
        // Request permissions
        requestPermissions()
        
        // Load your web app
        if let url = URL(string: "https://your-webapp-url.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    private func requestPermissions() {
        // Request camera and microphone permissions
        AVCaptureDevice.requestAccess(for: .video) { granted in
            if granted {
                // Camera permission granted
            }
        }
        
        AVCaptureDevice.requestAccess(for: .audio) { granted in
            if granted {
                // Microphone permission granted
            }
        }
        
        // Request location permission
        locationManager.requestWhenInUseAuthorization()
    }
    
    // Handle location updates
    func locationManager(_ manager: CLLocationManager, 
                       didUpdateLocations locations: [CLLocation]) {
        guard let location = locations.last else { return }
        let script = "updateLocation(\(location.coordinate.latitude), \(location.coordinate.longitude))"
        webView.evaluateJavaScript(script, completionHandler: nil)
    }
}

// Extend for WKScriptMessageHandler to handle location requests
extension WebViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                             didReceive message: WKScriptMessage) {
        if message.name == "locationHandler" {
            locationManager.startUpdatingLocation()
        }
    }
}

Establishing Communication Between Native and Web Layers

Android
iOS

To enable communication from web to native:

class WebAppInterface(private val context: Context) {
    @JavascriptInterface
    fun onEvent(data: String) {
        // Handle events from web app
    }
}

// Add the interface to WebView
webView.addJavascriptInterface(WebAppInterface(this), "Android")

Enable web-to-native communication in iOS:

// Configure message handler
configuration.userContentController.add(self, name: "iOSNative")

// Handle messages
extension WebViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                             didReceive message: WKScriptMessage) {
        if message.name == "iOSNative" {
            // Handle message from web app
        }
    }
}

OneSDK

Smart UI (for deprecation)

Prerequisites

​Implementation Steps

​Permissions Setup

​WebView Implementation

​Permissions Setup

​WebView Implementation

​Establishing Communication Between Native and Web Layers

Implementation Steps

Permissions Setup

WebView Implementation

Permissions Setup

WebView Implementation

Establishing Communication Between Native and Web Layers