.netmauibarcode-scanner

How can I make maui camera recognize rotated barcode?


I'm making an application on .net MAUI and I added the camera on a page that read barcodes and print the code as a text. As I wrote here, it works:

public partial class ScansionaProdotto : ContentPage
{
    public ScansionaProdotto()
    {
        InitializeComponent();
    }

    private void cameraView_CamerasLoaded(object sender, EventArgs e)
    {
        if(cameraView.Cameras.Count > 0)
        {
            cameraView.Camera = cameraView.Cameras.First();
            MainThread.BeginInvokeOnMainThread(async () =>
            {
                await cameraView.StopCameraAsync();
                await cameraView.StartCameraAsync();
            });
        }
    }

    private void cameraView_BarcodeDetected(object sender, Camera.MAUI.ZXingHelper.BarcodeEventArgs args)
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            barcodeResult.Text = $"{args.Result[0].BarcodeFormat}: {args.Result[0].Text}";
        });
    }
}

But if I add cameraView.BarCodeOptions in this way:

public ScansionaProdotto()
{
    InitializeComponent();

    cameraView.BarCodeOptions = new()
    {
        AutoRotate = true
    };
}

And try to scan it on the app it doesn't print anything... I did this in order to make it recognize barcodes even if they are upside down or something like that... How can I make it work?

If it can be useful here's the xaml file as you can have a full view of everything:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cv="clr-namespace:Camera.MAUI;assembly=Camera.MAUI"
             x:Class="TestAppMagazzino.ScansionaProdotto"
             Title="Cerca">
    
    <VerticalStackLayout Spacing="20" Padding="20">
        <Label 
            Text="Scansiona il prodotto oppure ricercalo tramite barra di ricerca"
            VerticalOptions="Center" 
            HorizontalOptions="Start"/>

        <cv:CameraView x:Name="cameraView" WidthRequest="350" HeightRequest="200"
               CamerasLoaded="cameraView_CamerasLoaded" BarCodeDetectionEnabled="True"
               BarcodeDetected="cameraView_BarcodeDetected"
               HorizontalOptions="Center"/>

        <Entry Placeholder="Cerca prodotto" HorizontalOptions="Start" WidthRequest="200"></Entry>
        <Label x:Name="barcodeResult" FontSize="20"/>
        
    </VerticalStackLayout>
</ContentPage>

Solution

  • Upon request, here is a working sample of the ZXing.Net.Maui.Controls.CameraBarcodeReaderView control.

    First, make sure you follow the instructions on how to install the ZXing.Net.Maui.Controls package and properly initialize the plugin.

    In the XAML file, add the necessary namespace and markup:

    <ContentPage 
      ...
      xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
      ...>
    
      <zxing:CameraBarcodeReaderView
        x:Name="CameraReader"                        
        IsDetecting="True"    
        BarcodesDetected="CameraBarcodeReader_BarcodesDetected">
      </zxing:CameraBarcodeReaderView>    
    </ContentPage>
    

    In ScansionaProdotto class, configure the reader in the constructor:

    public ScansionaProdotto()
    {
        InitializeComponent();
                    
        CameraReader.Options = new BarcodeReaderOptions
        {
            AutoRotate = true,
            Multiple = false
        };
    }
    

    and add the barcode detection event handler:

    private void CameraReader_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
    {
        var result = e.Results?.FirstOrDefault();
        if (result != null)
        {
            // Stop detecting upon successful detection
            CameraReader.IsDetecting = false;
    
            // Get barcode format and value
            string format = result.Format.ToString();
            string value = result.Value;
    
            ...
        }
    }
    

    The barcode reader will detect both linear codes and QRcodes whether upside down or not.

    Hope it helps.