.NET 8 MAUI Blazor Hybrid Android应用相机拍照实现方案咨询

1. 配置相机权限 #

不同平台需添加对应权限声明：

• Android：打开Platforms/Android/AndroidManifest.xml，插入以下权限代码：

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

• iOS：打开Platforms/iOS/Info.plist，添加相机权限说明：

<key>NSCameraUsageDescription</key>
<string>需要访问相机拍摄图片</string>

• Windows：打开Platforms/Windows/Package.appxmanifest，在「功能」选项卡勾选「网络摄像头」。

2. 创建相机服务 #

新建CameraService.cs类，封装跨平台相机调用逻辑：

using Microsoft.Maui.Media;

public class CameraService
{
    public async Task<FileResult> CapturePhotoAsync()
    {
        // 检查并请求相机权限
        var status = await Permissions.CheckStatusAsync<Permissions.Camera>();
        if (status != PermissionStatus.Granted)
        {
            status = await Permissions.RequestAsync<Permissions.Camera>();
            if (status != PermissionStatus.Granted) return null;
        }

        // 调用系统原生相机拍照
        return await MediaPicker.Default.CapturePhotoAsync(new MediaPickerOptions
        {
            Title = "拍摄图片"
        });
    }
}

在MauiProgram.cs中注册服务：

builder.Services.AddSingleton<CameraService>();

3. 在Blazor组件中调用相机 #

修改你的scan.razor页面，注入服务并绑定按钮点击事件：

@page "/scan"
@inject CameraService CameraService

<button class="text-center camera-button p-3 px-5 text-white" @onclick="CapturePhoto">
    Scan
</button>

@if (capturedImagePath != null)
{
    <img src="@capturedImagePath" alt="拍摄的图片" style="max-width: 100%; margin-top: 20px;" />
}

@code {
    private string? capturedImagePath;

    private async Task CapturePhoto()
    {
        var photo = await CameraService.CapturePhotoAsync();
        if (photo == null) return;

        // 将图片保存到缓存目录，供Blazor页面访问
        var tempPath = Path.Combine(FileSystem.CacheDirectory, photo.FileName);
        using var stream = await photo.OpenReadAsync();
        using var fileStream = File.OpenWrite(tempPath);
        await stream.CopyToAsync(fileStream);

        capturedImagePath = tempPath;
        StateHasChanged();

        // 此处可添加图片后续处理逻辑（如上传、识别等）
    }
}

补充说明 #

• 上述方案使用MAUI内置的MediaPicker组件，直接调用系统原生相机界面，跨平台适配性强，实现成本低。
• 若需自定义相机界面（如添加扫码框、滤镜等），可使用MAUI的CameraView原生组件，通过Blazor的原生集成方式嵌入页面，但实现复杂度更高。

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