Background blur and Virtual Background in v3.1

Issues developing apps
1

Hello!

Just upgraded to v3.1 (from v2.8) and it feels very good! Love the use of livekit and the simplicity it introduces to our code (can delete many lines of code, yey). Well done!

The one thing that remains for us is the background blur. We haven’t found any v3 specific docs for this and had a look at what @livekit/track-processors had to offer but for some reason we’re not really getting that to work in our project.

We wanted to have a look at how this is handled in the openvidu-call app but we assume that the angular-component library isn’t open source (we could not find a public repo) and so we could not find any leads to how you handle this in v3.

We would very much appreciate a reference to some sample code of how we can get Blur to work.

Many thanks for a great product,

// A pro subscriber :slight_smile:

1 Like
2

Hello!

Thanks for your kind words. Virtual Background is applied with the LocalTrack.setProcessor method. It is necessary to install the NPM library @livekit/track-processors, as you mentioned.

Here it is a quick code snippet on how to do it: How to develop your OpenVidu app - openVidu.

What kind of problem are you having when using this method?

Best regards.

3

Thank Pablo!

We’ve done that precisely, but when we call “setProcessor” we get;

vision_wasm_internal.js:10 Graph successfully started running.
main.js:1 There was an error connecting to the room: Super constructor null of Ol is not a constructor

Guessing there is a problem with how the @livekit/track-processors module is bundled into our build.

Let me know if you can think of anything or if you’ve seen this error before.

Thank you!

4

Hi @richard_appsari

OpenVidu Angular Components is an open‑source library; however, it does not have its own repository. You can refer to the virtual background service for guidance on how the blur background is implemented—it might be just what you need.

5

If you can provide a sample project in a GitHub’s public repository with a similar setup (including your bundling setup), we can take a look to it.

6

Thanks for the example!

I spent some time on it now I had to upgrade to Angular 17 in order for it to function properly. We’ve been stuck on v16 due to Matierial migration issues. Guess it’s time to sort that out.

1 Like