Ngx-scanner: Avoid setting a device during auto-start.

Created on 20 Aug 2020  路  9Comments  路  Source: zxing-js/ngx-scanner

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.

bug

Most helpful comment

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];
    }
  }

All 9 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lobnazakaria93 picture lobnazakaria93  路  4Comments

mattiaskagstrom picture mattiaskagstrom  路  8Comments

odahcam picture odahcam  路  3Comments

odahcam picture odahcam  路  5Comments

ilellouch picture ilellouch  路  4Comments