Web

最近更新时间:2024-07-09 14:42:21

我的收藏

功能描述

本文将介绍如何在通话过程中实现虚拟背景的功能。功能展示如下:
原始摄像头
背景虚化
背景图片










前提条件

需要使用虚拟背景功能的 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,
});