Unable to use mobile device camera in Blazor MAUI Hybrid Application

Question

Has anyone been able to access their mobile device Camera with a .NET MAUI Hybrid App? I have been trying to develop such an application without success for a few days now. I tried with Straight MAUI and was able to get access without any complications or configurations, .NET Core Web app was no problem either. However, I need to develop an Android App and would love to use some of my existing code and decided to try the Blazor Hybrid with MAUI to take advantage of the Community Toolkits. I got very close to the end when I ran into the Camera issue. I can only get to the File area of my tablet, without camera access. I tried to manually set the permissions on the App directly from the Tablet and still was not able to get to the Camera.

I tried adding all the permissions as much as possible as well without success.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-feature android:name="android.hardware.location" android:required="false" />
<uses-feature android:name="android.hardware.location.gps" android:required="false" />
<uses-feature android:name="android.hardware.location.network" android:required="false" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
<uses-feature android:name="android.hardware.microphone" android:required="false" />

On my search, I found a .NET 6 version of a sample on Git and could not get it to compile and load. My skillset is not that high to troubleshoot the complex replacement for all the outdated code in it so, I am unable to continue, but it has a blueprint of what can be done to get there. I was hopeing there was a newer sample that I can use to achieve my goals on this project. The Old code sample was derived from this link: ,https://stackoverflow.com/questions/72980027/how-to-use-camera-qr-code-reader-on-maui-blazor-hybrid>

I was hoping to find some assistance with a more current solution from here.

Answer 1

I create a new project and access the camera.

First of all, request the premission by the code:await Permissions.RequestAsync<Permissions.Camera>();

And the Razor page code:

@page "/counter"
@inject IJSRuntime js
<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<img id="image"/>
@code {
    private int currentCount = 0;

    private async void IncrementCount()
    {
        FileResult photo;
        if (DeviceInfo.Current.Platform == DevicePlatform.Android || DeviceInfo.Current.Platform == DevicePlatform.iOS)
        {
            photo = await MediaPicker.CapturePhotoAsync();
        }
        if (photo == null)
        {
            return;
        }
        using (var stream = await photo.OpenReadAsync())
        {
            var dotnetImageStream = new DotNetStreamReference(stream);
            await js.InvokeAsync<bool>("captureImage", "image", dotnetImageStream);
        }
    }
}

And the JS function in the \wwwroot\index.html:

    <script>  
        async function captureImage (imageId, imageStream) {
                const arrayBuffer = await imageStream.arrayBuffer();
                const blob = new Blob([arrayBuffer]);
                const url = URL.createObjectURL(blob);
                document.getElementById(imageId).src = url;
                document.getElementById(imageId).style.display = 'block';
                return true;
            }
    </script>