Xamarin - Requesting camera permissions in WebView

I want to make a container-app for my web application, and I decided to do so in Xamarin because the rest of the project is also .NET.

Initially I downloaded and setup the project from Xamarin Sample Pages: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows

I simply changed a few variables in WebPage.cs: https://github.com/xamarin/xamarin-forms-samples/blob/master/WorkingWithWebview/WorkingWithWebview/WebPage.cs

using Xamarin.Forms;

namespace WorkingWithWebview
{
    public class WebPage : ContentPage
    {
        public WebPage()
        {
            var browser = new WebView();
            browser.Source = "https://xamarin.swappsdev.net";
            Content = browser;
        }
    }
}

Secondly I updated App.cs to suit my needs: https://github.com/xamarin/xamarin-forms-samples/blob/master/WorkingWithWebview/WorkingWithWebview/App.

using Xamarin.Forms;

namespace WorkingWithWebview
{
    public class App : Application
    {
        public App ()
        {
            MainPage = new WebPage();
        }
    }
}

And boom! I had an app.

Then came the real struggle. In the web application I can – when opening the site (https://xamarin.swappsdev.net) in the browser – click on a button which requests permissions from the device and then display the camera feed in the same window.

When doing the same action in the app nothing happens.

I then started googling for an answer and really didn’t find a lot. And the answers I found seems to be of an older version of Xamarin (?), since I wasn’t able to compare the files and structure in the answer compared to the one of the Xamarin Sample Page. https://stackoverflow.com/a/50560855

I tried implementing the answer from Robbit here. After a long struggle I managed to compile it and install it on my device but it doesn't actually ask for permissions.

I am at a loss and could need some help/guidance.


Updated:

In my previous answer, it shows how to add camera permission on webview.

The link you provided, it works now. https://xamarin.swappsdev.net/ It seems to provide a camera preview function. It need to check permissions on API 23+.

On Xamarin.Forms, you could use Permissions Plugin. https://github.com/jamesmontemagno/PermissionsPlugin

First, add the camera permission in Android Manifest. Your Project.Android> Properties> Android Manifest> Required permissions> Camera. After that, it would generate the user permission in AndroidManifest.xml.

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

Create a Utils.cs.

public static class Utils
{
    public static async Task<PermissionStatus> CheckPermissions(Permission permission)
    {
        var permissionStatus = await CrossPermissions.Current.CheckPermissionStatusAsync(permission);
        bool request = false;
        if (permissionStatus == PermissionStatus.Denied)
        {
            if (Device.RuntimePlatform == Device.iOS)
            {

                var title = $"{permission} Permission";
                var question = $"To use this plugin the {permission} permission is required. Please go into Settings and turn on {permission} for the app.";
                var positive = "Settings";
                var negative = "Maybe Later";
                var task = Application.Current?.MainPage?.DisplayAlert(title, question, positive, negative);
                if (task == null)
                    return permissionStatus;

                var result = await task;
                if (result)
                {
                    CrossPermissions.Current.OpenAppSettings();
                }

                return permissionStatus;
            }

            request = true;

        }

        if (request || permissionStatus != PermissionStatus.Granted)
        {
            var newStatus = await CrossPermissions.Current.RequestPermissionsAsync(permission);

            if (!newStatus.ContainsKey(permission))
            {
                return permissionStatus;
            }

            permissionStatus = newStatus[permission];

            if (newStatus[permission] != PermissionStatus.Granted)
            {
                permissionStatus = newStatus[permission];
                var title = $"{permission} Permission";
                var question = $"To use the plugin the {permission} permission is required.";
                var positive = "Settings";
                var negative = "Maybe Later";
                var task = Application.Current?.MainPage?.DisplayAlert(title, question, positive, negative);
                if (task == null)
                    return permissionStatus;

                var result = await task;
                if (result)
                {
                    CrossPermissions.Current.OpenAppSettings();
                }
                return permissionStatus;
            }
        }

        return permissionStatus;
    }
}

In MainActivity.cs, add the code in OnCreate method.

 Plugin.CurrentActivity.CrossCurrentActivity.Current.Init(this, savedInstanceState);

OnRequestPermissionsResult is needed in MainActivity.cs.

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, 
[GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
    PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}

And then impletement it.

private async void _button_Clicked(object sender, EventArgs e)
    {
        webView.Source = "https://xamarin.swappsdev.net/";//"https://test.webrtc.org/";

        var status = PermissionStatus.Unknown;

        status = await CrossPermissions.Current.CheckPermissionStatusAsync(Permission.Camera);

        if (status != PermissionStatus.Granted)
        {

            status = await Utils.CheckPermissions(Permission.Camera);
        }

    }

enter image description here

I have upload on my GitHub. Check the folder. Test/CameraRuntimePermission_WebView/RuntimePermission

https://github.com/WendyZang/Test.git

Edit:

If you do not want to call this in button click event, you could delete the button in MainPage.xaml.

MainPage.xaml.cs

 public MainPage()
    {
        InitializeComponent();
        webView.Source = "https://xamarin.swappsdev.net/";
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        RunTimePermission();
    }

    public async void RunTimePermission()
    {
        var status = PermissionStatus.Unknown;

        status = await CrossPermissions.Current.CheckPermissionStatusAsync(Permission.Camera);

        if (status != PermissionStatus.Granted)
        {

            status = await Utils.CheckPermissions(Permission.Camera);
        }

    }

enter image description here


I tried implementing the answer from Robbit here. After a long struggle I managed to compile it and install it on my device but it doesn't actually ask for permissions.

I try the code provided by Robbit from the link.
Camera on Xamarin WebView

Actually, it works well. For better understanding, you could use the link below to check. https://test.webrtc.org/

If I use the webview to load the url directly, it would throw the error like below.

enter image description here

If I use the custom renderer from Robbit, it would ask for permission with the code in MyWebViewRenderer.

public override void OnPermissionRequest(PermissionRequest request)
        {
            mContext.RunOnUiThread(() =>
            {
                request.Grant(request.GetResources());

            });

        }

enter image description here

I have also check the link you used, nothing happened. The link would not open the camera in Android device.

enter image description here

Usage of the code from Robbit.

enter image description here

Create the MyWebView in your project.

public class MyWebView : WebView
{

}

Create the MyWebViewRenderer.cs in Android part of your project.

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
namespace WebViewDemo.Droid
{
public class MyWebViewRenderer : WebViewRenderer
{
    Activity mContext;
    public MyWebViewRenderer(Context context) : base(context)
    {
        this.mContext = context as Activity;
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
    {
        base.OnElementChanged(e);
        Control.Settings.JavaScriptEnabled = true;
        Control.ClearCache(true);
        Control.SetWebChromeClient(new MyWebClient(mContext));
    }
    public class MyWebClient : WebChromeClient
    {
        Activity mContext;
        public MyWebClient(Activity context)
        {
            this.mContext = context;
        }
        [TargetApi(Value = 21)]
        public override void OnPermissionRequest(PermissionRequest request)
        {
            mContext.RunOnUiThread(() =>
            {
                request.Grant(request.GetResources());

            });

        }
    }
    }
}

Usage:

MainPage.xaml

 <StackLayout>
    <Button x:Name="_button" Clicked="_button_Clicked" />
    <local:MyWebView
        x:Name="webView"
        HeightRequest="500"
        WidthRequest="500" />
</StackLayout>

MainPage.xaml.cs

private void _button_Clicked(object sender, EventArgs e)
    {
        webView.Source = "https://test.webrtc.org/";//"https://xamarin.swappsdev.net/";
    }

You could download the whole project from GitHub folder CameraRuntimePermission_WebView. The Page1 is used to test the link with webview. The MainPage is used to test with custom renderer. https://github.com/WendyZang/Test.git