如何在 Web 實現支援虛擬背景的視訊會議

前言

眾所周知，市面上有比如飛書會議、騰訊會議等實現視訊會議功能的應用，而且隨著這幾年大環境的影響，遠端協作辦公越來越成為常態，關於視訊會議的應用也會越來越多，且在遠端辦公的溝通協作中對溝通軟體的使用要求會越來越嚴格。正是因為外部大環境的原因直接促進了遠端辦公從起步逐漸走向成熟，打破了傳統的以場地辦公為主的模式，這使得視訊會議的應用呈現出一派繁榮發展的景象。

這些關於視訊會議的功能怎麼實現呢？本文就來聊聊關於視訊會議的實現分析，主要透過視訊會議的核心兩點拆分來看，即虛擬背景實現和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）在實際的前端頁面中實現虛擬背景外掛的註冊操作，具體程式碼段：

// 建立 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、小結

透過上面關於引入虛擬背景的核心步驟，可以看到聲網的虛擬背景外掛使用起來非常簡單，只需簡單的幾步，就可以在前端音影片專案中實現虛擬背景的功能，而且關於虛擬背景的虛擬效果有很多個選項，完全可以滿足實際使用中的需求。個人覺得聲網這個虛擬背景外掛非常好用，不僅整合使用很簡單，而且實現的效果也很不錯，感興趣的讀者快來下手試一下吧！

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();  // 建立 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降噪外掛同樣非常的好用，不僅整合使用很簡單，而且實現的效果也很不錯，感興趣的讀者快來體驗吧！

04 結束語

透過本文關於實現基於聲網Web SDK的視訊會議的使用體驗，從視訊會議的核心部分來做實現分析，是不是可以上手來開發一個屬於視訊會議應用了呢？

聲網的虛擬背景實現和AI降噪兩個核心功能，不僅使用的步驟很簡單，而且實現出來的效果很不錯，完全可以滿足想要開發視訊會議相關應用的需求。整體操作下來，個人還是覺得聲網對應的API文件寫的太好了，很詳細，步驟也很清晰，還有就是聲網產品的整合步驟也很簡單，節省了整合外掛的時間，從整合到呼叫，再到體驗，用了不到一小時就搞定了虛擬背景實現和AI降噪兩個模組的體驗。所以，有在開發音影片相關的朋友可以看過來了，聲網的相關產品不僅成熟，還很好用，快來體驗使用吧！

（正文完）