# Virtual Background (/en/realtime-media/rtc/build/apply-video-effects/virtual-background/javascript)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Virtual Background enables users to blur their background, or replace it with a solid color or an image. This feature is applicable to use-cases such as online conferences, online classes, and live streaming. It helps protect personal privacy and reduces audience distraction.

      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
## Understand the tech

Virtual Background offers the following options:

| Feature                                 | Example                                                                                                                                                                                                                                                                                                               |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Blurred background and image background | ![image](https://assets-docs.agora.io/images/extensions-marketplace/blurred-background.jpg)                                                                                                                                                                                                                           |
| Video/Animated background               | <video src="https://assets-docs.agora.io/images/extensions-marketplace/virtual-background.mp4" poster="https://web-cdn.agora.io/docs-files/1654571689670" width="100%" height="auto">Your browser does not support the `video` element.</video>                                                                       |
| Portrait-in-picture                     | ![portrait-in-picture](https://assets-docs.agora.io/images/extensions-marketplace/portrait-in-picture.jpg) Allows the presenter to use slides as the virtual background while superimposing their video. The effect is similar to a weather news cast on television, preventing interruptions during a layout toggle. |

Want to test Virtual Background? Try the <a href="https://webdemo.agora.io/virtualBackground/index.html">online demo</a>.

## Prerequisites

Ensure that you have implemented the [SDK quickstart](/en/realtime-media/rtc/get-started-sdk) in your project.

## Implement virtual background

This section shows you how to add a virtual background to the local video.

### Check device compatibility

To avoid performance degradation or unavailable features when enabling Virtual Background on low-end devices, check whether the device supports the feature.

```typescript
const checkCompatibility = () => {
  if (!extension.current.checkCompatibility()) {
    console.error("Does not support virtual background!");
    return;
  }
}
```

### Configure the virtual background extension

Initializes and configures the virtual background processor, ensuring compatibility and handling initialization errors.

```typescript
useEffect(() => {
  const initializeVirtualBackgroundProcessor = async () => {
    AgoraRTC.registerExtensions([extension.current]);
    checkCompatibility();
    console.log("Initializing virtual background processor...");
    try {
      processor.current = extension.current.createProcessor();
      await processor.current.init(wasm);
      localCameraTrack.pipe(processor.current).pipe(agoraContext.localCameraTrack.processorDestination);
      processor.current.setOptions({ type: "color", color: "#00ff00" });
      await processor.current.enable();
    } catch (error) {
      console.error("Error initializing virtual background:", error);
    }
  };

  void initializeVirtualBackgroundProcessor();

  return () => {
    const disableVirtualBackground = async () => {
      processor.current?.unpipe();
      localCameraTrack?.unpipe();
      await processor.current?.disable();
    };
    void disableVirtualBackground();
  };
}, [localCameraTrack]);
```

### Set a blurred background

To blur the video background, use the following code:

```typescript
const blurBackground = () => {
  processor.current?.setOptions({ type: "blur", blurDegree: 2 });
};
```

### Set a color background

To apply a solid color as the virtual background, use the following code:

```typescript
const colorBackground = () => {
  processor.current?.setOptions({ type: "color", color: "#00ff00" });
};
```

### Set an image background

To set a custom image as the virtual background, use the following code:

```typescript
const imageBackground = () => {
  const image = new Image();
  image.onload = () => {
    processor.current?.setOptions({ type: "img", source: image });
  };
  image.src = demoImage;
};
```

## Reference

This section contains content that completes the information in this page, or points you to documentation that explains other aspects to this product.