How to use the Chrome BarcodeDetector from Chrome Shape Detection API in Angular?

I tried first using the BarcodeDetector in a plain JS project and it works just fine, but when trying to implement it in Angular it's not working. I get an error that the BarcodeDetector cannot be found. I would really appreciate it if someone can give me some guidance on how to approach this. I couldn't find any good example online

This is my plain js implementation:

let barcodeImg = document.querySelector('img');

let detectFunc = async() => {
    if (!('BarcodeDetector' in window))  {
        console.log("It's not");
    } else {
        console.log("Barcode supported");

        const barcodeDetector  = new BarcodeDetector();

        try {
            barcodeDetector.detect(barcodeImg)
            .then(detectedCodes  => {
                console.log(detectedCodes);
            })
        } catch (e) {
            console.log("Barcode detection failed");
        }
    }
} 

This is my Angular implementation:

export class AppComponent {

  BarcodeDetector: any;
  @ViewChild("barcodeImg") barcodeImg!: ElementRef;
  hasBarcodeDetector = '';

  constructor() {
    try {
      this.hasBarcodeDetector = 'BarcodeDetector' in window ? 'true' : 'false';
      const barcodeDetector = new BarcodeDetector();
      barcodeDetector.detect(this.barcodeImg.nativeElement).then(detectedCodes => {
        console.log(detectedCodes);
      })
    } catch (e) {
      console.log(e);
    }
  }
};

Via Active questions tagged javascript - Stack Overflow https://ift.tt/hWwKnml