Replace blur with average color in video backgrounds #4985
Conversation
danxuliu
added
2. developing
bug
feature: frontend 🖌️
|
/backport to stable20.1 |
|
/backport to stable20 |
Safari suffers the same performance hit as Chromium when using the blur filter. However, Safari does not support using the blur filter on canvases, so the same workaround used for Chromium does not work in Safari. To solve this, and to still use a background with colors related to the avatar, the average of the colors in the avatar is used. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Before the average color for video backgrounds was locally stored in each VideoBackground instance. During a call different VideoBackground instances can be mounted and destroyed for the same participant (for example, when switching between speaker mode and grid view, or when a promoted speaker changes), so the previously calculated value was lost and the average color had to be recalculated every time that happened. Now the average colors are globally cached and shared between VideoBackground instances, so previously calculated values can be used by new VideoBackground instances. The global cache is cleared each time a call ends. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
For simplicity, as discussed, instead of using a workaround to still show blurred backgrounds in Chromium despite its performance bug in some systems now the average color is used instead. Moreover, as the CSS blur filter only works reliably in Firefox any other browser (which now also includes Chromium-based browsers, like the new Edge) uses the average color for the backgrounds. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
danxuliu
force-pushed
the
replace-blur-with-average-color-in-video-backgrounds
branch
from
4a5b8cd to
1bc9656
Compare
There was a problem hiding this comment.
Tested and works. Also looks nice, good call @nickvergessen :)
We don't care about that one. |
|
Safari: |
But this is in master too, right? Or is it caused by this pull request? |
|
Yeah master too, caused by the links in descriptions added with a nextcloud/vue update |
|
let me comment out the regex in the 3rdparty temporarily, then it loads on safari. |
|
|
Seems to work, but now I wonder if we should just always use that to be on the same design in all browsers/OS and to simplify our code. |
There was a problem hiding this comment.
Wait, there should be a div that tarkens the background and creates sort of a vignetting effect. I don't see it in @nickvergessen screenshots
Do you know what happened to it @danxuliu ?
That’s a bummer, but yeah if it’s a performance hit then that’s a priority. |
For consistency between browsers now the average color is shown in all cases, even if CSS blur filters work fine in Firefox. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The darkener was shown behind the background, so the background was not darkened. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The darkner div was behind the background, so it had no effect. Apparently it has been like that for nine months already 🤷 I have moved it in front and now it works again.
Done. |
|
Tested with:
|
nickvergessen
deleted the
replace-blur-with-average-color-in-video-backgrounds
branch
Follow up to #4678
Closes #4827
Closes #4887
Safari suffers the same performance hit as Chromium when using the blur filter. However, Safari does not support using the blur filter on canvases, so the same workaround used for Chromium does not work in Safari. To solve this, and to still use a background with colors related to the avatar, the average of the colors in the avatar is used.
For simplicity, as discussed, instead of using a workaround to still show blurred backgrounds in Chromium despite its performance bug in some systems now the average color is used instead.
Moreover, as the CSS blur filter only works reliably in Firefox any other browser (which now also includes Chromium-based browsers, like the new Edge) uses the average color for the backgrounds.
Pending:
Test with Edge before being based in Chromium