How to use camera QR Code Reader on MAUI Blazor Hybrid

Question

Has anyone found a working solution on scanning QR Codes from a Blazor MAUI Hybrid App?

I have found number of libraries (e.g. BigIslandBarcoding, ZXing.Net) for "normal" Blazor but nothing speicifc to do this on a mobile device (iOS and Android) from razor page (in BlazorWebView).

I'm looking for a simple action to open the camera reader/scanner on button click but can't find anything like that.

Answer 1

I played with this today because I am porting my Blazor server app to MAUI Blazor and had a same problem.

Edit: You dont need this part bellow

I managed to fix it by using this project https://github.com/MackinnonBuck/MauiBlazorPermissionsExample To get device specific permissions and then I installed

Edit: This library has a problem when you try to publish as Release

https://github.com/Redth/ZXing.Net.Mobile

so use this one instead

https://github.com/g0dpain/ZXing.Net.Mobile

It is made for Xamarin but it works in MAUI just fine. What you need to do is add this code in Android project MainActivity.cs file

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Permission[] grantResults)
{
    Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}



protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(Application);

    ZXing.Mobile.MobileBarcodeScanner.Initialize(Application);

}

And in your Razor page you can call it like this

async Task ScanBarcode()
{

    var scanner = new ZXing.Mobile.MobileBarcodeScanner();
   
    var result = await scanner.Scan();

    barcode = result.Text;


}

I tried it in Android emulator and on real device and it works great.