livekit
Local user-facing video track is not mirrored when in fullscreen
Select which package(s) are affected
@livekit/components-react
Describe the bug
Expectation
When you enter full-screen mode, your local video track (of a front-facing cam) should appear the same (mirrored around the Y-Axis).
What happens
It is not mirrored in fullscreen mode.
Reproduction
To enter full-screen mode, you can for instance right-click on the ` element in FireFox and select Fullscreen.
Logs
No response
System Info
System:
OS: Linux 6.12 Manjaro Linux
CPU: (4) x64 Intel(R) Core(TM) i5-2410M CPU @ 2.30GHz
Memory: 1.62 GB / 7.64 GB
Container: Yes
Shell: 5.2.37 - /bin/bash
Binaries:
Node: 20.7.0 - /run/user/1000/fnm_multishells/346301_1733725351537/bin/node
npm: 10.1.0 - /run/user/1000/fnm_multishells/346301_1733725351537/bin/npm
pnpm: 9.12.1 - /run/user/1000/fnm_multishells/346301_1733725351537/bin/pnpm
bun: 1.1.38 - /usr/bin/bun
Browsers:
Chromium: 131.0.6778.108
npmPackages:
livekit-client: ^2.5.7 => 2.6.0
Severity
annoyance
Additional Information
I already tried applying the transform using a video:fullscreen selector, to no avail.
Then i fiddled around with https://css-tricks.com/almanac/pseudo-selectors/f/fullscreen/ and DevTools as well. In this example it's an ` that is being styled in fullscreen.
It appears that the transform simply does work in fullscreen mode (using the :fullscreen selector), while other CSS properties are applied fine in FullScreen mode. :thinking:
There is a workaround when programmatically entering fullscreen – by wrapping the element that the transform needs to be applied to and making that wrapper go into fullscreen:
https://stackoverflow.com/a/67858042/1246547
However, that won't work if the user right-clicks on the video-element makes that enter fullscreen mode.
This also relates to #548 as the transform for the local user-facing video track gets lost when entering PIP-mode in Chrome (in Firefox the transform is kept).