'Zxing scanner component: TypeError TypeError: Cannot read property 'stop' of undefined

I am trying to scan a document to get the data. I am using Zxing scanner and I get the error and the camera power off. There are some similar quiestions but the answers didn´t help me.

My code:

import { Component } from '@angular/core';


@Component({
  selector: 'app-scanner',
  templateUrl: './scanner.component.html',
  styleUrls: ['./scanner.component.css']
})
export class ScannerComponent {

  constructor() { }

  camerasNotFound(e: Event) {
    // Display an alert modal here
  }

  cameraFound(e: Event) {
    // Log to see if the camera was found
  }

  onScanSuccess(result: string) {
    console.log(result);
  }

  scanSuccessHandler(e: Event): void {

  }

}

the template is:

<zxing-scanner
  #scanner
  [formats]="['QR_CODE', 'EAN_13']"
  (camerasFound)="cameraFound($event)"
  (camerasNotFound)="camerasNotFound($event)"
  (scanSuccess)="scanSuccessHandler($event)"
>
</zxing-scanner>

I have done like in this link: https://github.com/zxing-js/ngx-scanner/wiki/Getting-Started



Solution 1:[1]

you must make sure to install the latest or same version browser & library

"@zxing/browser": "0.0.9", "@zxing/library": "^0.18.6",

Solution 2:[2]

Try this

npm i @zxing/[email protected] --save --legacy-peer-deps
npm i @zxing/[email protected] --save --legacy-peer-deps
npm i @zxing/[email protected] --save --legacy-peer-deps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ruddy
Solution 2 Darkfinger