Smart layout (et al) presumes screen sharing will always use 100%
width of the media area. That causes cameras to always be positioned on
top, which is not always the optimal position depending on the viewport
and stream aspect ratio/resolution - so space is wasted.
This commit uses the actual screen sharing video size as provided by
HTMLVideo's videoWidth/videoHeight properties. The calculation uses the
same logic as the one used for presentation/slides, which should make it
a bit familiar.
There's also a handler for HTMLVideo's `resize` event for those browsers
that support it - which enables handling of variable-sized screen
sharing streams. That handler is debounced at 500 ms to prevent
excessive CPU use.
Extra testing is needed with the widest range possible of
browsers/environments and feature combinations.
Screen streams were only deemed unhealthy when the transport's ICE state
transitioned to failed. That was as good as nothing because the stream would
stay frozen with no visual UI feedback until it reconnected. Bad UX.
This commit addresses that issue via two changes:
- A stream is deemed *potentially* unhealthy now if the transport's
state becomes disconnected
- If a stream is deemed potentially unhealthy, a monitor probe is
started to check whether there is media/packet flow (every 500ms).
If there's no packet flow, the stream is flagged is factually unhealthy and
UI feedback about that is rendered.
It's still not as good as it could be - relying on disconnected still
leaves a couple of seconds of silence to be dealt with. For that to be
addressed the prober would have to run nonstop, but that's for later.
I have growing concerns about gain node`s effect on audio quality the way it
was implemented, so I opted to fall back to HTMLMediaElement`s volume control
for the time being until we can gauge quality impacts properly later on
Add a new configuration flag enableVolumeControl, false by default while the
feature undergoes a field trial
Splits screenshare stream into video and audio and adds gain node to audio
stream in order to permit volume control by the user. Volume is normalized
between [0, 2](muted and 2x boost).
isFullscreen is a state property and is being fetched from the component
props. I think this is something I messed up while resolving a cherry-pick
conflict.
Change the previous loading spinner to the new loading dots, ensuring
a bit more UI consistency.
Add the "unhealthy stream" filter to make the dots a little more visible and
remove the loading spinner.
Add the shrink/expand button in the screenshare layout to reduce the mirror/tunnel
effect, when the presenter is sharing the same screen as the application is.
