Alpha transparency effect

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.

Prerequisites

Ensure that you have implemented the SDK quickstart 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

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.

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

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.

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