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?