关于前端:如何在-Web-实现支持虚拟背景的视频会议

家喻户晓，市面上有比方飞书会议、腾讯会议等实现视频会议性能的利用，而且随着这几年大环境的影响，近程合作办公越来越成为常态，对于视频会议的利用也会越来越多，且在近程办公的沟通合作中对沟通软件的应用要求会越来越严格。正是因为内部大环境的起因间接促成了近程办公从起步逐步走向成熟，突破了传统的以场地办公为主的模式，这使得视频会议的利用呈现出一派凋敝倒退的现象。

这些对于视频会议的性能怎么实现呢？本文就来聊聊对于视频会议的实现剖析，次要通过视频会议的外围两点拆分来看，即虚构背景实现和 AI 降噪两个方面，以及基于声网 Web SDK 的简略应用体验。

因为本文分享的是对于声网 Web SDK 的视频会议的应用心得，读者如果也想体验声网的这个 Web SDK，须要提前准备应用前的工作，具体如下所示：

其实声网的 Web SDK 兼容性十分不错，对硬件设施和软件系统的要求不高，开发和测试环境只有满足以下条件即可：

Chrome
Firefox
Safari
Edge

MacBook Pro
Visual Studio Code

Chrome

在应用声网 Web SDK 的时候，如果没有声网账号，须要先去注册一个声网账号，而后进入声网后盾治理平台创立你要应用的 AppID、获取 Token 等操作。
提前下载声网官网的对于视频会议的 Web SDK，点击这里进行下载。

随着视频会议利用的性能不断更新倒退，为了投合理论的用户需要，各大视频会议利用的厂商都推出了个性化的性能。在视频会议利用的应用中，对于虚构背景的性能就是比拟重要的一环，虚构背景能够说是视频会议利用必备性能，而且虚构背景对应的性能随着用户的需要变的越来越简单。

从技术层面来看，虚构背景次要是依靠于人像宰割技术，通过把图片中的人像宰割进去，再对背景图片进行替换的操作。从理论的应用状况分为三种：

实时通信情景：次要是为了爱护使用者的隐衷，如视频近程会议；
直播情景：次要是为了营造氛围，如技术直播、公司线上年会；
互动娱乐情景：次要是为了加强趣味性，如短视频中人物个性。

本文以声网对应的虚构背景性能的集成应用为例来讲，用到的就是虚构背景插件agora-extension-virtual-background，而后联合声网的 Web SDK 搭配应用，能够将使用者人像和背景分来到，虚化使用者的理论背景，或者应用自定义内容来代替理论背景，能够很好的爱护使用者隐衷，以及防止芜杂的背景对其余观众造成不好的视觉体验。声网对于虚构背景的技术实现原理也有很清晰的介绍，如下所示：

那么接下来就来看看虚构背景的性能怎么实现吧，具体应用步骤如下所示：
（1）首先实现音视频性能，初始化下载之后的 demo，具体如下所示：

在前端 demo 中集成声网音视频 SDK，次要通过 npm 来操作，具体操作步骤如下所示:

下面引入之后，须要在应用的我的项目中导入 AgoraRTC 模块，具体如下所示：

下面引入之后，实现客户端的用户应用的界面之后，在具体的中央创立 AgoraRTCClient 对象，具体如下所示：

接下来是麦克风采集和摄像头采集的办法，创立本地对应的轨道对象，具体如下所示：

具体的运行成果如下所示：

具体的其余内容，能够参看声网音视频官网文档。

（2）在前端 demo 中引入虚构背景插件，具体的命令行：

npm install agora-extension-virtual-background

（3）在对应的具体应用的中央引入虚构背景插件，具体操作：

import VirtualBackgroundExtension from "agora-extension-virtual-background"; // 这里示例以通过 import 的形式来引入

（4）须要留神的一点就是声网的虚构背景插件依赖与 Wasm 文件，应用的时候须要把 Wasm 文件放在 CDN 或者动态服务器中，本示例只在本地运行，所以无需公布在 CDN 上，然而理论应用的时候要记得放在 CDN 上，切记！

（5）在理论的前端页面中实现虚构背景插件的注册操作，具体代码段：

// 创立 Client
var client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
// 创立 VirtualBackgroundExtension 实例
const extension = new VirtualBackgroundExtension();
// 查看兼容性
if (!extension.checkCompatibility()) {
// 以后浏览器不反对虚构背景插件，能够进行执行之后的逻辑
console.error("该版本暂不反对该性能！");
}
// 注册插件
AgoraRTC.registerExtensions([extension]);

（6）初始化虚构背景插件，具体代码段：

// 初始化
async function getProcessorInstance() {processor = extension.createProcessor(); // 创立 VirtualBackgroundProcessor 实例。try {await processor.init("./assets/wasms");  // 初始化插件，传入 Wasm 文件门路
  } catch(e) {
  // 捕捉异样并进行相应解决。console.log("Fail");
  return null;
  }
localTracks.videoTrack.pipe(processor).pipe(localTracks.videoTrack.processorDestination);  // 将插件注入 SDK 内的视频解决管道
}

（7）通过 processor.setOptions() 办法设置虚构背景类型和对应的参数，示例：

processor.setOptions({type: 'color', color: '#FF0000'}); //type 示意背景类型为色彩；对应的是色彩色值的参数。（其实还有 img、blur、video 等类型，这里不在一一列举）

（8）关上虚构背景性能，通过 processor.enable() 办法：

await processor.enable();

（9）短暂敞开虚构背景性能，通过 processor.disable() 办法:

processor.disable();

（10）完结敞开虚构背景性能，通过 videoTrack.unpipe() 办法：

localTracks.videoTrack.unpipe();

通过下面对于引入虚构背景的外围步骤，能够看到声网的虚构背景插件应用起来非常简单，只需简略的几步，就能够在前端音视频我的项目中实现虚构背景的性能，而且对于虚构背景的虚构成果有很多个选项，齐全能够满足理论应用中的需要。集体感觉声网这个虚构背景插件十分好用，不仅集成应用很简略，而且实现的成果也很不错，感兴趣的读者快来下手试一下吧！

在视频会议利用的应用中，另外一个比拟重要的环节就是降噪。因为在理论的线上会议中，如果参会人员都是处在比拟宁静的环境下还好说，然而个别在线上会议的时候参会人员所处的环境都不雷同，且所处的环境会有各种乐音，往往这些乐音会间接升高在线会议中的音质，从而影响会议的体验。所以通过应用降噪，就能够把在线会议过程中的乐音去掉，进而进步参会人员的良好体验。

仍然从技术层面来看，降噪其实就是获取音频信号并且打消音频中的乐音的过程。因为声音是由空气中的压力波组成，对于人所能感知到的理论声音只是一小部分，其中还包含各种回声、乐音、四周的其余环境音，声网推出的对于降噪的性能：基于 AI 降噪，通过应用 AI 降噪能够解决上述的痛点问题。

这里还是以声网对应的 AI 降噪性能的集成应用为例来讲，用到的就是 AI 降噪插件agora-extension-ai-denoiser，而后联合声网的 Web SDK 搭配应用，能够升高上百种噪声，缩小多人同时谈话时的人声失真等问题。对于在线会议、语聊房、近程问诊、游戏语音等场景，AI 降噪插件可能让近程交换和面对面交谈一样实时。声网对于 AI 降噪的技术实现原理也有很清晰的介绍，如下所示：

那么接下来就来看看 AI 降噪的性能怎么实现吧，具体应用步骤如下所示：
（1）首先还是要实现音视频性能，具体步骤同虚构背景实现的步骤(1)；
（2）在前端 demo 中引入 AI 降噪插件，具体的命令行：

npm install agora-extension-ai-denoiser

（3）在我的项目.js 文件中退出导入 AI 降噪模块，具体操作：

import {AIDenoiserExtension} from "agora-extension-ai-denoiser";

（4）还是要留神的是 AI 降噪插件依赖与 Wasm 文件，应用的时候须要把 Wasm 文件放在 CDN 或者动态服务器中，本示例只在本地运行，所以无需公布在 CDN 上，然而理论应用的时候要记得放在 CDN 上，切记！

（5）在理论的前端页面中实现 AI 降噪景插件的注册操作，具体代码段：

const denoiser = new AIDenoiserExtension({assetsPath:'./external'}); // 留神门路结尾不带“/”// 查看兼容性
if (!denoiser.checkCompatibility()) {
  // 以后浏览器可能不反对 AI 降噪插件，能够进行执行之后的逻辑
  console.error("该版本暂不反对该性能！");
}
// 注册插件
AgoraRTC.registerExtensions([denoiser]); 
denoiser.onloaderror = (e) => {
     // 捕捉异样并进行相应解决。console.log(e);
}

（6）创立实例，具体代码段：

const processor = denoiser.createProcessor();  // 创立 processor
processor.enable(); // 设置插件为默认开启

或者

processor.disable(); // 设置插件为默认敞开

（7）把 AI 降噪插件注入到音频解决管道中，具体代码段：

const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();   // 创立音频轨道 
audioTrack.pipe(processor).pipe(audioTrack.processorDestination);  // 将插件注入音频解决管道
await processor.enable();  // 设置插件为开启

（8）设置 AI 降噪的开启或者敞开状态，具体代码段：

if (processor.enabled) { // 曾经开启状态
  await processor.disable(); // 设置插件为敞开} else {await processor.enable(); // 设置插件为开启
  }

（9）调整降噪模式和等级，具体代码段：

// 用来监听降噪解决耗时过长的事件
processor.onoverload = async (elapsedTime) => {
// 调整为稳态降噪模式，长期敞开 AI 降噪
await processor.setMode("STATIONARY_NS");
或者
// 齐全敞开 AI 降噪，用浏览器自带降噪
// await processor.disable()}

（10）转储降噪解决中的音频数据，具体代码段：

processor.dump(); // 调用 dump 办法

通过下面对于引入 AI 降噪的外围步骤，能够看到声网的 AI 降噪插件应用起来非常简单，只需简略几步就可在前端音视频我的项目中实现 AI 降噪的性能。集体感觉声网这个 AI 降噪插件同样十分的好用，不仅集成应用很简略，而且实现的成果也很不错，感兴趣的读者快来体验吧！

通过本文对于实现基于声网 Web SDK 的视频会议的应用体验，从视频会议的外围局部来做实现剖析，是不是能够上手来开发一个属于视频会议利用了呢？

声网的虚构背景实现和 AI 降噪两个外围性能，不仅应用的步骤很简略，而且实现进去的成果很不错，齐全能够满足想要开发视频会议相干利用的需要。整体操作下来，集体还是感觉声网对应的 API 文档写的太好了，很具体，步骤也很清晰，还有就是声网产品的集成步骤也很简略，节俭了集成插件的工夫，从集成到调用，再到体验，用了不到一小时就搞定了虚构背景实现和 AI 降噪两个模块的体验。所以，有在开发音视频相干的敌人能够看过去了，声网的相干产品不仅成熟，还很好用，快来体验应用吧！

（注释完）

• 注册声网账号:

https://sso2.agora.io/cn/v4/signup/with-sms

• 声网文档核心 –SDK 下载：

https://docs.agora.io/cn/video-call-4.x/downloads?platform=Web

• Demo 下载：

https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo

• 声网文档核心 – 虚构背景文档：

https://docs.agora.io/cn/video-call-4.x/virtual_background_we…

• 声网文档核心 –AI 降噪文档：

https://docs.agora.io/cn/video-call-4.x/noise_reduction_web_n…

• 声网音视频官网文档：

https://docs.agora.io/cn/video-call-4.x/start_call_web_ng?pla…

关于前端:如何在-Web-实现支持虚拟背景的视频会议

前言

01 应用前的筹备工作

1、开发环境

2、本文的体验测试应用到的开发环境

3、本文的体验测试应用到的测试环境

4、其余

02 虚构背景实现

1、过程原理介绍

2、具体步骤

3、小结

03 AI 降噪实现

1、过程原理介绍

2、具体步骤

3、小结

04 结束语

参考资料