Blazor Server, ZXing barcode scanner - The current thread is not associated with the Dispatcher. How to correct?

Question

I have a Blazor server application and have been trying to get the ZXing barcode scanner to work.

I can successfully scan over and over when debugging locally.

But when I try to scan after publishing on an Azure App Service, the code scans successfully but then the app is dead/frozen and the browser console has the following:

Here is my markup and code:

    <button @onclick='StartScanner'>Open scanner</button>


<input type='text' value='@Barcode' disabled="disabled" />


@*Show/Hide scanner*@
<div style='display: @(ShowScanner ? "block" : "none")'>


    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="modal fade show" id="myModal" style="display:block; background-color: rgba(10,10,10,.8);" aria-modal="true" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@PopupHeading</h4>
                    <button type="button" class="close" @onclick="StopScanner">&times;</button>
                </div>
                <div class="modal-body">
                    <p>@PopupMessage</p>
                    <BlazorBarcodeScanner.ZXing.JS.BarcodeReader @ref='reader' ShowReset='false' ShowStart='false' ShowResult='false' Title=''
                                                                 ShowVideoDeviceList='false' ShowToggleTorch='false' OnBarcodeReceived='LocalReceivedBarcodeText' />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" @onclick="StopScanner">Close</button>
                </div>
            </div>
        </div>
    </div>


</div>

@code {

private bool ShowScanner;
private string Barcode;

private BlazorBarcodeScanner.ZXing.JS.BarcodeReader reader;

private bool IsDecoding => reader.IsDecoding;

private string PopupHeading;
private string PopupMessage;


private async void LocalReceivedBarcodeText(BarcodeReceivedEventArgs args)
{
    await InvokeAsync(() =>
    {
        this.Barcode = args.BarcodeText;
        PopupHeading = "Barcode found";
        PopupMessage = $"Barcode {Barcode} has been found, you can close this popup or continue scanning.";
        StateHasChanged(); 
    });
}


void StartScanner()
{
    if (!reader.IsDecoding)
        reader.StartDecoding();

    ShowScanner = true;

    PopupHeading = "Scan barcode";
    PopupMessage = string.Empty;

    StateHasChanged();
}

void StopScanner()
{

    if (reader.IsDecoding)
        reader.StopDecoding();

    ShowScanner = false;
    StateHasChanged();
}

}

I have tried this (which did not work):

    private void LocalReceivedBarcodeText(BarcodeReceivedEventArgs args)
{
    
    this.Barcode = args.BarcodeText;
    PopupHeading = "Barcode found";
    PopupMessage = $"Barcode {Barcode} has been found, you can close this popup or continue scanning.";
    InvokeAsync(StateHasChanged);
    
}

As an additional question, does Blazor server have a single session instance per logged-in account? The reason I ask this, is because when I open the app on my phone browser and PC, then scan on my mobile, I see the barcode on my PC?

Any help would be appreciated.

Answer 1

I don't know what the exact cause of the problem was but I think it might be the BlazorBarcodeScanner.ZXing.JS, Blazor barcode scanner .

I manually implemented the JS library and my problem disappeared.