Error when asking for permission. DOMException: Could not start video source

Hi,

I’m trying to use your component, however after updating to version 3.0.0 with Angular 9 and Ionic 5 being used in a PWA Site, I have the above mentioned error.

This error occurs only on the mobile (I’m using Android 8.0 with Chrome 84) but when I first invoke another page (of any other site) that uses the camera. So the error occurs. If however I invoke my page without any other page being invoked before, the component works.

In my page:

<zxing-scanner #scanner 
          start="true" 
          [autofocusEnabled]="true"
          [enable]="true"
          [device]="currentDevice"
          scannerEnabled="true"
          torch="on"
          [tryHarder]="true"
          (scanSuccess)="handleQrCodeResult($event)"
          [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']">
        </zxing-scanner>

Code behind:

import { Component, OnInit, ViewChild } from '@angular/core';

import { ZXingScannerComponent } from '@zxing/ngx-scanner';
import { Result } from '@zxing/library';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-zxing-test',
  templateUrl: './zxing-test.page.html',
  styleUrls: ['./zxing-test.page.scss'],
})
export class ZxingTestPage implements OnInit {

  @ViewChild('scanner', {static: true}) scanner: ZXingScannerComponent;

  hasDevices: boolean;
  hasPermission: boolean;
  qrResult: Result;
  availableDevices: MediaDeviceInfo[];
  currentDevice: MediaDeviceInfo = null;

  constructor(
    private modalCtrl: ModalController
  ) { }

  ngOnInit(): void {

    this.scannerInit();
  }

  scannerInit() {

     this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
       this.hasDevices = true;
       this.availableDevices = devices;
       this.currentDevice = null;

      // this.compareWith = this.compareWithFn;
       this.onDeviceSelectChange(devices[devices.length - 1].deviceId);
     });

     this.scanner.camerasNotFound.subscribe(() => this.hasDevices = false);
     this.scanner.scanComplete.subscribe((result: Result) => this.qrResult = result);
     this.scanner.permissionResponse.subscribe((perm: boolean) => this.hasPermission = perm);
   }

   displayCameras(cameras: MediaDeviceInfo[]) {
    this.availableDevices = cameras;
  }

  handleQrCodeResult(resultString: string) {

    this.modalCtrl.dismiss({ valor: resultString });
  }

  onDeviceSelectChange(selected: string) {

  for (const device of this.availableDevices) {
      if (device.deviceId === selected) {
        this.currentDevice = device;
      }
    }
  }

  closeModal() {
    this.modalCtrl.dismiss({ valor: '' });
  }
}

The error occurs on getAnyVideoDevice() method of zxing-ngx-scanner.js:

    askForPermission() {
        return __awaiter(this, void 0, void 0, function* () {
            if (!this.hasNavigator) {
                console.error('@zxing/ngx-scanner', 'Can\'t ask permission, navigator is not present.');
                this.setPermission(null);
                return this.hasPermission;
            }
            if (!this.isMediaDevicesSuported) {
                console.error('@zxing/ngx-scanner', 'Can\'t get user media, this is not supported.');
                this.setPermission(null);
                return this.hasPermission;
            }
            let stream;
            let permission;
            try {
                // Will try to ask for permission
                stream = yield this.getAnyVideoDevice();
                permission = !!stream;
            }
            catch (err) {
                return this.handlePermissionException(err);
            }
            finally {
                this.terminateStream(stream);
            }
            this.setPermission(permission);
            // Returns the permission
            return permission;
        });
    }
    /**
     *
     */
    getAnyVideoDevice() {
        return navigator.mediaDevices.getUserMedia({ video: true });
    }

Devtools view:

Thanks in advance.

[ANTONIOFC]

Ok. Thnak you for the explanation.

[odahcam]

This error occurs only on the mobile (I’m using Android 8.0 with Chrome 84) but when I first invoke another page (of any other site) that uses the camera. So the error occurs. If however I invoke my page without any other page being invoked before, the component works.

Chrome only allows one page at a time to access media device’s stream, this is not this libraries fault, but a browser security behavior without a specific catchable error. Some versions of Chrome have better device handling others are worse, there’s nothing much we can do here other than somehow pass this error to who is using the component. Unfortunately the scanner won’t work when another page is using the camera in some browsers.