MAUI Blazor调用相机扫码(安卓)
由于MAUI Blazor和原生的MAUI不一样,MAUI Blazor是嵌套webview实现的,页面是Razor组件组成;我们在申请设备权限的适合,必须向webview申请权限;
1.修改AndroidManifest.xml
修改Platforms\Android\AndroidManifest.xml
点击查看代码
<!--相机权限-->
<uses-permission android:name="android.permission.CAMERA" android:required="false"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!--相机功能-->
<uses-feature android:name="android.hardware.camera" />
<!--音频录制权限-->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!--位置权限-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Needed only if your app targets Android 5.0 (API level 21) or higher. -->
<uses-feature android:name="android.hardware.location.gps" />
2.修改MainActivity.cs
修改Platforms\Android\MainActivity.cs;重写OnCreate方法,申请权限;
点击查看代码
public class MainActivity : MauiAppCompatActivity
{
/// <summary>
/// 需要申请的权限列表
/// </summary>
private readonly List<string> _permissions = new()
{
Manifest.Permission.Camera,
Manifest.Permission.RecordAudio,
Manifest.Permission.ModifyAudioSettings,
// 蓝牙需要的权限
Manifest.Permission.BluetoothScan,
Manifest.Permission.AccessCoarseLocation,
Manifest.Permission.AccessFineLocation,
Manifest.Permission.BluetoothConnect
};
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Platform.Init(this, savedInstanceState);
ActivityCompat.RequestPermissions(this, _permissions.ToArray(), 0);
}
}
3.自定义MauiWebChromeClient类
点击查看代码
#if ANDROID
using Android.Webkit;
using Microsoft.AspNetCore.Components.WebView.Maui;
namespace BoxMaster.APP;
public class MauiWebChromeClient : WebChromeClient
{
public override void OnPermissionRequest(PermissionRequest request)
{
request.Grant(request.GetResources());
}
}
public class MauiBlazorWebViewHandler : BlazorWebViewHandler
{
protected override void ConnectHandler(Android.Webkit.WebView platformView)
{
platformView.SetWebChromeClient(new MauiWebChromeClient());
base.ConnectHandler(platformView);
}
}
#endif
4.MauiProgram.cs
注意一定要写在 builder.Services.AddMauiBlazorWebView()之后!
点击查看代码
#if ANDROID
builder.ConfigureMauiHandlers(handlers =>
{
handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>();
});
#endif
5.添加nuget包ZXingBlazor 1.01版本
6.Index.razor添加扫码组件
点击查看代码
<Button OnClick="(()=>ShowScanBarcode=!ShowScanBarcode)">扫码</Button>
<span class="text-success h5 fw-bold">@Barcode</span>
@if (ShowScanBarcode)
{
<ZXingBlazor.Components.BarcodeReader ScanResult="((e)=>{Barcode=e;ShowScanBarcode=!ShowScanBarcode;})" Close="(()=>ShowScanBarcode=!ShowScanBarcode)">
</ZXingBlazor.Components.BarcodeReader>
}
@code{
private bool ShowScanBarcode;
public string Barcode { get; set; }
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期