https://d226lax1qjow5r.cloudfront.net/blog/blogposts/shhhhh-remove-background-noise-in-your-video-calls/remove-background-noise.png

シーッビデオ通話のバックグラウンドノイズを除去する

最終更新日 April 25, 2024

所要時間:1 分

私たちはつながった世界に住んでいます。あなたのWebアプリケーションのユーザーは、無数の異なる場所から、様々な条件下でビデオ通話をすることができます:隣人が芝刈りを始めると決めた朝の待ち合わせ。賑やかな喫茶店で仕事をしているとき、デザインの変更について話し合うために即席のミーティングが始まる。もちろん、大きなプレゼンテーションの日には、降雪のため学校は休校になります。Vonageビデオノイズサプレッションがあれば、バックグラウンドノイズを心配する必要はありません。

今すぐChrome / Chromiumベースのブラウザ(Electron、Opera、Edge)で試してみませんか?両方のGitHubリポジトリがあります モデレートAdvancedのサンプルアプリをご用意しています。デプロイしたら、Vonage Video Playgroundから取得できる認証情報を入力してください。 ビデオプレイグラウンドを入力し、テストを開始できます。2つの異なるタブから通話に参加し、ノイズ抑制を有効または無効にするボタンをクリックするだけです。運良く騒がしい環境でなければ、携帯電話で街の雑音のビデオを検索して再生することもできます。

どうぞ、試してみてください。僕は待つよ。

ノイズサプレッション機能は ボンテージ・メディア・プロセッサー音声データにアクセスし、バックグラウンドノイズを除去します。

前述したように、Vonage Video通話でノイズ抑制を行うには2つの方法があります。その方法を見てみましょう。

中程度の実施

ノイズ・サプレッションの適度な実装により、Vonageはノイズ・サプレッション・トランスフォーマー、メディア・プロセッサー、メディア・プロセッサー・コネクターを、次のような単一の関数にまとめました。 createVonageNoiseSuppression().

重要なのは

ノイズ抑制ライブラリからインスタンスを作成する

const noiseSuppression = await createVonageNoiseSuppression();

インスタンスの初期化

await noiseSuppression.init();

メディアプロセッサーにコネクターを接続する

const mediaProcessorConnector = await noiseSuppression.getConnector();

ビデオ通話用にパブリッシャーを初期化する際のコネクタ設定

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

これで、あなたの音声はノイズサプレッショントランスフォーマーを通過し、Video通話に入ります。

ノイズ抑制を有効/無効にするには、以下のメソッドを呼び出す。 noiseSuppression:

// enable Noise Suppression
noiseSuppression.enable();
// disable Noise Suppression
noiseSuppression.disable();

高度な実装

ビデオ通話に入る前にオーディオストリームに複数のエフェクトを追加したい場合など、挿入可能なストリームやトランスフォーマーをより詳細に制御する必要がある場合は、高度なユースケースが最適です。

まず、MediaProcessorの新しいインスタンスを作成する。

const mediaProcessor = new MediaProcessor();

と新しいノイズ抑制トランス。

const noiseSuppressionTransformer = new NoiseSuppressionTransformer();

次に、トランスフォーマーを初期化する。

await noiseSuppressionTransformer.init();

次に、メディアプロセッサが使用するトランスフォーマーを設定します。ここには、オーディオストリームに追加したい他のトランスフォーマーも入れます。

mediaProcessor.setTransformers([noiseSuppressionTransformer]);

次に mediaProcessor.

const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor);

Moderateの実装例と同様に、ビデオ通話のためにパブリッシャーを初期化する際にコネクターを設定します。

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

ノイズ・サプレッション・トランスフォーマーにアクセスできるようになったので、そこで機能の有効・無効を切り替えることができる。

// enable Noise Suppression
noiseSuppressionTransformer.enable();
// disable Noise Suppression
noiseSuppressionTransformer.disable();

その他のオプション

ノイズ・サプレッションを初期化する際、いくつかのオプションを指定することができる。

1つ目はマルチスレッドWebAssemblyです。Wasmのマルチスレッドでは、複数のCPUコアを使用することでパフォーマンスを大幅に向上させることができます。これはデフォルトで有効になっていますが、動作させるには以下の前提条件を満たす必要があります:

  • セキュアなデータ伝送のためにHTTPSでWebアプリケーションを提供します。

  • Cross-Origin-Opener-Policy」ヘッダーを「same-origin」に設定することで、実行コンテキストを信頼できるソースに制限することができる。

  • Cross-Origin-Embedder-Policy」ヘッダーに「require-corp」または「credentialless」値を設定することで、共有配列バッファの安全な使用を保証する。

このオプションを無効にしたい場合は、初期化時に disableWasmMultiThread: trueを渡すことができる。

.init({disableWasmMultiThread: true});

Web Worker、Wasm、ノイズ抑制モデルは、Transformerの初期化時に動的にロードされます。デフォルトでは、これらのリソースはVonage CDNからロードされます。自分でホスティングするオプションもあります。ホストサーバーのURLを assetsDirBaseUrlパラメータにホストサーバーのURLを指定するだけです。

.init({assetsDirBaseUrl: "https://my-custom-server/path/to/the/resources/root"});

私たちは、あなたのビデオアプリケーションにノイズサプレッションをできるだけ簡単に追加できるようにしました。ぜひお試しください!

ご質問やご意見がございましたら コミュニティSlackチャンネルをフォローしてください。 X.

シェア:

https://a.storyblok.com/f/270183/384x384/1a06993970/dwanehemmings.png
Dwane HemmingsJavaScript開発者支援