如何在 Web 实现支持虚拟背景的视频会议

作者：声网

2023-04-04
北京
本文字数：4527 字
阅读完需：约 15 分钟

前言

众所周知，市面上有比如飞书会议、腾讯会议等实现视频会议功能的应用，而且随着这几年大环境的影响，远程协作办公越来越成为常态，关于视频会议的应用也会越来越多，且在远程办公的沟通协作中对沟通软件的使用要求会越来越严格。正是因为外部大环境的原因直接促进了远程办公从起步逐渐走向成熟，打破了传统的以场地办公为主的模式，这使得视频会议的应用呈现出一派繁荣发展的景象。

这些关于视频会议的功能怎么实现呢？本文就来聊聊关于视频会议的实现分析，主要通过视频会议的核心两点拆分来看，即虚拟背景实现和 AI 降噪两个方面，以及基于声网Web SDK的简单使用体验。

01 使用前的准备工作

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

1、开发环境

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

Chrome
Firefox
Safari
Edge

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

MacBook Pro
Visual Studio Code

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

Chrome

4、其他

在使用声网 Web SDK 的时候，如果没有声网账号，需要先去注册一个声网账号，然后进入声网后台管理平台创建你要使用的 AppID、获取 Token 等操作。
提前下载声网官方的关于视频会议的 Web SDK，点击这里进行下载。

02 虚拟背景实现

随着视频会议应用的功能不断更新发展，为了迎合实际的用户需求，各大视频会议应用的厂商都推出了个性化的功能。在视频会议应用的使用中，关于虚拟背景的功能就是比较重要的一环，虚拟背景可以说是视频会议应用必备功能，而且虚拟背景对应的功能随着用户的需求变的越来越复杂。

1、过程原理介绍

从技术层面来看，虚拟背景主要是依托于人像分割技术，通过把图片中的人像分割出来，再对背景图片进行替换的操作。从实际的使用情况分为三种：

实时通讯情形：主要是为了保护使用者的隐私，如视频远程会议；
直播情形：主要是为了营造气氛，如技术直播、公司线上年会；
互动娱乐情形：主要是为了增强趣味性，如短视频中人物特性。

2、具体步骤

本文以声网对应的虚拟背景功能的集成使用为例来讲，用到的就是虚拟背景插件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）在实际的前端页面中实现虚拟背景插件的注册操作，具体代码段：

// 创建 Clientvar 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();

复制代码

3、小结

通过上面关于引入虚拟背景的核心步骤，可以看到声网的虚拟背景插件使用起来非常简单，只需简单的几步，就可以在前端音视频项目中实现虚拟背景的功能，而且关于虚拟背景的虚拟效果有很多个选项，完全可以满足实际使用中的需求。个人觉得声网这个虚拟背景插件非常好用，不仅集成使用很简单，而且实现的效果也很不错，感兴趣的读者快来下手试一下吧！

03 AI 降噪实现

在视频会议应用的使用中，另外一个比较重要的环节就是降噪。因为在实际的线上会议中，如果参会人员都是处在比较安静的环境下还好说，但是一般在线上会议的时候参会人员所处的环境都不相同，且所处的环境会有各种噪音，往往这些噪音会直接降低在线会议中的音质，从而影响会议的体验。所以通过使用降噪，就可以把在线会议过程中的噪音去掉，进而提高参会人员的良好体验。

1、过程原理介绍

依然从技术层面来看，降噪其实就是获取音频信号并且消除音频中的噪音的过程。由于声音是由空气中的压力波组成，关于人所能感知到的实际声音只是一小部分，其中还包括各种回声、噪音、周围的其他环境音，声网推出的关于降噪的功能：基于 AI 降噪，通过使用 AI 降噪可以解决上述的痛点问题。

2、具体步骤

这里还是以声网对应的 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();  // 创建 processorprocessor.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方法

复制代码

3、小结

通过上面关于引入 AI 降噪的核心步骤，可以看到声网的 AI 降噪插件使用起来非常简单，只需简单几步就可在前端音视频项目中实现 AI 降噪的功能。个人觉得声网这个 AI 降噪插件同样非常的好用，不仅集成使用很简单，而且实现的效果也很不错，感兴趣的读者快来体验吧！

04 结束语

通过本文关于实现基于声网 Web SDK 的视频会议的使用体验，从视频会议的核心部分来做实现分析，是不是可以上手来开发一个属于视频会议应用了呢？

声网的虚拟背景实现和 AI 降噪两个核心功能，不仅使用的步骤很简单，而且实现出来的效果很不错，完全可以满足想要开发视频会议相关应用的需求。整体操作下来，个人还是觉得声网对应的 API 文档写的太好了，很详细，步骤也很清晰，还有就是声网产品的集成步骤也很简单，节省了集成插件的时间，从集成到调用，再到体验，用了不到一小时就搞定了虚拟背景实现和 AI 降噪两个模块的体验。所以，有在开发音视频相关的朋友可以看过来了，声网的相关产品不仅成熟，还很好用，快来体验使用吧！

（正文完）