Update example to hot-switch between blur and virtual bg rather than tear down / recreate the media pipeline

[1egoman]

Update the in-built example to use updateTransformerOptions to switch the active transformer from blur background to virtual background (as it supports both modes) rather than fully tearing down and fully setting up the whole transformer in a new configuration with stopProcessor / setProcessor. By doing this, quite a bit of the flickering is eliminated on chrome, firefox, and safari (see videos below for some demos).

Note that this doesn't do anything about the initial setProcessor call, and a fair bit of visual artifacts still exist there. I think removing these is going to require digging deeper into the media processing pipeline, my suspicion is that the "stages" of that artifact line up with some async operations that the media pipeline is performing as part of its setup logic.

Associated with #85

Demo videos

Chrome:

chrome.mov

Firefox:

firefox.mov

Safari:

safari.mov

[changeset-bot]

⚠️ No Changeset found

Latest commit: 95b68fd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[lukasIO]

so much smoother like this!

we might want to think about exposing a combined BackgroundEffect that has dedicated APIs for both blur and virtual background. The updateOptions feels a bit unintuitive in the way it was initially implemented

[1egoman]

we might want to think about exposing a combined BackgroundEffect that has dedicated APIs for both blur and virtual background. The updateOptions feels a bit unintuitive in the way it was initially implemented

Yep, makes a ton of sense - the existing API isn't really designed for what I'm doing anymore, but I didn't want to make an external breaking change. As a follow up change, maybe I'll create a new combined external export to match the internal combined implementation and mark the old implementations as @deprecated / to be removed in the next major version?

[brokeboiflex]

The example is still autistic. Why is there BackgroundBlur and VirtualBackground if they behave exactly the same under the hood? Check out my code snippets at #25 (comment) my monkey patch makes the switching seamless