Blazor Hybrid(MAUI)在Android端调用摄像头失败，求解决方案

问题原因 #

Blazor Hybrid中使用<input type="file" capture>或Blazor的<InputFile>组件在Android端无法唤起摄像头，是因为MAUI的WebView默认配置限制了该属性的原生行为，只会打开文件选择器，而非直接调用摄像头。

解决方案：使用MAUI原生MediaPicker组件 #

通过MAUI的MediaPicker原生能力结合Blazor的依赖注入机制，实现摄像头调用和图片传递。

步骤1：创建图片拍摄服务 #

在项目中添加封装MediaPicker的服务类，处理权限检查和摄像头调用逻辑：

using Microsoft.Maui.Media;
using System.IO;

namespace YourApp.Services;

public class PhotoCaptureService
{
    public async Task<byte[]?> CapturePhotoAsync()
    {
        // 检查并请求摄像头权限
        var cameraStatus = await Permissions.CheckStatusAsync<Permissions.Camera>();
        if (cameraStatus != PermissionStatus.Granted)
        {
            cameraStatus = await Permissions.RequestAsync<Permissions.Camera>();
            if (cameraStatus != PermissionStatus.Granted)
            {
                return null;
            }
        }

        try
        {
            // 调用摄像头拍摄照片
            var photo = await MediaPicker.Default.CapturePhotoAsync();
            if (photo == null) return null;

            // 将图片转为字节数组，方便Blazor页面处理
            using var stream = await photo.OpenReadAsync();
            using var memoryStream = new MemoryStream();
            await stream.CopyToAsync(memoryStream);
            return memoryStream.ToArray();
        }
        catch
        {
            // 处理用户取消或异常情况
            return null;
        }
    }
}

步骤2：注册服务 #

在Program.cs中注册该服务，让Blazor组件可以通过依赖注入使用：

builder.Services.AddSingleton<PhotoCaptureService>();

步骤3：Blazor页面中调用服务 #

在Blazor组件中注入服务，添加拍摄按钮并处理图片显示：

@inject PhotoCaptureService PhotoCaptureService

<button @onclick="TakePhoto" class="btn btn-primary">拍摄照片</button>

@if (_capturedPhoto != null)
{
    <div class="mt-3">
        <img src="data:image/jpeg;base64,@Convert.ToBase64String(_capturedPhoto)" 
             alt="拍摄的照片" 
             style="max-width: 100%; max-height: 400px;" />
    </div>
}

@code {
    private byte[]? _capturedPhoto;

    private async Task TakePhoto()
    {
        _capturedPhoto = await PhotoCaptureService.CapturePhotoAsync();
        StateHasChanged();
    }
}

步骤4：配置Android权限 #

在Platforms/Android/AndroidManifest.xml中添加必要的权限：

<!-- 摄像头权限 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<!-- Android 13+ 读取图片权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

通过上述步骤，就能在MAUI Blazor Hybrid的Android端直接唤起摄像头拍摄照片，并且在Blazor页面中实时显示或进一步处理图片。

内容的提问来源于stack exchange，提问作者JoyfulReaper