Agora.ioからWeb用のAIノイズキャンセル機能(β)がリリースされました

この記事は公式ドキュメントの[Use the AI Denoiser Extension (Beta)](https://docs.agora.io/en/Video/noise_reduction_web_ng?platform=Web)を翻訳した内容になります。

## 序章
AIを利用したノイズリダクションアルゴリズムでは、AIDenoiser拡張機能をAgoraWeb SDK（v4.10.0以降）と併用して、数百種類のノイズを抑制し、複数の人が同時に話すときの人間の声の歪みを低減します。オンライン会議、オンラインチャットルーム、医師とのビデオ相談、オンラインゲームなどのシナリオでは、AI Denoiser拡張機能により、仮想コミュニケーションが対面コミュニケーションと同じくらいスムーズになります。

この機能を試すには、[オンラインデモ](https://webdemo.agora.io/aiDenoiser/index.html)をクリックしてください。

**2022/4/15追記　デモ音源を作成しました。**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/Z6gMRVj2CO">https://t.co/Z6gMRVj2CO</a>のAIノイズキャンセルforWebアプリのデモ音源を作ってみた。<a href="https://twitter.com/hashtag/AI?src=hash&amp;ref_src=twsrc%5Etfw">#AI</a> <a href="https://twitter.com/hashtag/WebRTC?src=hash&amp;ref_src=twsrc%5Etfw">#WebRTC</a> <a href="https://twitter.com/hashtag/%E3%83%8E%E3%82%A4%E3%82%BA%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB?src=hash&amp;ref_src=twsrc%5Etfw">#ノイズキャンセル</a> <a href="https://t.co/N1BJoSJEOP">pic.twitter.com/N1BJoSJEOP</a></p>&mdash; 藤本さとし (@tenpa_ozisan) <a href="https://twitter.com/tenpa_ozisan/status/1514766775241519107?ref_src=twsrc%5Etfw">April 15, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 




## ノイズタイプ
AI Denoiser拡張機能は、次のタイプのノイズを抑制します。

- テレビのノイズ
- キッチンの騒音
- 鳥のさえずり、交通、地下鉄の騒音などの街路の騒音
- ファン、エアコン、掃除機、コピー機からの騒音などの機械の騒音
- キーボードクリックやマウスクリックなどのオフィスノイズ
- ドア、きしむ椅子、赤ちゃんの鳴き声、家のリフォームなどから発生する騒音などの家庭の騒音
- 絶え間ないノッキング
- ビープ音と拍手音
- 音楽

## ノイズリダクション
AI Denoiser拡張機能では、以下の手法によるノイズリダクションをサポートします

 - デフォルト：人間の声を歪めることなく、ノイズを快適なレベルに低減します。
 - カスタム：ビジネスシナリオにさらに強化された、またはカスタムのノイズリダクションが必要な場合は、Agoraテクニカルサポートにチケットを送信してください。


## 注意事項
現在、AIDenoiser拡張機能には次の制限があります。

- 入力信号のサンプルレートが16KHzでない場合、拡張機能は信号を16 KHzにダウンサンプリングし、ノイズを除去して、出力信号を元のサンプルレートにリサンプリングします。これは、8KHzを超えるオーディオデータが出力信号から削除されることを意味します。
- 一部の不明なシナリオでは、拡張機能によってオーディオ品質がある程度低下する可能性があります。
- 複数の人が同時に話すと、人間の最も低い声の音質がある程度低下する可能性があります。
- 現在のWebページの一部のオーディオトラックのみが拡張機能を有効にしている場合、拡張機能がブラウザでAECとAGCをオンにし、NSをオフにするため、拡張機能を有効にしないオーディオトラックが影響を受ける可能性があります。
- Agoraは、Safariのパフォーマンスの問題のため、Safariで拡張機能を使用することをお勧めしません。
- 現在、拡張機能はモバイルデバイス上のブラウザをサポートしていません。

## 処理概要
Agora Web SDKの一般的な送信パイプラインは、キャプチャ、前処理、エンコード、送信、デコード、後処理、再生などの一連の手順で構成されています。前処理段階で、拡張機能はパイプラインのオーディオおよびビデオデータを変更して、仮想バックグラウンドやノイズキャンセルなどの機能を実装できます。
![1647326674232.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/9be45916-b645-fe85-3280-72af341f9639.png)

## 前提条件
AI Denoiser拡張機能を使用するには、次の要件を満たしている必要があります。

ノイズタイプはビジネスシナリオに一致します。たとえば、マイクにバックグラウンドミュージックを収集させたい場合、この拡張機能はバックグラウンドミュージックをノイズとして分類するため適用できません。
デスクトップChrome（推奨）、Edge、またはFirefoxの最新バージョンを使用している必要があります。

## 実装
次の手順に従って、AI Denoiser拡張機能を統合し、ノイズリダクション機能を実装します。
適切なクイックスタートガイドを参照して、Web SDK（v4.10.0以降）を統合し、プロジェクトに基本的なリアルタイム通信機能を実装してください。
AI Denoiser拡張機能（agora-extension-ai-denoiser）をnpmを介してプロジェクトに統合します。
AI Denoiser拡張機能をインストールするには、次のコマンドを実行します。
```
npm install agora-extension-ai-denoiser
```
必要なモジュールをインポートするには、次のコードを.jsファイルに追加します。
```javascript
import {AIDenoiserExtension} from "agora-extension-ai-denoiser";
```

Wasm依存関係を動的にロードする：AI Denoiser拡張機能は、いくつかのWasmファイルに依存します。これらのファイルはnode_modules/agora-extension-ai-denoiser/externalディレクトリにあります。これらのファイルをCDNまたは静的リソースサーバーに公開し、1つのパブリックパスの下に配置する必要があります。AIDenoiserExtension以降の手順では、インスタンスを作成するためにパブリックパスのURLを渡す必要があります。次に、拡張機能はこれらのファイルを動的にロードします。
WasmファイルのホストURLがWebアプリケーションのホストURLと同じでない場合は、CORSポリシーを有効にします。さらに、HTTPSドメインへのHTTPリソースのロードはブラウザのセキュリティポリシーによってブロックされるため、WasmファイルをHTTPサービスに配置しないでください。


AI Denoiser拡張機能を登録します。AgoraRTC.registerExtensionsメソッドを呼び出し、作成されたAIDenoiserExtensionインスタンスを渡します。必要に応じて、Wasmファイルのロードに失敗したことを報告するコールバックをリッスンします。

```javascript
// Create an AIDenoiserExtension instance, and pass in the URL of the Wasm files
const denoiser = new AIDenoiserExtension({assetsPath:'./external'});
// Register the extension
AgoraRTC.registerExtensions([denoiser]);
// (Optional) Listen for the callback reporting that the Wasm files fail to load
denoiser.onloaderror = (e) => {
// If the Wasm files fail to load, you can disable the plugin, for example:
// openDenoiserButton.enabled = false;
console.log(e);
}
```

インスタンスを作成する：メソッドをIAIDenoiserProcessor呼び出してを作成し、デフォルトで拡張機能を有効にするかどうかを設定します。オプションで、ノイズリダクションプロセスに時間がかかりすぎることを報告するコールバックをリッスンできます。

```javascript
// Create a processor
const processor = denoiser.createProcessor();
// Enable the extension by default
processor.enable();
// Disable the extension by default
// processor.disable();
// (Optional) Listen for the callback reporting that the noise reduction process takes too long
processor.onoverload = async () => {
console.log("overload!!!");
// If noise reduction takes too long, turn off the extension
await processor.disable();
}
```

オーディオ処理パイプラインに拡張機能を挿入します。pipeメソッドとメソッドを呼び出しprocessorDestinationます。
```javascript
// Create a local video track
const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
// Inject the extension to the audio processing pipeline
audioTrack.pipe(processor).pipe(audioTrack.processorDestination);
await processor.enable();
```

必要に応じて拡張機能を有効または無効にします。enableまたはdisableメソッドを呼び出します。
```javascript
() => {
if (processor.enabled) {
await processor.disable();
} else {
await processor.enable();
}
}
```

ノイズリダクションプロセスからオーディオデータをダンプする：メソッドを呼び出し、コールバックとコールバックdumpをリッスンします。ondumpondumpend

Agoraは、トラブルシューティングの効率を大幅に向上させるため、オーディオデータをダンプすることを強くお勧めします。

```javascript
processor.ondump = (blob, name) => {
// Dump the audio data to a local folder in WAV format
const objectURL = URL.createObjectURL(blob);
const tag = document.createElement("a");
tag.download = name + ".wav";
tag.href = objectURL;
tag.click();
}

processor.ondumpend = () => {
console.log("dump ended!!");
}

processor.dump();
```

Agoraは多くのサンプルコードを[GitHub](https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo)に公開しています。
このAIノイズキャンセルの[サンプル](https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo/aiDenoiser)も公開されています。

## 最後に                                                                                                    
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=4b4f3124e2a2ef333551)   
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=4b4f3124e2a2ef333551)