https://livekit.io logo
Join Slack
Powered by
I'm using the LiveKit process to implement backgro...
# ask-ai
p
I'm using the LiveKit process to implement background blur, but it is not smooth at the edges and reveals what is behind. Is there a solution to optimize it?
t
Thanks for reaching out, Yassine. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Hey there! To get the best background blur in LiveKit with smoother edges and a nicer look, here are some friendly tips you can try out: • Adjust Blur Radius: Try increasing the blur radius to make things look smoother. For example, in JavaScript/TypeScript, you could do 
const blur = BackgroundBlur(10);
, or on Android, try 
processor.updateBlurRadius(16f);
. • Downscale Factor: You might want to reduce the video resolution before blurring by tweaking the 
downscaleFactor
. A smaller factor keeps more detail but could use more resources. • Smooth Edge Detection: To get a nice, natural blend between blurred and clear areas, adjust the edge detection in your shader. For example, in 
compositeShader.ts
, bump up the edge softness like this: 
const edgeSoftness = 2.0;
. • High-Quality Segmentation: For better accuracy, turn on high-quality segmentation by initializing the background blur processor with `highQuality`: 
const processor = new BackgroundTransformer({ highQuality: true });
. Just a heads-up—bumping up the blur radius or quality might affect performance a bit, so it’s a good idea to test these tweaks on your devices to find what works best for you.
p
I'm using nextjs , and i'm using. BackgroundBlur(10) and still have the issue
t
To get the best out of 
BackgroundBlur
in your Next.js app, here are some friendly tips you can try: • Make Sure It’s Set Up Right: Use the 
BackgroundBlur
processor from 
@livekit/track-processors
and apply it to your video track. Here’s a quick example:
Copy code
import { BackgroundBlur } from '@livekit/track-processors';
import { useLocalParticipant } from '@livekit/components-react';

function Stage() {
  const localParticipant = useLocalParticipant();
  const cameraTrack = localParticipant?.localParticipant?.getTrackPublication(Track.Source.Camera)?.track;
  const [blurEnabled, setBlurEnabled] = React.useState(false);

  React.useEffect(() => {
    const blur = new BackgroundBlur();

    if (cameraTrack) {
      if (blurEnabled && !cameraTrack.getProcessor()) {
        cameraTrack.setProcessor(blur);
      } else if (!blurEnabled) {
        cameraTrack.stopProcessor();
      }
    }
  }, [blurEnabled, cameraTrack]);

  return (
    
  );
}
• Keep an Eye on CPU Usage: If the CPU gets a bit overwhelmed, you can detect that and adjust the video quality on the fly. Here’s how:
Copy code
const handleCpuConstrained = async (track) => {
  console.warn('CPU constrained');
  track.stopProcessor();
  track.prioritizePerformance();
};

room.localParticipant.on(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
• Tweak Video Quality: Lower the resolution and frame rate when needed to keep things running smoothly. • Go for High-Quality Segmentation: For sharper results, initialize the processor with the 
highQuality
option. • Make It Responsive: Use components like 
GridLayout
to make sure your app looks great on all screen sizes. Trying these out should help your background blur run better and look nicer in your Next.js app. If you want to chat more or need a hand, just let me know!
p
Where i use hightquality option?
t
If you want to use the 
highQuality
option in 
BackgroundBlur
, you can easily turn it on when you set things up. Here’s a quick example: • In Swift: Just create your 
BackgroundBlurVideoProcessor
like this, setting 
highQuality
to `true`:
Copy code
let backgroundBlur = BackgroundBlurVideoProcessor(highQuality: true)
This will give you better, more detailed segmentation, though it might slow things down a bit. For JavaScript, the 
highQuality
option isn’t available directly, but if you want, I’m here to help you explore other ways to get similar results!
p
Example with nextjs
Or there is a way to impliment external lib not the track-processors
t
Hey there! Are you looking for some recommendations on external libraries to add background blur in Next.js, or do you already have a library in mind? If you do, feel free to share a bit more about it so I can help you out better.
p
Media google pipe or you can give me recommandations
t
I don't have the answer you're looking for. You could also try asking your question: • in one of the other Slack channels or • to https://deepwiki.com/livekit/livekit_composite which is trained on all LiveKit source code If you find the answer, please post it here to help others!
Open in Slack
PreviousNext
Powered by