Tutorial: 开启虚拟背景

功能描述

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

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

前提条件

• 需要使用虚拟背景功能的 sdkAppId 已开通 TRTC 旗舰版包月套餐。包月套餐相关说明请参见文档 包月套餐计费说明
• TRTC Web SDK 版本 >= 5.2.0
• 各平台系统及配置要求如下表：

实现流程

检查浏览器是否支持(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';
let trtc = TRTC.create({ plugins: [VirtualBackground] });

开启本地摄像头

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

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

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

3. 如何加快启动速度？（手动部署虚拟背景模型文件）

本插件的原理为：采集到摄像头后，在本地通过机器学习模型进行人像分割，然后将结果上行到后台传输。

第一次启用时，会自动从腾讯云 CDN 下载机器学习模型，但腾讯云 CDN 与您网页的静态文件地址是非同源的，会降低部分加载速度。最佳方案是将模型文件部署在您自己的静态资源服务器上，比如跟网页服务部署在一起。

加速方法很简单，将 assets.zip 解压到您的项目中，如 ./src/assets/，并且在创建 TRTC 实例时，指定这个地址：

const trtc = TRTC.create({ plugins: [VirtualBackground], assetsPath: './src/assets/' });