hamidrezahy / blazor.qrcode

Blazor QRcode

A qrcode reader and qrcode maker for Blazor WebAssembly. Based on Html5Qrcode and qrcode.

Install

Install this package in client_side project packages with:

Install-Package Blazor.QRCode -Version x.x

x.x is version of package for use last version see https://www.nuget.org/packages/Blazor.QRCode

How to use

add js files in client_side _Host.cshml or index.html

Befor closed body tag:

<script src="_content/Blazor.QRCode/html5-qrcode.min.js"></script>
<script src="_content/Blazor.QRCode/qrcode.min.js"></script>
<script src="_content/Blazor.QRCode/qrcode-init.js"></script>

then use this for create qrcode:

<QrCode
    ElementId="id"
    Width="150"
    height="150"
    Text="sampleText">
</QrCode>

and use this for read qrcode:

<QrCodeReader OnDetect="@DetectCallBack" OnError="@ErrorCallBack" />

@code
{

    public string text { get; set; } = "";

    public void DetectCallBack(string detectedString)
    {
    }

    public void ErrorCallBack(string errormesg)
    {
    }
}

blazor.qrcode's Issues

qrCodeMessage is not defined

Thanks for sharing this, but I can't get it to work.

I followed the instructions on the main page, and added the qrcode.min.js library (as commented in issue #1, maybe you should add that to the main page), but when I try it, I get a 404 on _content/Blazor.QRCode/qrcode.minErrorCallBack.js.

Probably as a result of this, I get the following error in the browser console when I click the "Start scanning" button...

Uncaught ReferenceError: qrCodeMessage is not defined
    at qrcode-init.js:10:13
    at qrCodeErrorCallback (html5-qrcode.min.js:7:1291)
    at p (html5-qrcode.min.js:4:2883)
    at b (html5-qrcode.min.js:4:3240)
    at HTMLVideoElement.d.onplaying (html5-qrcode.min.js:4:3611)

Any ideas what's going wrong?

Thanks again.

Qrcode tag not working

I add the NuGet package and add the script tags in an index.html but showing ReferenceError: QRCode is not defined
at initQrCode (https://localhost:7234/_content/Blazor.QRCode/qrcode-init.js:16:5)

Clear method

Thanks for the great control. When I use it in my app, I have a button and a textbox where users can enter their id number and it creates the QR code perfectly. If they enter multiple id's there are multiple QR codes down the page. Is there a way to clear the current QR code and then refresh it with the new text?

Sample project doesn't work

Thanks for adding the sample project, however it doesn't work.

As I commented in issue #2 , your JavaScript is incorrect. The variable you use inside one of the functions doesn't match the name of the parameter, so you get an error. See the issue there for more details.

However, even if I copy the JavaScript out, correct it and put it in a file which I link instead of the JavaScript from the package, it still doesn't work.

I modified your sample code to look like this...

@page "/"

<PageTitle>Index</PageTitle>

<QrCode ElementId="id"
        Width="150"
        height="150"
        Text="[email protected]">
</QrCode>
<br />
<QrCodeReader Width="400" OnDetect="@DetectCallBack" OnError="@ErrorCallBack" />

@code
{

  public void DetectCallBack(string detectedString) => Console.WriteLine($"DetectCallBack: {detectedString}");

  public void ErrorCallBack(string errormesg) => Console.WriteLine($"ErrorCallBack: {errormesg}");
}

When I click the Start scanning button, I see masses of lines in the console window, all identical...

blazor.webassembly.js:1 ErrorCallBack: QR code parse error, error = TypeError: Cannot read properties of null (reading 'getContext')

Pointing my webcam at a QR code doesn't do anything, presumably because of this error.

Any ideas what the issue is?

As a side point, the Width properties on your two components are inconsistent. The QrCode component takes a plain number, whereas the QrCodeReader component requires a unit as well, eg 600px. This is confusing.

Thanks