Blazor QR Code Scanner

An easy implementation of jsQR, as a Blazor Component.

GITHUB

About The Project

I just needed a component that help me scan QR Code. As I could not found one in a Blazor Component, I did it myself, using the wonderfull jsQR javascript library. (all greets to him/her/them)

Requirement

Should work with .net Core 3.1. Works with .net 6.0 and 7.0

Getting Started

Add nuget package : ReactorBlazorQRCodeScanner

• Package Manager

  Install-Package ReactorBlazorQRCodeScanner

• dotnet cli

  dotnet add package ReactorBlazorQRCodeScanner

Usage

Open a razor page or a component

1. add reference to the lib and to JsRuntime

   @inject IJSRuntime JS
   @using ReactorBlazorQRCodeScanner
   

2. add this somewhere in your code

   <QRCodeScanner />

3. In the code section, add this

    @code {
   
      private QRCodeScannerJsInterop? _qrCodeScannerJsInterop;
      private Action<string>? _onQrCodeScanAction; 
   
      protected override async Task OnInitializedAsync()
      {
         _onQrCodeScanAction = (code) => OnQrCodeScan(code);  
   
          _qrCodeScannerJsInterop = new QRCodeScannerJsInterop(JS);
          await _qrCodeScannerJsInterop.Init(_onQrCodeScanAction);
      }
   
      private static void OnQrCodeScan(string code)
      {
          Console.WriteLine($"OnQrCodeScan {code}");
      }
   }
   

4. run your project

   dotnet watch run

Code explaination

private QRCodeScannerJsInterop? _qrCodeScannerJsInterop;

_qrCodeScannerJsInterop is the way to communicate with the ReactorBlazorQRCodeScanner Component "QRCodeScanner"

private Action<string> _onQrCodeScanAction = (code) => OnQrCodeScan(code);

_onQrCodeScanAction is an action that call OnQrCodeScan when invoked. (invokation is done in the ReactorBlazorQRCodeScanner lib when it detects a QR Code throw the cam)

protected override async Task OnInitializedAsync()
      {
          _qrCodeScannerJsInterop = new QRCodeScannerJsInterop(JS);
          await _qrCodeScannerJsInterop.Init(_onQrCodeScanAction);
      }

On your page/componenent initialization, you need to build the QRCodeScannerJsInterop object and the run the Init method that takes one parameter : an Action (delegate).

When this one is Invoked, it fires the methods "OnQrCodeScan" where you can treat your QRCode data.

protected async Task StopQRScan()
      {
          await _qrCodeScannerJsInterop.StopRecording();
      }

With "StopRecording" you can cancel the QR recording / video stream so that the browser will no longer use the webcam and the webcam icon in the browser (red dot) will dissapear.

Options

• You can show/hide the output line that indicates the result of the QRCode when scanned. Default is true (visible)

<QRCodeScanner ShowOutput="false"/>

• You can set a custom loading message with the parameter "LoadingMessage", the default message is "Loading video stream (please make sure you have a camera enabled)".

<QRCodeScanner LoadingMessage="My custom loading message"/>

• You can set a custom output message, when no QR code is scanned, with the parameter "OutputMessage", the default message is "No QR code detected.".

<QRCodeScanner OutputMessage="My custom no QR code found message"/>

• You can set a width in pixel (W/H ratio repected) :

<QRCodeScanner Width="100"/>

or in % of the screen width size (W/H ratio repected) :

<QRCodeScanner Width="90%"/>

Width default will be the size of your camera video stream.

TroubleShooting

You need to have a camera on your device.

It can works on a laptop with a webcam, or it could be a phone's camera

The webbrowser will ask you permission to use the camera.

Until you accept it (or refuse it), a message will be displayed :

Loading video stream (please make sure you have a camera enabled)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Yann Vasseur - @YannVasseur - contact@reactor.fr

Project Link: https://github.com/YannVasseur35/ReactorBlazorQRCodeScanner