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

> 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.

### Enable the extension

To enable the Virtual Background extension, use the following code:

```typescript
agoraEngineRef.current?.enableExtension(
  'agora_video_filters_segmentation',
  'portrait_segmentation',
  true,
);
```

### Set a blurred background

To blur the video background, use the following code:

```typescript
const setBlurBackground = () => {
  backgroundSourceType = BackgroundSourceType.BackgroundBlur;
  backgroundBlurDegree = BackgroundBlurDegree.BlurDegreeHigh;
  agoraEngineRef.current?.enableVirtualBackground(
    true,
    {
      background_source_type: backgroundSourceType,
      blur_degree: backgroundBlurDegree,
    },
    {},
  );
};
```

### Set a color background

To apply a solid color as the virtual background, use a hexadecimal color code. For example, `0x0000FF` for blue:

```typescript
const setColorBackground = () => {
  backgroundSourceType = BackgroundSourceType.BackgroundColor;
  color = 0x0000ff;
  agoraEngineRef.current?.enableVirtualBackground(
    true,
    {
      background_source_type: backgroundSourceType,
      color: color,
    },
    {},
  );
};
```

### Set an image background

To set a custom image as the virtual background, specify the absolute path to the image file.

```typescript
const setImageBackground = () => {
  backgroundSourceType = BackgroundSourceType.BackgroundImg;
  source =
    '<<absolute path to an image file>>';
  agoraEngineRef.current?.enableVirtualBackground(
    true,
    {
      background_source_type: backgroundSourceType,
      source: source,
    },
    {},
  );
};
```

### Reset the background

To disable the virtual background and revert to the original video state, use the following code:

```typescript
const resetVirtualBackground = () => {
  setVirtualBackgroundStatus(false);
  agoraEngineRef.current?.enableVirtualBackground(false, {}, {});
};
```

## Reference

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

### API reference

* [`enableExtension`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_irtcengine.html#api_irtcengine_enableextension)

* [`enableVirtualBackground`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_irtcengine.html#api_irtcengine_enablevirtualbackground)

* [`VirtualBackgroundSource`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_virtualbackgroundsource.html)

* [`SegmentationProperty`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_segmentationproperty.html)