虚拟背景

更新时间：2024-06-21 18:34:41

最近更新时间：2024-06-14

一、功能说明

本文将介绍如何在通话过程中实现虚拟背景的功能。功能展示如下：

原始摄像头	背景图片

二、提前准备

请确保已开通该功能，可联系销售开通。
TRTC Web SDK 版本 >= 5.2.0。
Web 平台各系统及配置要求如下表：

三、操作步骤

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)

用于开启虚拟背景。

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,
});

研讨会产品