Forum

Notifications
Clear all

QR Code Scanner

2 Posts
2 Users
2 Reactions
437 Views
(@hackbart)
Posts: 24
Trusted Member
Topic starter
 

Hi, this is a small snippet and shows how to use the QR code scanner from here:

https://raw.githubusercontent.com/nimiq/qr-scanner/master/qr-scanner.legacy.min.js

unit qrscanner;

interface

uses
  qtx.sysutils, qtx.classes, qtx.dom.widgets, qtx.dom.types;

type
 TQTXQRScanner = class;
 TQTXQRScannerConstructor = procedure (QTXScanner: TQTXQRScanner);

 TOnGetQRCode = procedure(Sender: TObject; Result: String);

 TQTXQRScanner = class(TQTXWidget)
 private
  FOnGetQRCode: TOnGetQRCode;
  FVideoElement: THandle;
  FScanner: THandle;
 public
  constructor Create(AOwner: TQTXComponent; CB: TQTXQRScannerConstructor); reintroduce; virtual;

  property OnGetQRCode: TOnGetQRCode read FOnGetQRCode write FOnGetQRCode;
 end;

implementation

constructor TQTXQRScanner.Create(AOwner: TQTXComponent; CB: TQTXQRScannerConstructor);

 procedure Callback(AResult: Variant);
 begin
  if assigned(FOnGetQRCode) then FOnGetQRCode(Self, AResult.data);
 end;

begin
  inherited Create(AOwner, procedure(Widget: TQTXWidget)
  begin
   Style.width := '100%';
   Style.height := '100%';

   asm
    const video = document.createElement('video');
    video.id = 'qr-video';

    @self.FVideoElement = video;
   end;
   Widget.Handle.appendChild(FVideoElement);
   if assigned(CB) then CB(self);

   TQTXDispatch.Execute(procedure()
   begin
    asm
      const scanner = new QrScanner(video, result => {
         @Callback(result);
        }, {
          highlightScanRegion: true,
          highlightCodeOutline: true,
        });

     @self.FScanner = scanner;
     scanner.start();
    end;
   end,1000);
  end);
end;

end.

 

 

This topic was modified 11 months ago by Hackbart
 
Posted : 29/01/2024 8:31 am
AllenWu and Lou reacted
(@szilard)
Posts: 3
Active Member
 

I was suddenly very happy when I managed to get it working 🙂
//yeah, I'm pretty new to quartex.

I like this qr code reader, thank you!!

Is it possible to resize the scan area in some way? such as the code in the link below or in another way (maybe with CSS??)
https://scanapp.org/blog/2022/01/09/setting-dynamic-qr-box-size-in-html5-qrcode.html

 
Posted : 29/01/2024 8:29 pm
Share: