ngx-scanner

ngx-scanner copied to clipboard

Describe the bug After enbling than disabling the torch this error shows up in the console, and qr reading doesn't work anymore.

To Reproduce Steps to reproduce the behavior: HTML:

<div class="qr-scan-area" [class.hidden]="!qrEnabled">
  <div class="controls">
    <ng-container *ngIf="torchCompatible">
      <span class="material-icons" (click)="torchEnabled = true" *ngIf="!torchEnabled">flash_off</span>
      <span class="material-icons" (click)="torchEnabled = false" *ngIf="torchEnabled">flash_on</span>
    </ng-container>
    <span class="material-icons" (click)="qrEnabled = false">close</span>
  </div>
  <zxing-scanner [autostart]="false" [enable]="qrEnabled" (permissionResponse)="onHasPermission($event)"
                 (torchCompatible)="onTorchCompatible($event)" [autofocusEnabled]="true"
                 (hasDevices)="onHasDevices($event)" (scanSuccess)="onCodeResult($event)"
                 [torch]="torchEnabled"
  ></zxing-scanner>
</div>

onHasPermission(resp) {
    console.log('hasPermission: ' + resp);
    this.hasPermission = resp;
  }

  onHasDevices(resp) {
    console.log('hasDevices: ' + resp);
    this.hasDevices = resp;
  }

  onTorchCompatible(resp) {
    console.log('torchCompatible: ' + resp);
    this.torchCompatible = resp;
  }

  onCodeResult(resultString: string): void {
    console.log(resultString);
    this.url = resultString;
    this.qrEnabled = false;
  }

  startReading() {
    if (!this.hasDevices) {
      return;
    }
    if (this.hasPermission) {
      this.selectDevice();
    } else {
      this.scanner.askForPermission().then((response) => {
        console.log('response: ' + response);
        if (response) {
          this.selectDevice();
        }
      })
    }
  }

  selectDevice() {
    this.qrEnabled = true;
    this.scanner.updateVideoInputDevices().then(devices => {
      let device = devices.find(device => {
        if (device.label.includes('back')) {
          return device;
        }
      })
      device = device ? device : devices[devices.length - 1];
      this.scanner.device = device;
    });
  }

Expected behavior QR reading works after enabling or disabling torch

Smartphone (please complete the following information):

• Device: OnePlus5
• OS: Android 10
• Browser Chrome
• Version Chrome (81.0.4044.117)

The issue is reproducible on https://zxing-js.github.io/ngx-scanner/. It seems that the device is being unselected after disabling torch, so this is my workaround:

toggleTorch() {
    this.torchEnabled = !this.torchEnabled;
    if (!this.torchEnabled) {
      setTimeout(() => {
        this.scanner.device = this.selectedDevice;
      }, 500)
    }
  }

However the error is still in the console.

We also have a similar issue when enabling try-harder.

Any updates on this issue?

- when setting torch off?

+1

As - except the error / message - there's no other side effect i'm aware of, I hacked it this way:

@Injectable()
export class AppErrorHandler extends ErrorHandler {

  private counter: number = 0;

  constructor(
    private zone: NgZone,
    private appInsights: AppInsights,
    private authService: AuthService,
    private snackBar: MatSnackBar,
  ) {
    super();
  }

  cnt = 0;

  skipErrorNotification(error: any): boolean {
    // Error: Uncaught (in promise): UnknownError: setOptions failed - https://github.com/zxing-js/ngx-scanner/issues/297#issuecomment-621782384
    else if (error.rejection?.message == "setOptions failed") return true;
    else return false;
  }

  handleError(error: any) {

    // ensure error is an object
    if (error instanceof Object === false) {
      error = new Error(error);
    }

    // un-wrap promise error:
    // revert to original error message (note: based on original error we might have here an object or a plain value: string)
    // but keep the entire promise error
    if (error.promise && error.rejection) {
      error.message = error.rejection.message || error.rejection
    }

    // skip some specific errors
    if (this.skipErrorNotification(error)) {
      console.warn("Error handling skipped", error);
      return;
    }

    //
    // handle error
    let counter = ++this.counter;


    // NOTE: errors are logged so-so...
    console.info(`App Error Handler: ${counter}, error: `, error);

    if (this.appInsights && this.appInsights.instance) {
      this.appInsights.instance.trackException({ exception: error }); /** wont' log if not's Error-based */
    }

    // NOTE: add toast / snackbar here
    this.snackBar.open(
      'Some error occured! Please try again later!',
      'Dismiss',
      {
        duration: undefined, // use **undefined** to keep until action button pressed!
        panelClass:  []
      });

    super.handleError(error);

    // NOTE: throwing an error helps in debugging the issue...
    // throw(error);
  }