ngx-scanner

ngx-scanner copied to clipboard

Describe the bug When using the camera, I get an error saying: 'Avoid setting a device during auto-start.'

To Reproduce Steps to reproduce the behavior:

1. Open a page using the camera and the tag.

Expected behavior The feedback of the camera should appear

Desktop (please complete the following information):

• OS: MacOs Cataline 10.15.5
• Browser Chrome
• Version 84.0.4147.135

Additional context According to source code, we are setting the device during auto start:

private autostartScanner(devices: MediaDeviceInfo[]) {

    const matcher = ({ label }) => /back|trás|rear|traseira|environment|ambiente/gi.test(label);

    // select the rear camera by default, otherwise take the last camera.
    const device = devices.find(matcher) || devices.pop();

    if (!device) {
      throw new Error('Impossible to autostart, no input devices available.');
    }

    this.device = device; // HERE!
    // @note when listening to this change, callback code will sometimes run before the previous line.
    this.deviceChange.emit(device);

    this.isAutostarting = false;
    this.autostarted.next();
  }

IMPORTANT: This might help you debug my issue: I had ^3.0.0 as a package dependency. while facing the issue I was on v 3.0.1 with your latest commit. Fixing version to 3.0.0 solved my issue.

Have same issue on 3.0.1, 3.0.0. Going back to 2.0.1 solved issue for me.

Reverting to version 3.0.0 fixed the issue for me too.

• version 3.0.1
• Windows 10 Laptop
• Browser: Chrome 85.0.4183.102

I had the same problem. Resolved by following the demo app structure. The demo gives nice guidelines how to efficiently load the camera.

• version 3.0.1
• Windows 10 Laptop
• Browser: Chrome 85.0.4183.102

I had the same problem. Resolved by following the demo app structure. The demo gives nice guidelines how to efficiently load the camera.

Even use only the selector i'm getting this warning and the camera is not showing. What did you do?

Same issue. It's not displaying any video for versions 3.0.0. nor 3.0.1. Luckily, 2.0.1. version works for me. Please notify when this bug gets fixed. Thanks!

Same here, not working and get the same issu with 3.0.1 and Angular 10

I've got this working via

html:

<zxing-scanner
          #webScanner
          *ngIf="scanning"
          [(device)]="currentDevice"
          (camerasFound)="onCamerasFound($event)"
          (scanSuccess)="webScanFoundItem($event)"
          [tryHarder]="true">        
        </zxing-scanner>

and in the ts code

  availableDevices: MediaDeviceInfo[];
  currentDevice: MediaDeviceInfo = null;

  onCamerasFound(devices: MediaDeviceInfo[]): void {
    this.availableDevices = devices;

    if (this.availableDevices && this.availableDevices.length > 0) {
      this.currentDevice = this.availableDevices[0];
    }
  }

Got the same issue. @coffeymatt Your workaround works indeed, thank you. The warning appears in the console nontheless.

This should be solved in the latest version. But, of course, if you do try to set a device during autostart it will still show this warning; for manually handling devices you should disable autostart with autostart="false" so the scanner doesn't try to boot up and ask for permissions, get media devices, auto start scanning for the first device available, etc.

If you set the autostart="false" how do you start once you have set the device? All I get is this warning:

Feature 'autostart' disabled. Permissions and devices recovery has to be run manually.

The permissions have been requested and accepted, what is devices recorvery?

I've got this working via

html:

<zxing-scanner
          #webScanner
          *ngIf="scanning"
          [(device)]="currentDevice"
          (camerasFound)="onCamerasFound($event)"
          (scanSuccess)="webScanFoundItem($event)"
          [tryHarder]="true">        
        </zxing-scanner>

and in the ts code

  availableDevices: MediaDeviceInfo[];
  currentDevice: MediaDeviceInfo = null;

  onCamerasFound(devices: MediaDeviceInfo[]): void {
    this.availableDevices = devices;

    if (this.availableDevices && this.availableDevices.length > 0) {
      this.currentDevice = this.availableDevices[0];
    }
  }

@coffeymatt which angular and ngx package version are you using?