バーチャル背景に対応したビデオ会議をWeb上で実現する方法

序文

ご存知のように、Feishu Conference や Tencent Conference などのビデオ会議機能を実現するアプリケーションが市場に出回っており、近年の一般的な環境の影響で、リモートコラボレーションオフィスがますます一般的になり、そのアプリケーションはビデオ会議もますます普及し、その数は多くなり、リモートオフィスでのコミュニケーションやコラボレーションにおけるコミュニケーションソフトウェアの使用に対する要件はますます厳しくなります。それはまさに、リモートオフィスを開始から成熟まで直接促進し、ビデオ会議のアプリケーションを繁栄と発展のシーンにする従来のオフィスベースのモードを打破する外部環境によるものです。

ビデオ会議のこれらの機能をどのように実現できますか? この記事では、主にビデオ会議のコア 2 つのポイント、つまり仮想背景の実装と AI ノイズ削減、および Acoustic Web SDK に基づくシンプルなユーザーエクスペリエンスの分割を通じて、ビデオ会議の実装分析について説明します。

01 使用前の準備

この記事では、 Acoustic Web SDKのビデオ会議を使用した経験を共有しているため、読者が Acoustic Web の Web SDK を使用したい場合は、次のように事前に作業の準備をする必要があります。

1.開発環境

実際、Acoustics の Web SDK の互換性は非常に高く、ハードウェアデバイスとソフトウェアシステムの要件は高くなく、開発およびテスト環境は次の条件を満たす必要があります。

クロム
ファイアフォックス
サファリ
角

2. 本記事の体験テストで使用した開発環境

マックブックプロ
ビジュアルスタジオコード

3. 本記事の体験テストで使用したテスト環境

クロム

4. その他

Shengwang Web SDK を使用する場合、Shengwang アカウントを持っていない場合は、まずShengwang アカウントを登録してから、Shengwang バックグラウンド管理プラットフォームに入り、使用する AppID を作成し、トークンを取得し、その他の操作を行う必要があります。
事前にビデオ会議用の公式 Web SDK をダウンロードし、ここをクリックしてダウンロードしてください。

02 バーチャル背景の実現

ビデオ会議アプリケーションの機能の継続的な更新と開発により、ユーザーの実際のニーズを満たすために、主要なビデオ会議アプリケーションのメーカーはパーソナライズされた機能を開始しました。ビデオ会議アプリケーションの使用において、仮想背景の機能は比較的重要な部分であり、仮想背景はビデオ会議アプリケーションの必要な機能と言え、仮想背景に対応する機能はますます複雑になっています。ユーザーのニーズに合わせて。

1. プロセス原理の紹介

技術的な観点から見ると、仮想背景は主にポートレートセグメンテーションテクノロジに基づいており、画像内のポートレートをセグメント化してから背景画像を置き換えます。実際の使用状況から、次の 3 つのタイプに分けることができます。

リアルタイム通信状況：主に、ビデオ電話会議などのユーザーのプライバシーを保護するため。
ライブ放送の状況：主に雰囲気を作り出すためです。たとえば、技術的なライブ放送、会社のオンライン年次会議などです。
インタラクティブなエンターテイメントの状況: 主に、短いビデオのキャラクターの特徴など、楽しさを高めるためのものです。

2. 具体的な手順

この記事では、サウンドネットワークに対応したバーチャル背景機能の統合利用を例にとり、バーチャル背景プラグインを使用し、agora-extension-virtual-backgroundサウンドネットワークのWeb SDKと組み合わせることで、ユーザーのポートレートを背景から分離することができます。実際の背景、またはカスタムコンテンツを使用して実際の背景を置き換えることで、ユーザーのプライバシーを十分に保護し、雑然とした背景が他の視聴者に悪い視覚体験を与えることを回避できます。Acoustic Network では、次のように、仮想背景の技術的な実装原理についても非常に明確に紹介しています。

次に、仮想背景の機能を実装する方法を見てみましょう. 具体的な手順は次のとおりです:
(1) 最初にオーディオとビデオの機能を実装し、次のようにダウンロード後にデモを初期化します。

主に npm を使用して、SoundNet オーディオおよびビデオ SDK をフロントエンドデモに統合します。具体的な操作手順は次のとおりです。

上記の紹介の後、次のように、使用しているプロジェクトに AgoraRTC モジュールをインポートする必要があります。

上記の紹介の後、クライアントユーザーが使用するインターフェイスを実装した後、次のように AgoraRTCClient オブジェクトを特定の場所に作成します。

次は、次のように、ローカルに対応するトラックオブジェクトを作成する、マイクの取得とカメラの取得のメソッドです。

具体的な操作効果は次のとおりです。

その他の特定のコンテンツについては、サウンドネットワークオーディオおよびビデオの公式ドキュメントを参照してください。

(2) フロントエンドデモ、特定のコマンドラインで仮想背景プラグインを導入します。

npm install agora-extension-virtual-background

(3) 仮想背景プラグインを対応する特定の使用場所、特定の操作に導入します。

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

(4) 注意点として、Acoustics の仮想背景プラグインは Wasm ファイルに依存しています. 使用する場合は、ファイルをWasmCDN または静的サーバーに配置する必要があります. この例はローカルでのみ実行されるため、Wasm ファイルはありません。 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等类型，这里不在一一列举）

processor.enable()(8) 以下の方法でバーチャル背景機能をオンにします。

await processor.enable();

processor.disable()(9)以下の方法で、仮想背景機能を一時的にオフにします。

processor.disable();

(10) videoTrack.unpipe() メソッドを使用して、仮想背景機能を終了して閉じます。

localTracks.videoTrack.unpipe();

3. まとめ

バーチャルバックグラウンドを導入する上記の主要な手順を通じて、サウンドネットワークのバーチャルバックグラウンドプラグインの使い方は非常に簡単であることがわかります.フロントエンドオーディオでバーチャルバックグラウンドの機能を実現するには、いくつかの簡単な手順しか必要ありません。とビデオプロジェクト、および仮想背景について. 仮想効果には多くのオプションがあり、実際の使用のニーズを完全に満たすことができます. 個人的には、Shengwang の仮想背景プラグインは非常に使いやすいと思います.統合して使用するのが簡単であるだけでなく、効果も非常に優れています.興味のある読者は試してみてください!

03 AIノイズリダクションの実装

ビデオ会議アプリケーションの使用において、もう 1 つの重要なリンクはノイズリダクションです。実際のオンライン会議では、参加者が比較的静かな環境にいれば問題ありませんが、一般的にオンライン会議の参加者の環境は異なり、彼らが住んでいる環境もさまざまです。ノイズはオンライン会議の音質を直接低下させ、会議の体験に影響を与えます。したがって、ノイズリダクションを使用することで、オンライン会議中のノイズを除去でき、参加者のエクスペリエンスを向上させることができます。

1. プロセス原理の紹介

技術的な観点から言えば、ノイズリダクションとは、実際にはオーディオ信号を取得し、オーディオ内のノイズを除去するプロセスです。音は空気中の圧力波で構成されているため、実際に人が知覚できる音はごく一部であり、そこにはさまざまな反響や騒音、周囲の環境音が含まれています. サウンドネットワークによって起動されたノイズリダクション機能: AIノイズリダクション、AIノイズリダクションを使用することで、上記の問題点を解決できます。

2. 具体的な手順

ここでもサウンドネットワークに対応したAIノイズリダクション機能の統合利用を例にとり、AIノイズリダクションプラグインを利用し、サウンドネットワークのagora-extension-ai-denoiserWeb SDKと組み合わせることで、何百ものノイズを減らし、複数の人が同時に話すことを減らします.人の声が歪んでいる場合など. オンライン会議、チャットルーム、リモート相談、ゲーム音声などのシナリオでは、AIノイズリダクションプラグインにより、リモートコミュニケーションを対面コミュニケーションと同じくらいリアルタイムにすることができます。Acoustic Network では、AI ノイズリダクションの技術的な実装原理について、次のように非常に明確に紹介しています。

次に、AI ノイズリダクションの機能を実現する方法を見てみましょう. 具体的な手順は次のとおりです:
(1) まず、オーディオとビデオの機能を実現する必要があり、具体的な手順は手順と同じです ( 1) 仮想背景;
(2) フロントエンドデモで導入された AI ノイズリダクションプラグインでは、特定のコマンドライン:

npm install agora-extension-ai-denoiser

(3) AI ノイズリダクションモジュールを project.js ファイルに追加してインポートします。具体的な操作は次のとおりです。

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 ノイズリダクションを実現するためにいくつかの簡単な手順しか必要ないことがわかります。フロントエンドのオーディオおよびビデオプロジェクトで機能します。個人的には、Acoustic Network の AI ノイズリダクションプラグインも非常に使いやすいと思います. 統合と使用が非常に簡単であるだけでなく、効果も非常に優れています. 興味のある読者は是非体験してください!

04 まとめ

この記事で紹介した Acoustic Web SDK をベースにビデオ会議を実装し、ビデオ会議のコア部分を分析した経験から、ビデオ会議アプリケーションの開発を始めることはできますか?

バーチャルバックグラウンドの実装とサウンドネットワークの AI ノイズリダクションの 2 つのコア機能は、使いやすいだけでなく、効果も非常に優れており、ビデオ会議関連のアプリケーションを開発するニーズを完全に満たすことができます。全体的な操作の後でも、サウンドネットワークに対応する API ドキュメントは非常によく書かれており、非常に詳細であり、手順も非常に明確であると思います.さらに、サウンドネットワーク製品の統合手順も非常に単純であるため、節約できます.プラグインの統合にかかる時間. 統合から通話、そして体験まで、バーチャルバックグラウンドの実現と AI ノイズリダクションの 2 つのモジュールを体験するのに 1 時間もかかりませんでした. したがって、オーディオとビデオを開発している友人は一見することができます.Shengwangの関連製品は成熟しているだけでなく、使いやすいです.是非体験してください!

（本文終わり）

参考文献

• Shengwang アカウントを登録するには:

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

• SoundNet ドキュメンテーションセンター – SDK のダウンロード:

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

• デモのダウンロード:

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

• Acoustic Web ドキュメンテーションセンター – バーチャルバックグラウンドドキュメンテーション:

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

• 音響ネットワークドキュメンテーションセンター – AI ノイズリダクションのドキュメンテーション:

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

• VoiceNet オーディオおよびビデオの公式ドキュメント:

https://docs.agora.io/cn/video-call-4.x/start_call_web_ng?platform=ウェブ