Web RTC SDK 提供虚拟背景插件，在互动直播、视频会议、在线授课等场景下，可将用户人像和背景分离，采用模糊背景或自定义图片作为虚拟背景，从而避免杂乱背景对观众的影响，保护用户隐私，呈现较高的视频效果。你可以参考本文，实现这一功能。

1. 本功能需付费使用，请联系技术支持团队获取符合业务功能需求的鉴权文件。
2. RTC SDK v4.52+ 你需要集成 RTC SDK，并实现音视频通话功能。
3. 不建议在移动端使用本功能。这是由于本功能依赖一些 WASM 文件，对移动端设备的性能要求较高。
4. 为了更好的使用体验，建议设备满足以下要求：
   1. 双核 Intel Core i5+
   2. RAM 8 GB+
   3. 64 位操作系统
5. 如果你使用了云代理功能，你需要在防火墙白名单中添加虚拟背景域名，参看在防火墙限制下进行通话。

1. 在你的项目中引入虚拟背景插件，可直接引入或通过 UMD 方式引入。

   1. 直接引入

   import RTCBeautyExtension from '@volcengine/rtc/extension-beauty';
   

   2. 通过 UMD 方式引入

   const {BackgroundMode, RTCBeautyExtension} = window.VERTCExtensions;
   

2. 注册虚拟背景插件。

import VERTC from '@volcengine/rtc';
import RTCBeautyExtension, { BackgroundAIBackend } from '@volcengine/rtc/extension-beauty';

// 创建引擎实例
const engine = VERTC.createEngine('appid');

// 创建虚拟背景插件实例，需传入鉴权文件
const extension = new RTCBeautyExtension({ 
  authFileUrl: 'https://xxxx.auth',
  // 自 v4.53 版本起，可设置使用 GPU 模式
  aiBackend: BackgroundAIBackend.GPU
});
// 注册插件
try {
  await engine.registerExtension(extension);
} catch (error) {
  // 注册失败，详细信息：error.message
}

3. 开始视频采集，并设置渲染视图及模式。 示例代码以内部采集为例，如需使用外部采集，参看 setVideoSourceType。

// 开启内部视频采集
engine.startVideoCapture();
// 设置本地视频渲染时使用的视图，并设置渲染模式。
engine.setLocalVideoPlayer(StreamIndex.STREAM_INDEX_MAIN, {
  renderDom: 'yourDomId'
});

4. 设置虚拟背景参数。

import { BackgroundMode } from '@volcengine/rtc/extension-beauty';

// ① 设置虚拟背景模式为背景模糊（默认）
extension.setBackgroundMode(BackgroundMode.BACKGROUND_BLUR);
// ② 或设置背景模式为背景图片
extension.setBackgroundMode(BackgroundMode.BACKGROUND_IMAGE);
extension.loadBackgroundImage('https://image_url');

5. 开启虚拟背景。

extension.enableVirtualBackground();

6. 关闭虚拟背景。

extension.disableVirtualBackground();

IRTCBeautyExtension #

类型: interface

• API

checkCompatibility #

测试当前浏览器兼容性情况。

• 类型

  () => Promise<CompatibilityCheckResult>
  

• 返回值
  类型: Promise<CompatibilityCheckResult>
  兼容性测试结果。

enableVirtualBackground #

开启虚拟背景。

• 类型

  () => void
  

• 注意

  • 调用 setBackgroundMode 设置虚拟背景模式。若在调用本方法前没有设置虚拟背景模式，则默认开启背景模糊。
  • 调用 disableVirtualBackground 关闭虚拟背景。
  • 本方法仅适用于视频源，不适用于屏幕源。

disableVirtualBackground #

关闭虚拟背景。

• 类型

  () => void
  

setBackgroundMode #

设置虚拟背景模式。

• 类型

  (mode: BackgroundMode) => void
  

• 注意
  开启虚拟背景后，可调用本方法动态切换使用的虚拟背景模式。

• 参数

  • mode
    类型: BackgroundMode
    虚拟背景模式。