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.
Last updated
Was this helpful?