# Alpha transparency effect (/en/realtime-media/broadcast-streaming/build/apply-effects-and-enhancements/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 [#prerequisites-4]

    Ensure that you have implemented the [SDK quickstart](../../index) in your project.

    ## Implement alpha transparency [#implement-alpha-transparency-4]

    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 [#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 [#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 [#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}
       />
       ```