Add background blur feature for supported devices

[toger5]

Fixes #121

This adds background blur via @livekit/track-processors for supported browsers.
The option can be found in the video tab of the settings.

The fallback will be a greyed out checkbox (on firefox for instance)
This way firefox users get informed why it does not work on their side if other users tell them where to set it up.

Sadly this is not exactly done the way we would want to set it up see: livekit/track-processors-js#50

• bundle local assets not CDN
• stringify related hang on startup

[toger5]

how do we deal with lk modules that dont fullfill the ts lints?

[toger5]

how do we deal with lk modules that dont fullfill the ts lints?

I found what we needed:
@types/dom-mediacapture-transform

[hughns]

I've suggested some cleanup. Furthermore I think you could deduplicate some of the code into something like a useBlur() or canBlur(). This might make adding tests easier too.

[toger5]

Furthermore I think you could deduplicate some of the code into something like a useBlur() or canBlur(). This might make adding tests easier too.

I think @robintown has an idea how we might be able to reuse the track from the lobby to the in call view. Than this might come for free.

But in this pr we should at least get rid of the duplicated let blur = useMemo sections

[hughns]

Marking as draft whilst we fix these:

hook.js:608 error when trying to pipe IndexSizeError: Failed to construct 'ImageData': The source width is zero or not a number.
at Vz (index.mjs:291:1)
at MZe.drawVirtualBackground (index.mjs:230:14)
at MZe.transform (index.mjs:205:21)
at Object.transform (index.mjs:117:39)

It was also showing a green colour instead of blurring at one point. I'm not able to reliably reproduce that.

[hughns]

Also this:

[toger5]

I also was not yet able to fix the following issues:

• configure to not use blur -> press on a recent call from the list. -> turn on the blur it does not activate blur for me error when trying to pipe IndexSizeError: Failed to construct 'ImageData': The source width is zero or not a number.
• unrelated but I now remember that I looked into this as well: start a call -> wait for the video in the lobby -> open settings observe that the video feed turns black for a couple of seconds.

See: https://matrix.to/#/!dXHEZfLxIQzAELxzQd:matrix.org/$i8KmqSqyJN4s65D8oXTjcSLTVgFo2uB30HWVlWAVk_Q?via=matrix.org&via=element.io&via=robin.town
and: https://matrix.to/#/!dXHEZfLxIQzAELxzQd:matrix.org/$ad9iclLVvo8doof3p8iFQBkL43koY-YxbV4PcCWUQfo?via=matrix.org&via=element.io&via=robin.town
for demo videos about those issues.