bh001- Blazor hybrid / Maui 使用摄像头和扫码快速教程

1. 建立工程 bh001_camera_barcode

源码

2. 添加 nuget 包 BlazorHybrid.Maui.Permissions

因为源码比较长,主要是一些检查和申请权限相关代码,就不占用篇幅列出,感兴趣的同学直接打开源码参考

3. 添加安卓摄像头权限

双击编辑文件,或者手工添加 <uses-permission android:name="android.permission.CAMERA" />

4. 编辑 MainPage.xaml.cs 文件,添加初始化BlazorWebView组件 InitBlazorWebView 使用js权限.

using BlazorHybrid.Maui.Shared;

namespace bh001_camera_barcode
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            new InitBlazorWebView(blazorWebView);
        }
    }
}

5. 添加 nuget 包 ZXingBlazor 测试扫码

@page "/"
@using ZXingBlazor.Components

<BarcodeReader ScanResult="OnResult"
                   Close="(()=>ShowScanBarcode=!ShowScanBarcode)"
                   Decodeonce="false" /> 

<pre>
    @result
</pre>

@code{

    string result;

    private Task OnResult(string message)
    {
        result += message + Environment.NewLine;
        StateHasChanged();
        return Task.CompletedTask;
    }

}

6. 运行效果