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

本文介绍了在MAUI项目中构建工程bh001_camera_barcode的过程,包括添加BlazorHybrid.Maui.Permissions包、请求摄像头权限、集成ZXingBlazor进行扫码以及使用BootstrapBlazor.WebAPI实现拍照功能。还提到了如何在iOS中手动添加相机权限至Info.plist文件,并分享了远程调试的相关资源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 建立工程 bh001_camera_barcode

源码

2. 添加 nuget 包 BlazorHybrid.Maui.Permissions

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

3. 添加摄像头权限

安卓

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

iOS

发文当天我机器的vs版本双击 Info.plist 文件找不到权限配置窗口,那就先上图手动添加的方式吧

<key>NSCameraUsageDescription</key>
<string>此应用程序需要访问您的相机。请根据要求授予权限.</string>

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. 运行效果

7. 测试拍照

安装 BootstrapBlazor.WebAPI 包

编辑 index.razor 文件,添加如下代码

@using BootstrapBlazor.Components

<div class="row g-10 mt-3">
    <div class="col-12 col-sm-4">

    <Capture /> 
    </div>
</div>

其中, @using BootstrapBlazor.Components 以后可能会经常用到, 也可以添加到 _Imports.razor 文件里面.

8. 相关资料

如何远程调试 MAUI blazor / Blazor Hybrid
https://www.cnblogs.com/densen2014/p/16988516.html

### 创建配置 Blazor Hybrid 项目 #### 使用 Visual Studio 或 .NET CLI 创建 Blazor Hybrid 项目 对于希望构建混合应用的开发者来说,可以利用现有的工具链来启动新项目。通过命令行接口 (CLI),创建个基础的 Blazor WebAssembly 应用程序是个起点: ```bash dotnet new blazorwasm -o BlazorHybridApp cd BlazorHybridApp ``` 然而,为了适应更广泛的设备支持并充分利用本地功能,应当转向 Blazor Hybrid 模型[^1]。 #### 调整为 Blazor Hybrid 配置 旦有了初始的应用结构,下步就是将其转换成适合于多平台部署的形式。这通常涉及到引入特定库支持文件以便能够编译为目标操作系统所特有的二进制格式。具体操作可能依赖于目标环境的选择(如 .NET MAUI),因为这些框架提供了必要的桥梁让 web 技术可以在原生环境中执行[^2]。 #### 利用预设模板简化设置过程 除了手动调整外,还有专门设计用于快速搭建 Blazor Hybrid 应用的模板可用。例如,在 Avalonia UI 上建立的新项目可以通过如下指令完成初始化工作,并且在此过程中还可以指定所需的许可密钥以激活某些特性集: ```bash dotnet new dotnetbrowser.blazor.avalonia.app -o Blazor.AvaloniaUi -li <your_license_key> ``` 这种方法不仅加快了项目的起步速度,还减少了可能出现的人为错误风险[^3]。 #### 关键注意事项 值得注意的是,当涉及用户数据管理时,确保遵循最佳实践至关重要。特别是如果应用程序提供账户注册服务,则应同样考虑实现账户删除机制,从而给予最终用户对其个人信息更大的掌控权[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Densen2014

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值