功能描述
本文将介绍如何在通话过程中实现虚拟背景的功能。功能展示如下：
原始摄像头 | 背景虚化 | 背景图片 |
 |  |  |
前提条件
需要使用虚拟背景功能的 SDKAppID，请确保已开通 TRTC 旗舰版包月套餐。包月套餐相关说明请参见文档 包月套餐计费说明。
TRTC Web SDK 版本 ≥ 5.2.0。
Web 平台各系统及配置要求如下表：
平台 | 操作系统 | 浏览器版本 | fps | 推荐配置 | 备注 |
Web | Windows | Chrome 90+ Firefox 90+ Edge 97+ | 30 | 内存：16GB CPU：i5-10500 GPU：独显 2GB | 建议使用最新版 Chrome 浏览器 （开启浏览器硬件加速） |
| | | 15 | 内存：8GB CPU：i3-8300 GPU：intel 核显 1GB | |
| Mac | Chrome 98+ Firefox 96+ Safari 14+ | 30 | 2019年 MacBook 内存：16GB(2667MHz) CPU：i7(6核 2.60GHz) GPU：AMD Radeon 5300M | |
实现流程
1. 引入并注册插件
import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';let trtc = TRTC.create({ plugins: [VirtualBackground] });
2. 开启本地摄像头
await trtc.startLocalVideo();
3. 开启虚拟背景插件
await trtc.startPlugin('VirtualBackground', {sdkAppId: 123123,userId: 'userID_123',userSig: 'your_userSig'});
4. 按需更新参数
// 改为图片背景await trtc.updatePlugin('VirtualBackground', {type: 'image',src: 'https://picsum.photos/seed/picsum/200/300'});
5. 关闭虚拟背景
await trtc.stopPlugin('VirtualBackground');
API 说明
trtc.startPlugin('VirtualBackground', options)
用于开启虚拟背景。
options
Name | Type | Attributes | Description |
sdkAppId | number | 必填 | 当前应用 ID |
userId | string | 必填 | 当前用户 ID |
userSig | string | 必填 | 用户 ID 对应的 UserSig |
type | string | 选填 | image图片背景blur虚化背景（默认） |
src | string | type 为 image时必填 | 图片地址，如 https://picsum.photos/seed/picsum/200/300 |
onError | (event) => {} | 选填 | 运行过程中发生错误的回调 event.extraCode=10000003 渲染耗时长 event.extraCode=10000006 浏览器特性支持不足，可能会出现卡顿情况 |
Example:
await trtc.startPlugin('VirtualBackground', {sdkAppId: 123123,userId: 'userID_123',userSig: 'your_userSig',type: 'image',src: 'https://picsum.photos/seed/picsum/200/300'});
trtc.updatePlugin('VirtualBackground', options)
可修改虚拟背景参数。
options
Name | Type | Attributes | Description |
type | string | 选填 | image图片背景blur虚化背景（默认） |
src | string | type 为 image时必填 | 图片地址，如 https://picsum.photos/seed/picsum/200/300 |
Example:
await trtc.updatePlugin('VirtualBackground', {type: 'blur'});
trtc.stopPlugin('VirtualBackground')
关闭虚拟背景。
常见问题
1. 在 Chrome 中运行 Demo 发现画面颠倒且卡顿？
本插件使用 GPU 进行加速，您需要在浏览器设置中找到使用硬件加速模式并启用。可以将
chrome://settings/system复制到浏览器地址栏，并且打开硬件加速模式。2. 当设备性能不足造成延迟高，提示渲染耗时长？
可通过监听事件，降低视频分辨率或者帧率。
function onError(event) {const { extraCode } = event;if (extraCode === 10000003 || extraCode === 10000006) {// 降低分辨率帧率await trtc.updateLocalVideo({option: {profile: '480p_2'},});// await trtc.stopPlugin('VirtualBackground'); // 或者关闭插件}}await trtc.startPlugin('VirtualBackground', {...// 其他参数onError,});
