Tutorial: 开启虚拟背景

开启虚拟背景

功能描述

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

原始摄像头 背景虚化 背景图片

前提条件

  • 需要使用虚拟背景功能的 sdkAppId 已开通 TRTC 旗舰版包月套餐。包月套餐相关说明请参见文档 包月套餐计费说明
  • TRTC Web SDK 版本 >= 5.2.0
  • 各平台系统及配置要求如下表:
平台 操作系统 浏览器版本 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 15+
30 2019年 MacBook
内存:16GB(2667MHz)
CPU:i7(6核 2.60GHz)
GPU:AMD Radeon 5300M

实现流程

部署静态资源

该插件依赖一些静态资源文件,为保证浏览器可以正常加载和运行这些文件,你需要完成以下步骤:

  1. node_modules/trtc-sdk-v5/assets 目录发布至 CDN 或者静态资源服务器中。
  2. 在创建 trtc 实例时传入您的 CDN 地址给 assetsPath 参数,例如: TRTC.create({ assetsPath: 'https://xxxx/assets' }),SDK 会按需加载相关资源文件。
  • 若您的版本低于 v5.10.0,您需要下载解压 assets.zip 后,发布至 CDN 或者静态资源服务器中。
  • 如果目录下文件的 Host URL 与网页应用的 Host URL 不一致,则需要开启访问文件域名的 CORS 策略。
  • 不能把目录文件放在 HTTP 服务下,因为在 HTTPS 域名下加载 HTTP 资源会被浏览器安全策略禁止。

检查浏览器是否支持(v5.8.1+)

import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';
if (!VirtualBackground.isSupported()) {
    // 当前浏览器不支持该插件
}

引入并注册插件

import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';
const trtc = TRTC.create({ plugins: [VirtualBackground], assets: 'https://xxxx/assets' });

开启本地摄像头

await trtc.startLocalVideo();

开启虚拟背景插件

await trtc.startPlugin('VirtualBackground', {
  sdkAppId: 123123,
  userId: 'userId_123',
  userSig: 'your_userSig'
});

注意:第一次开启本功能需要加载计算资源,已经帮您自动处理。如需获得更极致的启动体验,请参考文末:常见问题 > 如何加快启动速度?

按需更新参数

// 改为图片背景
await trtc.updatePlugin('VirtualBackground', {
  type: 'image',
  src: 'https://picsum.photos/seed/picsum/200/300'
});

关闭虚拟背景

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 虚化背景(默认)
blurLevel number 选填 - blur 虚化背景时可用,用于调节虚化程度,默认为 3,取值范围为 [1,10]
src string type 为 image 时必填 图片地址,如 https://picsum.photos/seed/picsum/200/300
onError (error) => {} 选填 运行过程中发生错误的回调
- error.code=10000003 渲染耗时长
- error.code=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 虚化背景
blurLevel number 选填 - blur 虚化背景时可用,用于调节虚化程度,默认为 3,取值范围为 [1,10]
src string type 为 image 时必填 图片地址,如 https://picsum.photos/seed/picsum/200/300

Example:

await trtc.updatePlugin('VirtualBackground', {
  type: 'blur',
  blurLevel: 6
});

trtc.stopPlugin('VirtualBackground')

关闭虚拟背景

常见问题

1. 在 Chrome 中运行 Demo 发现画面颠倒且卡顿

本插件使用 GPU 进行加速,您需要在浏览器设置中找到使用硬件加速模式并启用。可以将 chrome://settings/system 复制到浏览器地址栏,并且打开硬件加速模式。

2. 当设备性能不足造成延迟高,提示渲染耗时长

可通过监听事件,降低视频分辨率或者帧率。

async function onError(error) {
  const { code } = error;
  if (code === 10000003 || code === 10000006) {
    // 降低分辨率帧率
    await trtc.updateLocalVideo({
      option: {
        profile: '480p_2'
      },
    });
    // await trtc.stopPlugin('VirtualBackground'); // 或者关闭插件
  }
}
await trtc.startPlugin('VirtualBackground', {
  ...// 其他参数
  onError,
});