ngx-scanner

ngx-scanner copied to clipboard

Bug, feature request, or proposal:

I implement this coponent in a PWA and when I deploy app on a device who have more than 1 camera I don't know how to check what is the camera with scanner functions to use it by default. For exemple on this device, 1 and 2 camera don't scan qr code, but 3 and 4 yes. By default the 2 camera is used.

Is there a way to check what camera work on scanning qrcode and choose it and set by default on a params ?

I am facing the same issue. The problem is not the software per se, it's that each phone can have many cameras. Some cameras actually work better on close range, while others work better on longer ranges.

What I do is that I let the user choose which camera to use as default, by saving the reference to the camera in the localstorage on the browser.

Then, on startup, just set that camera based on the user choice.

On my component which uses the scanner, I have a small button letting the user change cameras and also set which cameras should be default.

Hope this helps.

How do you set the camera? I find the camera in the cameras array, based on the value stored in localstorage. But when I set the device to that camera, nothing happens. When the user changes the cameras, it's working.

@yaffa77 I have only done the "user sets camera" part, will get back to you :)

@yaffa77 So I tried it as well an like you, cannot make it work by setting the camera without user interaction.

I save the cameraID to the localhost, then next time the camera starts, fetch the camera that matches the cameraID, then set that. But it doesn't work. Weird.

I facing same issue I've try to async function is active, but always start from default camera then change to setting camera it's not probaly

`onDeviceChange(camera:MediaDeviceInfo){ if(!camera) return console.log("TEST:onDeviceChange/camera is empty") if(camera && camera.deviceId==this.currentCamera.deviceId) return console.log("TEST:onDeviceChange/samecamera\n",{camera}) console.log("TEST:onDeviceChange\n",{camera,currentCamera:this.currentCamera}); const backup=this.currentCamera; this.currentCamera=null; setTimeout(()=>{ this.currentCamera=backup; },1)

}`

html ` <zxing-scanner [torch]="flash" [formats]="allowFormats" [device]="currentCamera" (deviceChange)="onDeviceChange($event)" (scanSuccess)="scanDone($event)" (camerasFound)="updateCamera($event)" (torchCompatible)="checkTorch($event)" [autofocusEnabled]="true" [draggable]="true"

`

I ended up using the native browser API for scanning and it works very well. The only issue is that iOS doesn't support it but for my use that that is not a problem.

Annoying when Apple does what it can to stop web from improving, just to keep their walled garden and profits.

@spock123 Thanks for the feedback. It does seem that this is a bug then. Luckily my users can also live without it.

@yaffa77 I used this: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API

Works well, does both QR and barcodes. But only Edge/Chrome for the moment, afaik

Same issue here and same what i am using. But if you use 1sec or more timing with setTimeout() it will change. But not a beauty using... This is a bug of component it doesn't use the [device] input how i see.

I facing same issue I've try to async function is active, but always start from default camera then change to setting camera it's not probaly

`onDeviceChange(camera:MediaDeviceInfo){ if(!camera) return console.log("TEST:onDeviceChange/camera is empty") if(camera && camera.deviceId==this.currentCamera.deviceId) return console.log("TEST:onDeviceChange/samecamera\n",{camera}) console.log("TEST:onDeviceChange\n",{camera,currentCamera:this.currentCamera}); const backup=this.currentCamera; this.currentCamera=null; setTimeout(()=>{ this.currentCamera=backup; },1)

}`

html ` <zxing-scanner [torch]="flash" [formats]="allowFormats" [device]="currentCamera" (deviceChange)="onDeviceChange($event)" (scanSuccess)="scanDone($event)" (camerasFound)="updateCamera($event)" (torchCompatible)="checkTorch($event)" [autofocusEnabled]="true" [draggable]="true"

`

Any updates with this issue? Thanks

@FrancoFasano Did you solve it? In our case the default camera is not always the best solution.

Any updates with this issue? Thanks

@FrancoFasano Did you solve it? In our case the default camera is not always the best solution.

My decision was to let user chose the camera

Any updates with this issue? Thanks @FrancoFasano Did you solve it? In our case the default camera is not always the best solution.

My decision was to let user chose the camera

There are usecases when not a good options to let the user always select (and they want to do it always). It would be better if the user select once and after the system use it as default. It's not working, how i see no new version... :(