CODEWITHSUNDEEP
qr-codemauimaui-blazor
dpc46
dpc46

Reputation: 225

How to use camera QR Code Reader on MAUI Blazor Hybrid

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.

Upvotes: 8

Views: 8900

Answers (2)

Luke Vo
Luke Vo

Reputation: 20718

Thanks to the project linked in the current answer I have been making many projects that use getUserMedia. I have made a Nuget package for it on Github and Nuget so you can use reuse them in your projects:

  1. Install the Nuget package:
dotnet add package JsPermissionHandler
  1. Add permissions (only add what you need, not everything below):

  • You do not need to do anything special to use this library on Windows.

  • Android: Add permissions to your AndroidManifest.xml file (in Platforms/Android).

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  • iOS: Add permissions to your Info.plist file (in Platforms/iOS).
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app requires access to your location. Please grant access to your precise location when requested.</string>
<key>NSCameraUsageDescription</key>
<string>This app requires access to your camera. Please grant access to your camera when requested.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires access to your microphone. Please grant access to your microphone when requested.</string>
  1. Add Handlers:
public MainPage()
{
    InitializeComponent();

    new BlazorWebViewHandler()            
        // Add whichever you need:
        .AddCamera()
        .AddMicrophone()
        .AddGeolocation()
        // blazorWebView is the name of your BlazorWebView
        .AddInitializingHandler(blazorWebView);
}

Upvotes: 2

exe.bat
exe.bat

Reputation: 360

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.

Upvotes: 4

Related Questions