Ngx-scanner: Cameras selection doesn't work on Firefox

[matteomason]

Bug, feature request, or proposal:

Bug

What is the current behavior?

On Firefox, after having found all the available cameras, the select box that let the user choose which device to use, doesn't show up.

This issue still persist if I force the selection of the first available camera found.

Chrome, on the other hand, works great!

What are the steps to reproduce?

You can reproduce the issue opening this link with Firefox

Which versions of Angular, ngx-scanner, OS, TypeScript, browsers are affected?

Angular version: 5.2.9
ngx-scanner: 1.1.0-dev.c32019
Browser: Firefox Quantum 59.0.3 (64 bit)

[odahcam]

Did the browser asked you for camera permissions?

[matteomason]

Yes

[odahcam]

I've upgraded the scanner version in the StackBlitz demo, could you try again?

[werthdavid]

Getting this with StackBlitz Example in FF@latest:
TypeError: 'toJSON' called on an object that does not implement interface MediaDeviceInfo.

[werthdavid]

It works with the Github-Demo

[matteomason]

@werthdavid Yep, in the Github-Demo works!

On StackBlitz the issue persist. While doing some testing on my local machine, I discovered that if I force the selection of a camera doing

this.scanner.changeDevice(devices[0]);
this.selectedDevice = devices[0];

and I place a QRCode in front of the camera, ZXing actually read the qrcode but on the sceen I can't see anything except the "Waiting for permissions.If your device does not has cameras, no permissions will be asked. "

[odahcam]

I think this should probably be here: https://github.com/zxing-js/ngx-scanner/blob/1218a60af2a636769f81b524a01f86ccdfe36a65/src/app/modules/zxing-scanner/zxing-scanner.component.ts#L214-L244

Maybe on line 222. 🤔

[matteomason]

Sorry, I can't understand... What are you suggesting?

And what are the differences between the Github-Demo and the StackBlitz example? I can confirm that the Github-Demo works great!

[odahcam]

I think that the GitHub demo is running the latest stable version, while the StackBlitz is running the latest dev version.

About the code-block, I'm just annotating here to me or anyone investigate later.

The dev version is working fine within my devices so I though it was ok.

[odahcam]

It works fine in local development.
I will consider this a StackBlitz issue until we found some other reason.

Me or @werthdavid will gladly reopen this issue if someone finds the bug reason.

Thanks.

[odahcam]

Oh, also I debbuged in StackBlitz with FF Nightly and I couldn't find anything wrong with the component at the first look.

[matteomason]

Hi again.

I'm just writing a little note here. Maybe in this way other people that find themself stucked with a issue like mine, can find a little help.

After a lot of testing, I discoverd the ngx-scanner works really great in most of cases but not in mine. I'm using VMWare Clarity as a HTML/CSS framework and for some reason, the component find the devices in my pc/smarphone, but it never shows up the selectbox with the device selection.

I realy couldn't understand what whas the problem util yesterday when, inspired from a stackoverflow question, I tried to import in the component
{ChangeDetectorRef} from '@angular/core';.

This component has a fuctions called detectChanges(); witch I have to call every time an event occures (for example every time that the browser finds new devices:

displayCameras(cameras: MediaDeviceInfo[]) { console.debug('Devices: ', cameras); this.availableDevices = cameras; this.ref.detectChanges(); }

Or every time the users changes the device
onDeviceSelectChange(selectedValue: string) { console.debug('Selection changed: ', selectedValue); this.selectedDevice = this.scanner.getDeviceById(selectedValue); this.ref.detectChanges(); }

In this way, everything works great!

[odahcam]

Thx for the feedback @matteomason sure it will help someone. We are constantly improving the scanner se we can work great in every piece of the JS ecosystem.

[abu123raihan]

Working on my local but not in domain

[odahcam]

Sorry @abu123raihan I did not understand, feel free to open a new issue if you need.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.