# Alpha transparency effect (/en/realtime-media/rtc/build/apply-video-effects/alpha-transparency-effect/react-native)

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

In various real-time video interaction use-cases, segmenting the host's background and applying transparent special effects can make the interaction more engaging, enhance immersion, and improve the overall interactive experience.

      
  
      
  
      
  
      
  
      
Consider the following sample use-cases:

* **Broadcaster background replacement**: The audience sees the broadcaster's background in the video replaced with a virtual scene, such as a gaming environment, a conference, or a tourist attractions.

* **Animated virtual gifts**: Display dynamic animations with a transparent background to avoid obscuring live content when multiple video streams are merged.

* **Chroma keying during live game streaming**: The audience sees the broadcaster's image cropped and positioned within the local game screen, making it appear as though the broadcaster is part of the game.

![image](https://assets-docs.agora.io/images/video-sdk/alpha-transparency-demo.png)

## Prerequisites

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

## Implement alpha transparency

Choose one of the following methods to implement the Alpha transparency effect based on your specific business use-case.

When using the SDK to capture video frames, you can achieve the Alpha transparency effect in the following ways:

**Alpha transparency use-case**

![Custom Video Capture Process 1](https://assets-docs.agora.io/images/video-sdk/alpha-transparency-scenario-2.svg)

### Enable virtual background

Call `enableVirtualBackground` on the host to enable the background segmentation algorithm and get the alpha data of the portrait area. Set the following parameters:

* `enabled`: Set to `true` to enable virtual background.
* `background_source_type` in `backgroundSource`: Set to `BackgroundNone`. This separates the portrait and background and the background is processed as Alpha data.

```typescript
// Initialize the RtcEngine object
const rtcEngine = createAgoraRtcEngine();

// Enable virtual background
rtcEngine.enableVirtualBackground(
  true,
  backgroundSource,
  { modelType: SegModelType.SegModelAi },
  { background_source_type: BackgroundSourceType.BackgroundNone }
);
```

### Set video encoding properties

Call `setVideoEncoderConfiguration` on the host to set the video encoding properties. Set `encodeAlpha` to `true` to encode the alpha data and send to the remote end.

```typescript
rtcEngine.setVideoEncoderConfiguration({advanceOptions: {encodeAlpha: true}});
```

### Enable Alpha rendering

1. Use the `RtcSurfaceView` component to create local and remote views.
2. In the `canvas` parameter of the `RtcRenderViewProps` property, set `enableAlphaMask` of the `VideoCanvas` to `true` to enable alpha mask rendering and alpha transparency effects.

   ```tsx
   <RtcSurfaceView
     canvas={{ uid: 0, enableAlphaMask: true }}
     style={styles.videoView}
   />
   ```