实现 Alpha 透明特效

场景概述

在各种实时音视频互动场景下，将主播的背景进行人像分割和透明特效处理可以使互动过程更加有趣，提升互动的沉浸感、改善互动体验。以下是一些比较典型的场景：

• 动态礼物特效：提供透明背景的动态礼物效果，避免多视频流合并时遮挡直播内容。
• 主播背景替换：观众端可以将画面中的主播背景替换成虚拟场景，比如游戏场景、发布会、旅游景点等。
• 游戏直播时对主播抠图：观众端可以对主播人像进行抠图，然后放在本地游戏画面的某个位置，使主播看起来像是在游戏中。

前提条件

已经在项目中实现了基本的实时音视频功能。详见实现音视频互动。

实现方案

使用 SDK 采集视频帧场景下，可以通过以下方式实现 Alpha 透明特效：

开启虚拟背景

在发送端调用 enableVirtualBackground 开启背景分割算法，得到人像区域的 Alpha 数据。建议设置参数如下：

• enabled：设置为 true，开启虚拟背景。
• backgroundSource 中的 background_source_type：设置为 BackgroundNone(0)，即：将人像和背景进行分割，并将背景处理为 Alpha 数据。

TypeScript

// 初始化 rtcEngine 对象
const rtcEngine = createAgoraRtcEngine();

// 开启虚拟背景
rtcEngine.enableVirtualBackground(
    true, 
    backgroundSource, 
    { modelType: SegModelType.SegModelAi }, 
    { background_source_type: BackgroundSourceType.BackgroundNone }
);

设置视频编码属性

在发送端调用 setVideoEncoderConfiguration 设置视频编码属性，将 encodeAlpha 设置为 true，则 Alpha 数据会被编码并发送到远端。

TypeScript

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

开启 Alpha 渲染

1. 使用 RtcSurfaceView 组件创建本地视图和远端视图。
2. 在 RtcRenderViewProps 属性的 canvas 参数中，将 VideoCanvas 的 enableAlphaMask 设置为 true 开启 Alpha 遮罩渲染并实现 Alpha 透明特效。

React JSX

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