Multiple permission prompts in Firefox

[damianfrizzi]

Problem

We support devices with multiple rear cameras. In order to pick the right rear camera we need to figure out which is the "nearest" one. One workaround to get the right camera is to check the label of all devices for the keyword "back". Accessing the label in Firefox is only possible though if there is an active stream or the user has granted persistent permission for media device access (MDN).
Therefore what we are doing right now is to listen to onUserMedia (which fires if the user granted permission), find the nearest rear camera (if necessary) and update the constraints. Updating the constraints will always lead to a new call to getUserMedia and therefore to a new permission prompt in Firefox.

Reproduction

I created a codepen to reproduce the problem.
In order to see the multiple permission prompts one has to access it with Firefox on a device with more than 2 results for navigator.mediaDevices.enumerateDevices().
I tested it with a Samsung S9.

Suggestions how to fix

The library could expose the stream so that a consumer could use applyConstraints. Another possibility would be to allow passing an existing stream to the library.

Related issues

#250

[mozmorris]

@damianfrizzi thanks for the detailed post. The onUserMedia prop callback is passed the active stream. Would that work for you?

[damianfrizzi]

@mozmorris thanks for the quick response. I could indeed solve it within the onUserMedia callback by using applyConstraints. I think though that it generates some unnecessary overhead in user land code and could be solved nicely in the library. If I understood it correctly, Firefox will only show a new permission prompt if userFacing changes. Therefore one could add an additional check in the library to use applyConstraints on the existing stream in case userFacing didn't change.

What do you think?

[mozmorris]

Sounds like a good approach to me. PRs welcome :-)