Camera selection

[AuspeXeu]

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

[gruhn]

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.

[AuspeXeu]

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]

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

[gruhn]

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.

[AuspeXeu]

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

[gruhn]

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

[AuspeXeu]

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

[gruhn]

Sorry I mean the other demo page

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

[AuspeXeu]

[gruhn]

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

[AuspeXeu]

cameras:

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

[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]

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

[gruhn]

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.

[AuspeXeu]

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

[gruhn]

yes, that's a good idea

[AuspeXeu]

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

[gruhn]

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

So does this fix our issues so far?

[AuspeXeu]

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

[robertsLando]

@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

[gruhn]

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