I need help with my .NET Maui Blazor Hybrid project. What I am trying to do is the following:
- Each user page has a generated QR code that holds a part of the endpoint address
- There are 2 types of users, Trainer and Trainee
- There is an endpoint POST method to links 2 users that finally should look like this:
/users/links/{initiatorType}/{initiatorId}/{targetCode}/linkso for example the if a Trainer is logged in, his/her QR code would be:/users/links/Trainer/1 - Imagine both Trainer and Trainee meet at the gym, the Trainer shows his/her QR code to the Trainee in order to scan it, another service method completes the endpoint address and sends a POST request.Obviously I also have other actions like Share code, Copy code to clipboard so it can be sent to another user via a Messenger or any other communicator.
I only do C# in Maui Blazor via blazorWebView, no native code.
I am unable to detect and retrieve the QR's string. Can anyone help me with a simple solution to this problem? Many thanks for any hints/directions.
OK, so I have the nugets :ZXing.Net.Maui.Controls
I added the BarcodeReader in MauiProgram.cs
builder.UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }).UseBarcodeReader();The camera permissions in both Android and Ios added.
This is my razor page:
@page "/UserProfile"<CustomButtonComponent OnClick="ScanQrCode"> Scan</CustomButtonComponent><div">@_qrCodeResult</div><ErrorMessageComponent @ref="_errorMessage"/>@code { private string? _loggedUserId; private User? _user; private ErrorMessageComponent? _errorMessage; private string? _url; private string? _qrCodeResult = "Not Scanned"; private async Task ScanQrCode() { try { // Check permissions for camera var status = await Permissions.CheckStatusAsync<Permissions.Camera>(); if (status != PermissionStatus.Granted) { status = await Permissions.RequestAsync<Permissions.Camera>(); if (status != PermissionStatus.Granted) { Logger.LogError("Camera permission denied."); return; } } // Use the MediaPicker for photo capture var photo = await MediaPicker.CapturePhotoAsync(); if (photo == null) { Logger.LogError("No photo taken."); return; } await using var stream = await photo.OpenReadAsync(); var result = await DecodeQrCodeFromStream(stream); if (result != null) { _qrCodeResult = result.Text; Logger.LogInformation($"QR Code result: {_qrCodeResult}"); // Handle the scanned QR code // await SendLinkRequest(_qrCodeResult); } else { _qrCodeResult = "No QR code found."; Logger.LogWarning("No QR code found."); } } catch (Exception ex) { Logger.LogError(ex, "Error scanning QR code: {Message}", ex.Message); _qrCodeResult = "Error scanning QR Code"; } } // Method to decode QR code from stream private async Task<Result?> DecodeQrCodeFromStream(Stream stream) { try { // Convert the stream to a byte[] (this is necessary for creating the LuminanceSource) var imageBytes = await GetImageBytesFromStream(stream); // Create the LuminanceSource from the image bytes var luminanceSource = new RGBLuminanceSource(imageBytes, 2000, 2000); // Decode the QR code using BarcodeReader var barcodeReader = new BarcodeReaderGeneric(); return barcodeReader.Decode(luminanceSource); } catch (Exception ex) { Logger.LogError(ex, "Error decoding QR code: {Message}", ex.Message); return null; } } // Helper method to convert Stream to byte[] private async Task<byte[]> GetImageBytesFromStream(Stream stream) { using var ms = new MemoryStream(); await stream.CopyToAsync(ms); return ms.ToArray(); } private async Task SendLinkRequest(string scannedUrl) { ... }}So far I get No QR code found error.