[Feature Request] Angular 16 framework support for this library about html5-qrcode

[ROBERT-MCDOWELL]

html5-qrcode was never developed to be on angular framework. however you can easily create a PR to satisfy your wishes.

[lazmeister]

We have implemented this in Angular. Let me know if you still need help with this

[saifk9]

Hi Team, Can you share the code file for Angular, I tried searching for it but couldnt find it.

…

On Fri, 10 May 2024 at 07:29, Laszlo ***@***.***> wrote: We have implemented this in Angular. Let me know if you still need help with this — Reply to this email directly, view it on GitHub <#902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BG7ONX535W3PM36UL7YEKGDZBQSYBAVCNFSM6AAAAABEXPV2M6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBTG4YTEMZRGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[lazmeister]

Hope this helps, npm i html5-qrcode in your angular project,

For your barcode component (giving you bits and pieces but let me know if that helps)

import { Html5Qrcode} from 'html5-qrcode';

  qrResultString: string;

ngOnInit() {
    const html5QrCode = new Html5Qrcode('qr-reader');
    const config = {
      fps: 10,
      qrbox: 300,
      showTorchButtonIfSupported: true,
      rememberLastUsedCamera: true,
      showZoomSliderIfSupported: true,
      useBarCodeDetectorIfSupported: true,
      defaultZoomValueIfSupported: 2};

    const onScanSuccess = (decodedText, decodedResult) => {
      if (!this.qrResultString) {
        // handle the scanned code as you like, for example:
        console.log(`Code matched = ${decodedText}`, decodedResult);
        this.qrResultString = decodedText;
        this.utilitiesService.delay(1000); // this is just a ms delay function
        html5QrCode.stop();
        this.dismissModal(); // our own function to close the modal (we are using Ionic)
      }
    };
    const onScanFailure = (error) => {
    };
    // If you want to prefer back camera
    html5QrCode.start({ facingMode: 'environment' }, config, onScanSuccess, onScanFailure);
  }

HTML:

<div style="width: 100%">
  <div id="qr-reader" class="qr-reader"></div>
</div>

CSS:

.barcodeModal {
  z-index: 1;
}

.qr-reader {
  display: inline-block;
}