vue-qrcode-reader icon indicating copy to clipboard operation
vue-qrcode-reader copied to clipboard

Camera selection

Open AuspeXeu opened this issue 2 years ago • 20 comments

If someone has multiple rear cameras, how would the user select which one he wants to use?

AuspeXeu avatar Oct 19 '21 17:10 AuspeXeu

Ideally users don‘t have to make that decision and we can always pick an appropriate rear camera by default. If you have a device where this is not the case please elaborate.

gruhn avatar Oct 19 '21 21:10 gruhn

I have a Microsoft Surface Pro with a front and a rear camera. By default, the rear camera that is selected is the virtual camera of OBS Studio which I also have installed on my device. Unfortunately, there is no way to select a different rear camera. However, I have seen other websites to give the option to choose which camera to provide access to so it must be maybe an option that is passed to the browser when asking for camera permissions?

AuspeXeu avatar Oct 20 '21 06:10 AuspeXeu

As an example: this is how I get prompted by firefox when I join a zoom call.

image

AuspeXeu avatar Oct 22 '21 14:10 AuspeXeu

Yes this is technically possible. You can get a list of installed cameras with MediaDevices.enumerateDevices() with IDs and then pass one of them via the deviceId constraint to getUserMedia().

As I said, I would prefer a solution though that does not require the user to pick the camera manually.

Actually, this sounds like a duplicate of #253. Is your camera also called "OBS Virtual Camera" (check here) ? In this case we just blacklist this specific camera.

gruhn avatar Oct 24 '21 19:10 gruhn

You're indeed right. This virual camera is my issue.

AuspeXeu avatar Oct 25 '21 05:10 AuspeXeu

Ok, I already blacklisted it. Can you check the demo page if it’s working?

gruhn avatar Oct 25 '21 08:10 gruhn

On your demo page I get the selector now .... I am on the latest firefox and a MS surface pro

image

AuspeXeu avatar Oct 25 '21 08:10 AuspeXeu

Sorry I mean the other demo page

https://gruhn.github.io/vue-qrcode-reader

gruhn avatar Oct 25 '21 08:10 gruhn

image

AuspeXeu avatar Oct 25 '21 14:10 AuspeXeu

So your camera is not called "OBS Virtual Camera" but "OBS-Camera" ? Please go to this page: https://gruhn.github.io/select-camera-demo/index.html# and give me the exact string

gruhn avatar Oct 25 '21 14:10 gruhn

cameras:

    Microsoft Camera Front
    Microsoft Camera Rear
    OBS-Camera [PREFERRED]

AuspeXeu avatar Oct 25 '21 16:10 AuspeXeu

While I get your point with automatically selecting the right camera, I don't think this is totally practical. I just realised that on my Pixel 4, the following strings appear:

cameras:

    Facing front:1
    Facing back:0 [PREFERRED]
    Facing front:2 (infrared)

When I toggle between front and rear using your package, I can only switch between normal front and the infrared one not the rear one. This seems odd?

AuspeXeu avatar Oct 26 '21 07:10 AuspeXeu

I still think it would be useful to give the user the option to choose a preferred camera.

AuspeXeu avatar Oct 26 '21 07:10 AuspeXeu

It definitely would be the easiest solution. But those camera labels are cryptic and the user won't understand why he has to make that decision. Especially because this is not necessary in native apps. Of course it's not a big problem but it makes the web platform slightly less competitive.

I see one solution around this at the moment. Waiting for developers like you to report issues; Collect data on "bad cameras"; and try to recognize patterns or outright backlist them. I know this is really going hard way for a small problem. But if there would be an option to let the user select the preferred camera, developers would just use that. We would loose the ability to crowd-source the data for a better solution.

gruhn avatar Oct 26 '21 10:10 gruhn

I guess camera strings that include infrared should also be filtered out automatically, in that case.

AuspeXeu avatar Oct 26 '21 11:10 AuspeXeu

yes, that's a good idea

gruhn avatar Oct 26 '21 16:10 gruhn

Would maybe make sense to make your camera label filter case insensitive, no?

AuspeXeu avatar Oct 26 '21 16:10 AuspeXeu

Probably. I'd like to see an actual use case being before adjusting this.

So does this fix our issues so far?

gruhn avatar Oct 27 '21 14:10 gruhn

Well, for me I still get prompted with the OBS camera on the latest version. image

AuspeXeu avatar Oct 27 '21 15:10 AuspeXeu

@gruhn What about handle camera as a id in the default case (if the id matches some of available media devices) ?

I mean here: https://github.com/gruhn/vue-qrcode-reader/blob/master/src/misc/camera.js#L55

return devices.find(d => d.deviceId === camera) ? { deviceId: { exact: frontCamera.deviceId } } : undefined

robertsLando avatar Nov 11 '21 07:11 robertsLando

I gave in. Passing a deviceId is now possible via the constraints prop.

gruhn avatar Jul 11 '23 23:07 gruhn