livekit / client-sdk-js

LiveKit browser client SDK (javascript)
https://livekit.io
Apache License 2.0
368 stars 149 forks source link

Switch between Dynacast Video Qualities in Safari is not smooth and shows fade to white #1083

Closed ezBeanie closed 7 months ago

ezBeanie commented 7 months ago

Describe the bug

I am using the livekit-client for our video conferencing platform. The user has the ability to change the sidebar size, where each participants live video is living.

If i receive a livevideo inside Safari and the user changes the available space, the video is resized. We are using dynacast and for some reason, the switch between diffrent Dynacast resolutions is extremely noticeable with a fade to white or white background, depending on the resolution change. This error only occurs in Safari.

I expect this to be a Safari issue, not a livekit issue, but I wanted to bring awareness to this anyway. Maybe somebody knows a workaround or fix? Sadly, i have not found any help on Google, Stackoverflow or from any of the many AI Chatbots.

Reproduction

Display a videofeed with Dynacast from a livekit-room in the browser with the livekit-client and change the video elements dimensions via CSS using Safari.

I attatched a video that shows the described behavior.

https://github.com/livekit/client-sdk-js/assets/24874991/37c36de0-d7b9-4a0e-86b1-5afc00cb3c79

Logs

No response

System Info

macOS 14.2.1 (23C71)
Safari 17.2.1 (19617.1.17.11.12)
livekit-client ^1.11.3
Livekit Server 1.5.0

Severity

annoyance

Additional Information

No response

lukasIO commented 7 months ago

This sounds a lot like a CSS issue. I'd probably try to isolate the issue as much as possible and try different CSS sizing approaches to see if any of them works for Safari. Thanks for bringing it to our attention!