Make possible to select input media devices during calls

[danxuliu]

Requires #4028

Follow up to #3913
Fixes #358

When an input device is changed during a call the old audio or video track is stopped, a new one is requested, and then the old track is replaced by the new one in the RTCPeerConnection. (Surprisingly) In most cases just replacing the track causes the new track to be used (and if the new track is null then the sent media is simply stopped), nothing else is needed. If the new track is not compatible with the old one (for example, if the video uses a different orientation) a renegotiation is needed. Proper renegotiation is not currently supported by the web UI nor the mobile applications, so in this case a reconnection is forced.

Renegotiation is also needed if the call is started without audio or video and then an audio or video input device is selected. In this case there will be no previous track to replace, and adding a new track needs a renegotiation.

The devices are changed during calls in the Preview tab, just like done before calls. The tab is expected to be moved to a settings dialog, but that will be done in another pull request.

The main trouble when changing devices during a call is that Firefox does not support more than a single device of each kind (audio or video) active at the same time. Therefore, when switching to another device all the active tracks of that kind must be stopped before requesting another track from a different device (otherwise a track from the currently active device will be returned, instead of a track from the requested device). Moreover, when an audio and video track are requested at the same time (like done when a call is started) in order to then request an audio or video track from a different device all the audio and video tracks must be stopped first (and not just the tracks from the kind being requested).

Adding some more fun, MediaStreamTrack.stop() does not fire an ended event (if the track is stopped for any other reason then it does), and even if it did adding a listener to MediaStreamTrack or MediaStream does not work in Firefox (although it does in Chromium).

Pending:

• Fix forcing a reconnection for guests when the HPB is used, which is needed to handle renegotiation (needed for example if the call is started with a device disabled and then the device is enabled, or if changing to a device with different properties, like a camera in a different orientation) - Fixed in Fix forced reconnections for guests when the HPB is used #4028
• Fix checking the kind of a sender with a null track - Still needs to be handled in browsers without support for transceivers, but even in that case trying to replace a track of the wrong kind should not break anything, just fail.
• Fix streams kept open when leaving a call while the preview was being shown - This is caused by the active tab not being always updated; it needs to be fixed in the Vue components, but it will not be an issue anymore after moving the preview to the settings dialog

To be addressed if needed in follow up pull requests:

• Handle changing the device in Firefox - Currently it works if audio or video are requested, but not if both audio and video are requested at the same time (like done when starting a call). Due to this, after starting a call currently you must disable both audio and video, and then you will be able to change the audio and video devices as expected (even if you then enable both audio and video, as they will be requested independently one of each other).
• Fix forcing a reconnection when the HPB is not used
• Renegotiation using a forced reconnection should also work while establishing a connection, and not only once the connection is fully established.
• Ensure that the video quality throttler, the connection quality warning and the speaking while muted warning still work as expected when tracks are changed
• Prevent changing devices during calls in browsers that do not support it
• Show a notification to the user when reconnecting due to a device change
• Use different icons when audio and video is disabled, when no device is available, and when no device is selected? Show the device preview if clicking on enable audio or video if no device is selected?
• Reuse active tracks when showing the preview? When a fake stream is requested it always starts from its initial colour, so the preview and the video in the call do not match. Could something similar happen with real cameras (one of the streams shown with "lag" respect to the other)?

[nickvergessen]

One thing I noticed, when selecting "No device" and then selecting a camera again, the video in the call is still "off"

[danxuliu]

One thing I noticed, when selecting "No device" and then selecting a camera again, the video in the call is still "off"

I was not sure if the audio or video should be automatically enabled after selecting again a device or not. In the end I kept it disabled because that gives the user time to check in the preview if the device (specially the camera) is the desired one instead of immediately enabling it and sending it to the other participants.

[nickvergessen]

Rebasing after #4032