Webview Usage

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

Webview usage tips:

  • Enable JavaScript in WebView

  • Enable allowsInlineMediaPlayback in your IOS Webview implementation

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

Below are examples of how to implement Uqudo SDK Webview in different programming languages and frameworks.

Java (Android):

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

                // 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");
            }}

Kotlin (Android):

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

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

Swift (iOS):

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.preferences.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 (JavaScript):

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

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

export default MyWebViewComponent;

Flutter (Dart):

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

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.

Last updated