草庐IT

实现基于声网Web SDK的视频会议的使用体验

三掌柜 2023-03-28 原文

引导语

众所周知,市面上有比如飞书会议、腾讯会议等实现视频会议功能的应用,而且随着这几年大环境的影响,远程协作办公越来越成为常态,关于视频会议的应用也会越来越多,且在远程办公的沟通协作中对沟通软件的使用要求会越来越严格。正是因为外部大环境的原因直接促进了远程办公从起步逐渐走向成熟,打破了传统的以场地办公为主的模式,这使得视频会议的应用呈现出一派繁荣发展的景象。这些关于视频会议的功能怎么实现呢?那么本文就来聊聊关于视频会议的实现分析,主要通过视频会议的核心两点拆分来看,即虚拟背景实现和AI降噪两个方面,以及基于声网Web SDK的简单使用体验。

使用前的准备工作

由于本文分享的是关于声网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。声网官方视频会议SDK下载地址:​https://docs.agora.io/cn/video-call-4.x/downloads?platform=Web​

一、虚拟背景实现

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

1、过程原理介绍

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

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

2、具体步骤

本文以声网对应的虚拟背景功能的集成使用为例来讲,用到的就是虚拟背景插件agora-extension-virtual-background,然后结合声网的Web SDK搭配使用,可以将使用者人像和背景分离开,虚化使用者的实际背景,或者使用自定义内容来替代实际背景,可以很好的保护使用者隐私,以及避免杂乱的背景对其他观众造成不好的视觉体验。声网关于虚拟背景的技术实现原理也有很清晰的介绍,如下所示:

那么接下来就来看看虚拟背景的功能怎么实现吧,具体使用步骤如下所示:

(1)首先实现音视频功能,初始化下载之后的demo,具体如下所示:

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

上面引入之后,需要在使用的项目中导入AgoraRTC 模块,具体如下所示:

上面引入之后,实现客户端的用户使用的界面之后,在具体的地方创建AgoraRTCClient 对象,具体如下所示:

接下来是麦克风采集和摄像头采集的方法,创建本地对应的轨道对象,具体如下所示:

具体的运行效果如下所示:

具体的其他内容,可以参看声网音视频官方文档:​​https://docs.agora.io/cn/video-call-4.x/start_call_web_ng?platform=Web​

(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();

3、小结

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

二、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(); // 创建 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方法

3、小结

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


结束语

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

参考文献

  1. 声网文档中心--SDK下载:​​https://docs.agora.io/cn/video-call-4.x/downloads?platform=Web​
  2. Demo下载:​​https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo​
  3. 声网文档中心--虚拟背景文档:​​https://docs.agora.io/cn/video-call-4.x/virtual_background_web_ng?platform=Web​
  4. 声网文档中心--AI 降噪文档:​​https://docs.agora.io/cn/video-call-4.x/noise_reduction_web_ng?platform=Web​

有关实现基于声网Web SDK的视频会议的使用体验的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  10. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

随机推荐