Blazor MAUI - Camera and Microphone Android permissions

Question

I am trying to show live stream from camera & microphone in <video> html element.

In blazor file (sample.razor) I invoke method to request and show video:

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("requestMediaAndShow");
        }
    }

In javascript file (sample.js) I request stream and assign to video html element.

// Create request options
let options = {
    audio: true,
    video: true
};

// Request user media
navigator.mediaDevices
    .getUserMedia(options)
    .then(gotLocalStream)
    .catch(logError);

But when I am requesting i catch an error like "NotAllowedError: Permission denied".

AndroidManifest.xml contains:

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

MainActivity.cs contains:

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        ActivityCompat.RequestPermissions(this, new[] { Manifest.Permission.Camera, Manifest.Permission.RecordAudio, Manifest.Permission.ModifyAudioSettings }, 0);
    }
}

Any ideas how to request audio and video stream by javascript in BlazorWebView natively on android? PS. On both on website and natively on Windows platform works great and no extra permissions are required.

Answer 1

Although the Android permissions seem to be granted OK, I suspected the website permissions were not. Not sure if the author of this question is the same person, but an issue was opened on the .NET MAUI repo as well about this.

While we are looking into making this work out of the box, another helpful user has posted this workaround for now.

Implement your own handler like so

public class MauiWebChromeClient : WebChromeClient
{
    public override void OnPermissionRequest(PermissionRequest request)
    {
        request.Grant(request.GetResources());
    }
}

public class MauiBlazorWebViewHandler : BlazorWebViewHandler
{
    protected override WebChromeClient GetWebChromeClient()
    {
        return new MauiWebChromeClient();
    }
}

And register this handler in your MauiProgram.cs:

builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>();
});

This will automatically grant all the requested permissions from the web side of things.

Answer 2

Updated for 28/02/2023

Since the GetWebChromeClient() override does not exist anymore, I figured out a way around it, here is the tutorial:

Step 1: In Platforms/Android create a folder called Handlers, inside, create a class:

    internal class MyWebChromeClient : WebChromeClient
    {
        public override void OnPermissionRequest(PermissionRequest request)
        {
            // dirty code, fix this yourself
            try
            {
                request.Grant(request.GetResources());
                base.OnPermissionRequest(request);
            }
            catch (Exception ex) 
            {
                Console.WriteLine(ex);
            }
        }
    }

    public class MauiBlazorWebViewHandler : BlazorWebViewHandler
    {
        protected override global::Android.Webkit.WebView CreatePlatformView()
        {
            var view = base.CreatePlatformView();

            view.SetWebChromeClient(new MyWebChromeClient());

            return view;
        }
    }

Step 2: Inside MauiProgram.cs, add the following handler code:

#1 Using statement

#if ANDROID
using ClientAppHeavy.Platforms.Android.Handlers;
#endif

#2 Inside the method

            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                })
                .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler<BlazorWebView, MauiBlazorWebViewHandler>();
#endif
                });

This will grant all permissions whenever requested, but the try/catch is there cause it calls Grant multiple times for some obscure reason, so I just did a quick and dirty workaround.

Good luck :)

Answer 3

Although the camera permission issue has been solved by @YaRmgl's answer, it will cause a side-effect that there is no response when clicking the HTML5 input element. The workaround is to override the OnShowFileChooser() function.

Here is the code:

using Android.Content;
using Android.Webkit;
using Microsoft.AspNetCore.Components.WebView.Maui;

namespace BarcodeScanner.Platforms.Android.Handlers
{
    public class MauiBlazorWebViewHandler : BlazorWebViewHandler
    {

        protected override global::Android.Webkit.WebView CreatePlatformView()
        {
            var view = base.CreatePlatformView();
            view.SetWebChromeClient(new MyWebChromeClient(this.Context));
            return view;
        }
    }

    internal class MyWebChromeClient : WebChromeClient
    {
        private MainActivity _activity;


        public MyWebChromeClient(Context context)
        {
            _activity = context as MainActivity;
        }

        public override void OnPermissionRequest(PermissionRequest request)
        {
            try
            {
                request.Grant(request.GetResources());
                base.OnPermissionRequest(request);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex);
            }
        }

        public override bool OnShowFileChooser(global::Android.Webkit.WebView webView, IValueCallback filePathCallback, FileChooserParams fileChooserParams)
        {
            base.OnShowFileChooser(webView, filePathCallback, fileChooserParams);
            return _activity.ChooseFile(filePathCallback, fileChooserParams.CreateIntent(), fileChooserParams.Title);
        }


    }
}

The ChooseFile() method is implemented in the MainActivity.cs file:

using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Webkit;
using static Android.Webkit.WebChromeClient;
using System.Diagnostics;

namespace BarcodeScanner;

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
    private IValueCallback _filePathCallback;
    private int _requestCode = 100;

    protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
    {
        if (_requestCode == requestCode)
        {
            if (_filePathCallback == null)
                return;

            Java.Lang.Object result = FileChooserParams.ParseResult((int)resultCode, data);
            _filePathCallback.OnReceiveValue(result);
        }
    }

    public bool ChooseFile(IValueCallback filePathCallback, Intent intent, string title)
    {
        _filePathCallback = filePathCallback;

        StartActivityForResult(Intent.CreateChooser(intent, title), _requestCode);

        return true;
    }
}

The full source code: https://github.com/yushulx/DotNet-MAUI-Blazor-Barcode-Scanner

Answer 4

I think you are missing some parts of the permission checks. You should read this section about runtime permissions that were introduced in Android 6.0. For example, I cannot see any override of OnRequestPermissionsResult in MainActivity.

https://learn.microsoft.com/en-us/xamarin/android/app-fundamentals/permissions?tabs=macos#runtime-permission-checks-in-android-60