Issue when trying to access to webcam from an HTTP application hosted in a local crossbar

41 Views Asked by At

I have a local Crossbar server that hosts an Angular application and serves it at a URL that looks like this http://<ip_address>:8079

From this local application I would like to be able to get access to the webcam of the device from which I am running it to be able to scan a QR code.

In my angular application, as a QR code scanner, I'm using this component: https://www.npmjs.com/package/ngx-scanner-qrcode

in the HTML:

<ngx-scanner-qrcode #action="scanner">   
</ngx-scanner-qrcode>

in the typescript:

  @ViewChild('action') action: NgxScannerQrcodeComponent;
  ngAfterViewInit() {
    this.action.start()
}

The result is that the browser does not allow me to have access to the device's webcam, and I receive the follwing error: "undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia)"

I tested the same thing by hosting the angular application in a local IIS at http://localhost:8079 and It works fine.

I guess the issue is related to the HTTP protocol combined to an host different from localhost, for security reasons.

Is there a way to have the authorization to use the webcam also in the first case (local crossbar which hosts the angular application)? Or is it only possible in HTTPS and localhost?

0

There are 0 best solutions below