MAUI Blazor调用相机扫码(安卓)

发布时间 2023-08-14 15:15:58作者: 夜半钟声Pro

由于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; }
}

7.效果

image

image

image