WebView Integration

To integrate the Uqudo Web SDK into your WebView implementation, follow the guide below :

Requirements

• Enable JavaScript in WebView

• Enable allowsInlineMediaPlayback in your IOS Webview implementation

• Enable DOM storage in Android. In iOS should be enabled by default

• In Android, it is recommended to use WebChromeClient to handle camera access within a WebView.

Camera permission considerations

Android

On Android, you need to declare permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

And at runtime (for Android 6.0+), you need to explicitly request the permission:

ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, REQUEST_CAMERA_PERMISSION);

Note: Do not open the WebView if camera permission has not been granted, as camera functionality will not work. You need to manage permissions beforehand.

Within the WebView client, even if the application-level camera permission is granted, you must also explicitly approve permission requests for RESOURCE_VIDEO_CAPTURE. As mentioned earlier, this approval will only succeed if the app has already been granted camera permission. See the example below for reference.

iOS

If you use Safari WebView (SafariViewController) you can ignore the settings below. If you use WebKit WebView (WKWebView) you need to follow the instructions below:

Add the following key to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>Your description</string>

Note: Do not open the WebView if camera permission has not been granted, as camera functionality will not work. You need to manage permissions beforehand.

React-Native or Flutter

When using WebView plugins with React Native or Flutter, camera permissions are typically handled by the plugin. However, if you want to control permissions before launching the WebView, you may need to manage them manually. Be sure to thoroughly test all possible scenarios to ensure consistent behavior.

---

Important Note: The end-user will encounter two separate camera permission prompts, one at the application level and another within the WebView. It’s essential to clearly inform users that both permissions must be granted for the application to function properly. Additionally, on iOS, if the user denies the WebView-level permission, the denial is remembered for the duration of the session. In such cases, the application must be restarted to trigger the WebView permission prompt again.

Implementation examples

Android - JAVA

package com.example.myapplication;
import android.Manifest;
import android.os.Build;
import android.content.pm.PackageManager;
import android.os.Bundle;
import android.webkit.PermissionRequest;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

public class MainActivity extends AppCompatActivity {

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                WebView webView = findViewById(R.id.webView);
                WebSettings webSettings = webView.getSettings();
                
                // Enable Javascript
                webSettings.setJavaScriptEnabled(true);
                webSettings.setDomStorageEnabled(true);

                // Check camera permission and request if not granted
                if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
                    ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, 1);
                }
                webView.setWebChromeClient(new WebChromeClient() {
                    @Override
                    public void onPermissionRequest(final PermissionRequest request) {
                        // Check for camera permission
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                            for (String permission : request.getResources()) {
                                if (PermissionRequest.RESOURCE_VIDEO_CAPTURE.equals(permission)) {
                                    runOnUiThread(new Runnable() {
                                        @Override
                                        public void run() {
                                            if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {                                        
                                                request.grant(new String[]{PermissionRequest.RESOURCE_VIDEO_CAPTURE});                  
                                            } else {
                                                request.deny();
                                            }}});
                                    return;
                                }}}
                        super.onPermissionRequest(request);
                    }
                });
                webView.loadUrl("https://your-uqudo-sdk-url.com");
            }}

Android - Kotlin

package com.example.myapplication

import android.Manifest
import android.content.pm.PackageManager
import android.os.Build
import android.os.Bundle
import android.webkit.PermissionRequest
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityCompat
import androidx.core.content.ContextCompat

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val webView = findViewById<WebView>(R.id.webView)
        val webSettings = webView.settings

        // Enable Javascript
        webSettings.javaScriptEnabled = true
        webSettings.domStorageEnabled = true

        // Check camera permission and request if not granted
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.CAMERA), 1)
        }

        webView.webChromeClient = object : WebChromeClient() {
            override fun onPermissionRequest(request: PermissionRequest) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    for (permission in request.resources) {
                        if (PermissionRequest.RESOURCE_VIDEO_CAPTURE.equals(permission)) {
                            runOnUiThread {
                                if (ContextCompat.checkSelfPermission(this@MainActivity, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {
                                    request.grant(arrayOf(PermissionRequest.RESOURCE_VIDEO_CAPTURE))
                                } else {
                                    request.deny()
                                }
                            }
                            return
                        }
                    }
                }
                super.onPermissionRequest(request)
            }
        }
        webView.loadUrl("https://your-uqudo-sdk-url.com")
    }
}

iOS - Swift

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let webViewConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webViewConfiguration)
        webView.navigationDelegate = self
        view = webView

        // Enable JavaScript
        webView.configuration.preferences.javaScriptEnabled = true
        
        // Enable allowsInlineMediaPlayback
        webView.configuration.allowsInlineMediaPlayback = true
         
        // Load your Uqudo Web SDK URL
        let url = URL(string: "https://your-uqudo-sdk-url.com")!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }
}

React Native

import React from 'react';
import { WebView } from 'react-native-webview';

const MyWebViewComponent = () => {
  return (
    <WebView
      source={{ uri: 'https://your-uqudo-sdk-url.com' }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowsInlineMediaPlayback={true}
    />
  );
};

export default MyWebViewComponent;

Flutter

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://your-uqudo-sdk-url.com',
      javascriptMode: JavascriptMode.unrestricted,
      allowsInlineMediaPlayback: true,
    );
  }
}

Xamarin (C#):

using Xamarin.Forms;

namespace MyApp
{
    public partial class MyWebViewPage : ContentPage
    {
        public MyWebViewPage()
        {
            InitializeComponent();

            var webView = new WebView
            {
                Source = new UrlWebViewSource
                {
                    Url = "https://your-uqudo-sdk-url.com"
                },
                VerticalOptions = LayoutOptions.FillAndExpand
            };

            webView.Settings.JavaScriptEnabled = true;

            Content = webView;
        }
    }
}

Load Uqudo Web SDK URL

Make sure to load the URL of the Uqudo Web SDK into your WebView. Replace "https://your-uqudo-sdk-url.com" with the actual URL of your Uqudo Web SDK.

Feel free to customize the examples provided according to your specific implementation needs. If you encounter any issues or have further questions, refer to the Uqudo Web SDK documentation or reach out to our support team for assistance.