[C#/MAUI/.NET6] CameraBarcodeReaderView 엘리먼트 : 바코드/QR 코드 캡처하기

■ CameraBarcodeReaderView 엘리먼트를 사용해 바코드/QR 코드를 캡처하는 방법을 보여준다.

TestProject.zip

0.15MB

▶ TestProject.cs

<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>TestProject</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>
        <ApplicationTitle>TestProject</ApplicationTitle>
        <ApplicationId>com.companyname.testproject</ApplicationId>
        <ApplicationIdGuid>307F785A-6EDE-4AEB-8813-DC0FFA886398</ApplicationIdGuid>
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">31.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
        <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
    </PropertyGroup>
    <ItemGroup>
        <MauiIcon
            Include="Resources\appicon.svg"
            ForegroundFile="Resources\appiconfg.svg"
            Color="#512bd4" />
        <MauiSplashScreen
            Include="Resources\appiconfg.svg"
            Color="#512bd4"
            BaseSize="128,128" />
        <MauiImage Include="Resources\Images\*" />
        <MauiImage
            Update="Resources\Images\dotnet_bot.svg"
            BaseSize="168,208" />
        <MauiFont Include="Resources\Fonts\*" />
        <MauiAsset
            Include="Resources\Raw\**"
            LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>
    <ItemGroup>
        <PackageReference Include="ZXing.Net.Maui" Version="0.1.0-preview.5" />
    </ItemGroup>
</Project>

 

▶ Platforms\Android\AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:allowBackup="true"
        android:icon="@android:mipmap/sym_def_app_icon"
        android:roundIcon="@mipmap/appicon_round"
        android:supportsRtl="true" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET"             />
    <uses-permission android:name="android.permission.CAMERA"               />
</manifest>

 

▶ MauiProgram.cs

using ZXing.Net.Maui;
using ZXing.Net.Maui.Controls;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseBarcodeReader()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            )
            .ConfigureMauiHandlers
            (
                handlerCollection =>
                {
                    handlerCollection.AddHandler(typeof(CameraBarcodeReaderView), typeof(CameraBarcodeReaderViewHandler));
                    handlerCollection.AddHandler(typeof(CameraView             ), typeof(CameraViewHandler             ));
                    handlerCollection.AddHandler(typeof(BarcodeGeneratorView   ), typeof(BarcodeGeneratorViewHandler   ));
                }
            );

        return builder.Build();
    }

    #endregion
}

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI">
    <Grid RowDefinitions="*,*,30">
        <zxing:CameraBarcodeReaderView x:Name="cameraBarcodeReaderView" Grid.Row="0"
            IsDetecting="True"
            IsTorchOn="False" />
        <HorizontalStackLayout Grid.Row="0"
            HorizontalOptions="Start"
            VerticalOptions="Start">
            <Label
                VerticalOptions="Center"
                Margin="10,0,0,0"
                TextColor="White"
                Text="후면" />
            <Switch x:Name="cameraLocationSwitch"
                VerticalOptions="Center"
                IsToggled="False" />
            <Label
                VerticalOptions="Center"
                Margin="0"
                TextColor="White"
                Text="전면" />
        </HorizontalStackLayout>
        <HorizontalStackLayout Grid.Row="0"
            HorizontalOptions="End"
            VerticalOptions="Start">
            <Switch x:Name="cameraLightSwitch"
                VerticalOptions="Center"
                IsToggled="False" />
            <Label
                VerticalOptions="Center"
                Margin="0,0,10,0"
                TextColor="White"
                Text="조명" />
        </HorizontalStackLayout>
        <zxing:BarcodeGeneratorView x:Name="barcodeGeneratorView" Grid.Row="1"
            Margin="20"
            ForegroundColor="Black"
            Format="QrCode" />
        <Label x:Name="barcodeResultLabel" Grid.Row="2"
            VerticalOptions="End"
            Margin="10,0,0,0"
            FontSize="18" />
    </Grid>
</ContentPage>

 

▶ MainPage.xaml.cs

using ZXing.Net.Maui;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.cameraLocationSwitch.Toggled             += cameraLocationSwitch_Toggled;
        this.cameraLightSwitch.Toggled                += cameraLightSwitch_Toggled;
        this.cameraBarcodeReaderView.BarcodesDetected += cameraBarcodeReaderView_BarcodesDetected;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 카메라 위치 스위치 토글시 처리하기 - cameraLocationSwitch_Toggled(sender, e)

    /// <summary>
    /// 카메라 위치 스위치 토글시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cameraLocationSwitch_Toggled(object sender, ToggledEventArgs e)
    {
        if(this.cameraLocationSwitch.IsToggled)
        {
            this.cameraBarcodeReaderView.CameraLocation = CameraLocation.Front;
        }
        else
        {
            this.cameraBarcodeReaderView.CameraLocation = CameraLocation.Rear;
        }
    }

    #endregion
    #region 카메라 조명 스위치 토글시 처리하기 - cameraLightSwitch_Toggled(sender, e)

    /// <summary>
    /// 카메라 조명 스위치 토글시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cameraLightSwitch_Toggled(object sender, ToggledEventArgs e)
    {
        this.cameraBarcodeReaderView.IsTorchOn = this.cameraLightSwitch.IsToggled;
    }

    #endregion
    #region 카메라 바코드 리더 뷰 바코드 탐지시 처리하기 - cameraBarcodeReaderView_BarcodesDetected(sender, e)

    /// <summary>
    /// 카메라 바코드 리더 뷰 바코드 탐지시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cameraBarcodeReaderView_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
    {
        Dispatcher.Dispatch
        (
            () =>
            {
                this.barcodeResultLabel.Text = $"{e.Results[0].Value}{Environment.NewLine}[{e.Results[0].Format}]";

                this.barcodeGeneratorView.Value = e.Results[0].Value;
            }
        );
    }

    #endregion
}