Feature/mv 44 ability to choose camera and mic

[kamil-stasiak]

Goals

• At most one permission prompt when someone opens the page.
• If possible start the last selected device.
• Single prompt for audio and video.
• If the algorithm can’t start the last selected device (corrupted data, disconnected device) it should start any device.
• Should work on:
  • Desktop: Safari, Chrome, Firefox
  • IOS: Safari, Chrome
  • Android: Chrome

Browser specifics

Firefox

Firefox can show a permission manager window where the user can select one particular device. This window should be displayed only if no previous device info is present. Otherwise, we should ask for a specific device (prompt without a select input).

Safari

Safari changes the device id for every session. Therefore, on Safari, I start the devices twice - once to fetch all the information, and once to select the device by its label.

Why everything is in one place?

My first attempt was to create specialized hooks for navigator.mediaDevices?.enumerateDevices() and navigator.mediaDevices.getUserMedia() but enumerateDevices() does not properly work without getUserMedia(). To achieve optimal results, I have to combine invocations of these two methods. Believe me or not this code is much more readable than my previous attempt where enumerating devices and starting a new one has its own specialized hooks. It’s easier to read and understand an even long algorithm than an algorithm that involves the coordination of many hooks.

After some time we should extract assets/src/features/devices/useUserMedia.tsx to browser-media-utils repository.

Testing suggestions

The last selected device are stored in local storage. To test new user behavior clean up your local storage and reset permission in your browser. You can also corrupt data in local storage (deviceId and label are important) to test situations where the last device is not present.

Known limitations

If a new device is connected after the page loads it won’t be visible in the devices list. (devicechange event is not handled https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/devicechange_event)

[kamil-stasiak]

1. Sometimes my bluetooth headphones are completely silent if I open videoroom (i.e. when I listen to spotify, opening VR silence but doe not stop te music) and it did not used to be that way. Can you explain why it is so? Should it be a separate issue? [It occurred only once so maybe it's neglectable].

🤔 I'll think about it.

2. Should the device id be visible? On chrome it is only on the video input device list.

I've created jira ticket for that. We have to discuss this topic.

3. For some reason the list is not responsive in terms of enabling or disabling the devices. When I plugged in a new camera, it had not appeared on the list. The same goes for disabling it (the unplugged audio device was still there even when I joined he room - I have no idea from where and what the app have been sending then).

It is not implemented. I've create jira ticket for that.

The popup item is not styled properly: a) title font is different and the font weight too small b) the list corners have been rounded too much c) The Cancel button should have red font d) I can't traverse the list with arrow keys when it is expanded e) cannot expand the list with enter (only with the spacebar)

I'll fix that. Fixed except point "e"

[pkrucz00]

Continuing layout problems:

1. The scroll on right does not look good. You can steal get inspired by the membrane.steam site where a similar problem occurs.

   

2. For some reason the audio is still audible when two microphones are muted. Are you sure muting the device did not change or still works properly?

3. A separate issue: User on safari does not see other users are muted

   

[kamil-stasiak]

The scroll on right does not look good. You can steal get inspired by the membrane.steam site where a similar problem occurs.

We will fix scrollbar later :)