翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Chime SDK で背景フィルタをクライアントアプリケーションに統合する
<a name="background-filters"></a>

このセクションでは、背景ぼかし 2.0 と背景置換 2.0 を使用して動画の背景をプログラムでフィルタリングする方法について説明します。動画ストリームに背景フィルタを追加するには、`VideoFxConfig` オブジェクトを含む `VideoFxProcessor` を作成します。次に、そのプロセッサを `VideoTransformDevice` に挿入します。

背景フィルタプロセッサでは、TensorFlow Lite 機械学習モデル、JavaScript ウェブワーカー、WebAssembly を使用し、動画ストリームで各フレームの背景にフィルタを適用します。これらのアセットは、`VideoFxProcessor` を作成すると実行時にダウンロードされます。

[GitHub のブラウザデモアプリケーション](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/browser)では、新しい背景ぼかしフィルタと置換フィルタが使用されています。これらを試すには、`npm run start` でデモを起動して、会議に参加し、カメラをクリックして動画を有効にします。**[フィルタを適用]** メニュー (![\[Button with a circle and a downward arrow.\]](http://docs.aws.amazon.com/ja_jp/chime-sdk/latest/dg/images/blur-apply-filter-initial.png)) を開き、**[背景ぼかし 2.0]** または **[背景置換 2.0]** オプションのいずれかを選択します。

**Topics**
+ [Amazon Chime SDK の背景フィルタの使用について](about-bg-filters.md)
+ [JavaScript 用の Amazon Chime SDK クライアントライブラリでコンテンツセキュリティポリシーを使用する](content-security.md)
+ [Amazon Chime SDK でアプリケーションを背景フィルタに追加する](add-filters.md)
+ [Amazon Chime SDK の背景フィルタの例](example-bg-filter.md)

# Amazon Chime SDK の背景フィルタの使用について
<a name="about-bg-filters"></a>

背景フィルタは、CPU に負荷がかかる場合と GPU に負荷がかかる場合があります。一部のモバイルデバイスと低スペックのラップトップまたはデスクトップコンピュータでは、複数の動画ストリームで同時にフィルタを実行できない場合があります。

## Amazon Chime SDK の SIMD のサポート
<a name="simd-support"></a>

背景フィルタは、SIMD (単一命令・複数データ) をサポートする環境で効率が向上します。SIMD を有効にすると、特定の複雑度レベルでフィルタの CPU 使用量が少なくなります。SIMD をサポートしていないブラウザを実行中の低消費電力デバイスでは、背景フィルタが実行されない場合があります。

## Amazon Chime SDK の WebGL2 のサポート
<a name="webgl2-support"></a>

`VideoFxProcessor` オブジェクトでは、クライアントデバイスの GPU にアクセスするために WebGL2 をサポートしているブラウザが必要です。

## Amazon Chime SDK のコンテンツ配信と帯域幅
<a name="delivery-caching-bandwidth"></a>

Amazon コンテンツ配信ネットワークでは、実行時に背景フィルタ用の機械学習モデルファイルを読み込みます。これにより、アプリケーションの一部としてファイル一式を提供することなく、低レイテンシーのグローバル配信が可能になります。ただし、モデルファイルを読み込むと、アプリケーションの一部にレイテンシーが追加される可能性があります。その影響を軽減するために、ブラウザではモデルファイルを無期限にキャッシュします。そのキャッシュにより、後続の読み込みが大幅に迅速化されます。ベストプラクティスとして、サポートされているブラウザを確認した後、ユーザーがレイテンシーに気付いていないと思われるときに背景フィルタリソースを作成することが挙げられます。例えば、ユーザーがロビーで待っている間や、デバイスピッカーを使用している間にモデルファイルをダウンロードすることができます。

アプリケーションを以下に接続する必要があります。
+ Amazon Chime SDK メディアサービス。
+ HTTPS (ポート 443) 経由の Amazon CloudFront。

すべてのリクエストは `sdkassets.chime.aws` のサブドメインに送信されます。コンテンツ配信ネットワークにアクセスできないか、[コンテンツセキュリティポリシー](content-security.md)に正しいドメインを含めていないアプリケーションでは、サポートのチェックに失敗し、フィルタを使用できなくなります。

CloudFront の IP アドレス範囲の詳細については、「Amazon CloudFront 開発者ガイド」の「[CloudFront エッジサーバーの場所と IP アドレス範囲](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html)」を参照してください。

## Amazon Chime SDK のブラウザ互換性
<a name="filters-browser-compat"></a>

次の表では、背景フィルタをサポートするブラウザとバージョンの一覧が表示されています。


| ブラウザ | サポートされている最小バージョン | 
| --- | --- | 
| Firefox | 76 以降 | 
| Chromium ベースのブラウザと環境 (Edge や Electron を含む) | 78 以降 | 
| Android Chrome | 110 以降 | 
| macOS 版 Safari | 16.3 以降 | 
| iOS 版 Safari (iPhone、iPad) | 16.x | 
| iOS 版 Chrome | 110.0.0.x.x | 
| iOS 版 Firefox (iPhone iPad) | 16.x | 

`VideoFxProcessor` オブジェクトのバージョン 3.14 は Android をサポートしています。3.14 より前のバージョンの Android デバイスをサポートにするには、`BackgroundBlurVideoFrameProcessor` および `BackgroundReplacementVideoFrameProcessor` オブジェクトを使用します。これらの使用に関する詳細は、GitHub の「[https://aws.github.io/amazon-chime-sdk-js/modules/backgroundfilter_video_processor.html](https://aws.github.io/amazon-chime-sdk-js/modules/backgroundfilter_video_processor.html)」ページを参照してください。

# JavaScript 用の Amazon Chime SDK クライアントライブラリでコンテンツセキュリティポリシーを使用する
<a name="content-security"></a>

最新のウェブアプリケーションでは、特定の種類の攻撃からユーザーを保護するために、コンテンツセキュリティポリシーが使用されています。`VideoFxProcessor` を使用するアプリケーションには、このセクションで説明されているポリシーディレクティブが含まれている必要があります。これらのディレクティブにより、Amazon Chime SDK で実行時に必要なリソースにアクセスできます。

**Topics**
+ [必須のコンテンツセキュリティポリシーディレクティブ](#required-csp)
+ [コンテンツセキュリティポリシーの例](#example-csp)
+ [コンテンツセキュリティポリシーのエラー](#csp-errors)
+ [クロスオリジンオープナーのコンテンツセキュリティポリシー](#cross-origin-policy)

## 必須のコンテンツセキュリティポリシーディレクティブ
<a name="required-csp"></a>

次のコンテンツセキュリティポリシーディレクティブを使用する必要があります。
+ `script-src:` では、動画処理コードを読み込むために `blob: https://*.sdkassets.chime.aws` を追加し、それを実行できるようにするために `wasm-unsafe-eval` を追加します。
+ `script-src-elem:` では、ソースから動画処理コードを読み込むために `blob:` `https://*.sdkassets.chime.aws` を追加します。
+ `worker-src:` では、オリジンをまたいでワーカーの JavaScript を読み込むために `blob: https://*.sdkassets.chime.aws` を追加します。

これらのエントリのいずれかを省略したり、HTTP ヘッダーと `http-equiv` メタタグを使用してポリシーを指定し、これらのいずれかを交差によって誤って除外したりすると、背景フィルタは初期化できなくなります。背景フィルタはサポートされていないように表示されます。または、動作しない動画フレームプロセッサが作成されます。ブラウザコンソールに次のようなエラーが表示されます。

```
Refused to connect to
'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…'
because it violates the document's content security policy.
```

### 必須のスクリプトポリシーディレクティブ
<a name="required-script"></a>

機能させるには、`VideoFxProcessor` クラスで実行時に Amazon コンテンツ配信ネットワークから JavaScript クラスを読み込む必要があります。これらのクラスでは WebGL2 を使用して動画の後処理を実装します。アプリケーションでこれらのクラスを取得して実行できるようにするには、次のディレクティブを含める必要があります。
+ `script-src 'self' blob: https://*.sdkassets.chime.aws`
+ `script-src-elem 'self' blob: https://*.sdkassets.chime.aws`

**注記**  
Safari と Firefox を完全にサポートするには、`script-src` および `script-src-elem` ディレクティブを使用する必要があります。

### ワーカーポリシーディレクティブ
<a name="required-worker"></a>

`VideoFxProcessor` では JavaScript クラスをブロブとして読み込んで、ウェブワーカースレッドを実行します。このスレッドでは、機械学習モデルを使用して動画を処理します。このワーカーを取得して使用するためのアクセス権をアプリケーションに付与するには、次のディレクティブを含めてください。

`worker-src 'self' blob: https://*.sdkassets.chime.aws`

### WebAssembly ポリシー
<a name="required-web-assembly"></a>

`VideoFxProcessor` では、Amazon が所有する同じコンテンツ配信ネットワークから WebAssembly (WASM) モジュールを読み込みます。Chrome 95 以降では、コンパイルされた WASM モジュールを複数のモジュール境界をまたいで渡すことはできません。これらのモジュールを取得してインスタンス化できるようにするには、`'wasm-unsafe-eval'` を `script-src` ディレクティブに含めてください。

WebAssembly のコンテンツセキュリティポリシーのドキュメントに関する詳細については、GitHub の [WebAssembly Content Security Policy](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md) を参照してください。

### (オプション) 背景画像ポリシーディレクティブ
<a name="optional-directives"></a>

動的に読み込まれる背景画像を背景置換フィルタと共に使用するには、`VideoFxProcessor` でその画像にアクセスできる必要があります。そのためには、イメージをホストするドメインに `connect-src` ディレクティブを含めてください。

## コンテンツセキュリティポリシーの例
<a name="example-csp"></a>

次のポリシーの例では、`VideoFxProcessor` を使用できます。`connect-src` の定義は `VideoFxProcessor` に固有のものではありません。代わりに、Amazon Chime SDK ミーティングの音声と動画に関連付けられています。

```
<head>
    <meta http-equiv="Content-Security-Policy" 
        content="base-uri 'self';    
        connect-src       'self' https://*.chime.aws wss://*.chime.aws https://*.amazonaws.com wss://*.chime.aws https://*.ingest.chime.aws;
        script-src        'self' blob: 'wasm-unsafe-eval' https://*.sdkassets.chime.aws; 
        script-src-elem   'self' blob: https://*.sdkassets.chime.aws;
        worker-src        'self' blob: https://*.sdkassets.chime.aws;">
</head>
```

## コンテンツセキュリティポリシーのエラー
<a name="csp-errors"></a>

必要なディレクティブのいずれかを省略すると、`VideoFxProcessor` はインスタンス化されず、サポートされなくなります。その場合、ブラウザコンソールに次の (または同様の) エラーが表示されます。

```
Refused to connect to
'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js'
because it violates the document's content security policy.
```

## クロスオリジンオープナーのコンテンツセキュリティポリシー
<a name="cross-origin-policy"></a>

メモリの使用量を制限するには、モジュールで処理に `SharedArrayBuffer` を優先して使用します。ただし、このためにはウェブセキュリティを慎重に設定する必要があります。アプリケーション HTML を配信する際には、次のヘッダーを設定する必要があります。

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

これらには対応するメタタグがないため、サーバーでこれらを設定する必要があります。これらのヘッダーを設定しない場合、背景フィルタによる RAM の使用量が少し増加する可能性があります。

背景フィルタは、CPU に負荷がかかる場合と GPU に負荷がかかる場合があります。一部のモバイルデバイスと低スペックのラップトップまたはデスクトップコンピュータでは、複数の動画ストリームで同時にフィルタを実行できない場合があります。

# Amazon Chime SDK でアプリケーションを背景フィルタに追加する
<a name="add-filters"></a>

背景フィルタを追加する手順には、以下の大まかな手順に従います。
+ サポートされているブラウザを確認します。
+ 使用したい設定を備えた `VideoFxConfig` オブジェクトを作成します。
+ その設定オブジェクトを使用して `VideoFxProcessor` オブジェクトを作成します。
+ その `VideoFxProcessor` オブジェクトを `VideoTransformDevice` に含めます。
+ `VideoTransformDevice` を使用して動画の入力を開始します。

**注記**  
これらのステップを完了するには、まず以下を実行する必要があります。  
`Logger` を作成します。
`MediaDeviceInfo` クラスの動画デバイスを選択します。
`MeetingSession` に正常に参加します。

次のセクションの手順では、このプロセスを完了する方法について説明します。

**Topics**
+ [Amazon Chime SDK でフィルタを提供する前にサポート状況をチェックする](support-check.md)
+ [Amazon Chime SDK の VideoFxConfig オブジェクトの作成](create-videofxconfig.md)
+ [Amazon Chime SDK の VideoFxProcessor オブジェクトの作成](create-videofxprocessor.md)
+ [Amazon Chime SDK の VideoFxProcessor オブジェクトの設定](configure-videofxprocessor.md)
+ [Amazon Chime SDK の VideoTransformDevice オブジェクトの作成](create-video-transform.md)
+ [Amazon Chime SDK で動画入力を開始する](start-video-input.md)
+ [Amazon Chime SDK でリソース使用率を調整する](tuning.md)

# Amazon Chime SDK でフィルタを提供する前にサポート状況をチェックする
<a name="support-check"></a>

Amazon Chime SDK には、サポートされているブラウザをチェックし、必要なアセットのダウンロードを試みる非同期の静的メソッドが用意されています。ただし、デバイスのパフォーマンスのチェックは行われません。ベストプラクティスとして、フィルタを提供する前に、ユーザーのブラウザとデバイスでフィルタのサポートが可能なことを常に確認することが挙げられます。

```
import {
    VideoFxProcessor
} from 'amazon-chime-sdk-js';

if (!await VideoFxProcessor.isSupported(logger)) {     
    // logger is optional for isSupported
}
```

# Amazon Chime SDK の VideoFxConfig オブジェクトの作成
<a name="create-videofxconfig"></a>

同一のオブジェクト内で `backgroundBlur` と `backgroundReplacement` の構成を定義できます。ただし、両方のフィルタに対して同時に `isEnabled` を `true` に設定することはできません。それは無効な設定です。

`VideoFxConfig` クラスでそれ自体の検証を行うことはありません。検証は次のステップで行われます。

次の例は、有効な `VideoFxConfig` を示しています。

```
const videoFxConfig: VideoFxConfig = {
    backgroundBlur: {
        isEnabled: false,
        strength: 'medium'
    },
    backgroundReplacement: {
        isEnabled: false,
        backgroundImageURL: 'space.jpg',
        defaultColor: undefined,
    }
}
```

次の表には、`VideoFxConfig` オブジェクトで指定可能な `VideoFxProcessor` プロパティが一覧表示されています。

**背景ぼかしフィルタのプロパティ**


| プロパティ | 型 | 説明 | 
| --- | --- | --- | 
| `isEnabled` | `boolean` |  `true` の場合、フィルタで背景をぼかします。 | 
| `strength` | `string` | ぼかしの度合いを決定します。有効な値: `low` \$1 `medium` \$1 `high` | 

**背景置換フィルタのプロパティ**


| プロパティ | 型 | 説明 | 
| --- | --- | --- | 
| `isEnabled` | `boolean` |  `true` の場合、フィルタで背景が置換されます。 | 
| `backgroundImageURL` | `string` | 背景画像の URL。フィルタでは、現在の画面の大きさに合わせて画像のサイズを動的に変更します。`https://...` などの文字列や、`data:image/jpeg;base64` などのデータ URL を使用できます。 | 
| `defaultColor` | `string` | `000000` や `FFFFFF` などの 16 進数のカラー文字列、または `black` や `white` などの文字列。画像 URL を指定しない場合、プロセッサでは `defaultColor` を背景として使用します。`defaultColor` を指定しない場合、プロセッサはデフォルトの黒になります。 | 

# Amazon Chime SDK の VideoFxProcessor オブジェクトの作成
<a name="create-videofxprocessor"></a>

`VideoFxProcessor` オブジェクトを作成すると、 AWS サーバーはランタイムアセットをダウンロードするか、ブラウザキャッシュがアセットをロードします。ネットワークまたは CSP の設定によってアセットにアクセスできない場合、`VideoFx.create` オペレーションで例外をスローします。作成される VideoFxProcessor は動作しないプロセッサーとして設定され、動画ストリームに影響を及ぼしません。

```
let videoFxProcessor: VideoFxProcessor | undefined = undefined;
try {
  videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig);
} catch (error) {
  logger.warn(error.toString());
}
```

`VideoFxProcessor.create` では `backgroundReplacement.backgroundImageURL` からの画像の読み込みも試行します。画像の読み込みに失敗すると、プロセッサで例外をスローします。プロセッサでは、構成が無効である、ブラウザがサポートされていない、ハードウェアの性能が低いなど、その他の理由でも例外をスローします。

# Amazon Chime SDK の VideoFxProcessor オブジェクトの設定
<a name="configure-videofxprocessor"></a>

次の表では、設定できる `VideoFxProcessor` プロパティが一覧表示されています。表の下にある例は、一般的なランタイム設定を示しています。

**背景ぼかし**  
背景ぼかしでは、以下のプロパティを取得します。


| プロパティ | 型 | 説明 | 
| --- | --- | --- | 
| `isEnabled` | `boolean` | `true` の場合、フィルタで背景をぼかします。 | 
| `strength` | `string` | ぼかしの度合いを決定します。有効な値: `low` \$1 `medium` \$1 `high`. | 

**背景置換**  
背景置換では、以下のパラメータを取得します。


| プロパティ | 型 | 説明 | 
| --- | --- | --- | 
| `isEnabled` | `boolean` | `true` の場合、フィルタで背景が置換されます。 | 
| `backgroundImageURL` | `string` | 背景画像の URL。フィルタでは、現在の画面の大きさに合わせて画像のサイズを動的に変更します。`https://...` などの文字列や、`data:image/jpeg;base64` などのデータ URL を使用できます。 | 
| `defaultColor` | `string` | `000000` や `FFFFFF` などの 16 進数のカラー文字列、または `black` や `white` などの文字列。画像 URL を指定しない場合、プロセッサでは `defaultColor` を背景として使用します。`defaultColor` を指定しない場合、プロセッサはデフォルトの黒になります。 | 

**実行時に設定を変更する**  
`videoFxProcessor.setEffectConfig` パラメータを使用して、実行時に `VideoFxProcessor` 設定を変更できます。次の例は、背景置換を有効にして、背景ぼかを無効にする方法を示しています。

**注記**  
一度に 1 つのタイプの背景置換のみを指定できます。値を `backgroundImageURL` または `defaultColor` のどちらかに指定してください。ただし、両方を指定することはできません。

```
videoFxConfig.backgroundBlur.isEnabled = false;
videoFxConfig.backgroundReplacement.isEnabled = true;
try {
  await videoFxProcessor.setEffectConfig(videoFxConfig);
} catch(error) {
  logger.error(error.toString())
}
```

`setEffectConfig` で例外をスローしても、以前の設定は引き続き有効です。`setEffectConfig` では、`VideoFxProcessor.create` で例外をスローした際と同様の条件の下で例外をスローします。

次の例は、動画の実行中に背景画像を変更する方法を示しています。

```
videoFxConfig.backgroundReplacement.backgroundImageURL = "https://my-domain.com/my-other-image.jpg";
try {
  await videoFxProcessor.setEffectConfig(videoFxConfig);
} catch(error) {
  logger.error(error.toString())
}
```

# Amazon Chime SDK の VideoTransformDevice オブジェクトの作成
<a name="create-video-transform"></a>

次の例は、`VideoFxProcessor` を含む `VideoTransformDevice` オブジェクトの作成方法を示しています。

```
// assuming that logger and videoInputDevice have already been set    
const videoTransformDevice = new DefaultVideoTransformDevice(
  logger,
  videoInputDevice,
  [videoFxProcessor]
);
```

# Amazon Chime SDK で動画入力を開始する
<a name="start-video-input"></a>

次の例は、`VideoTransformDevice` オブジェクトを使用して動画入力を開始する方法を示しています。

```
// assuming that meetingSession has already been created
await meetingSession.audioVideo.startVideoInput(videoTransformDevice);
meetingSession.audioVideo.start();
meetingSession.audioVideo.startLocalVideoTile();
```

# Amazon Chime SDK でリソース使用率を調整する
<a name="tuning"></a>

`VideoFxProcessor` を作成する際に、オプションの `processingBudgetPerFrame` パラメータを指定し、フィルタで使用する CPU と GPU の量を制御できます。

```
let videoFxProcessor: VideoFxProcessor | undefined = undefined;
const processingBudgetPerFrame = 50;
try {
  videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig, processingBudgetPerFrame);
} catch (error) {
  logger.warn(error.toString());
}
```

`VideoFxProcessor` ではフレームの処理に時間がかかります。所要時間は、デバイス、ブラウザ、およびブラウザやデバイスで他に実行されている処理によって異なります。プロセッサではバジェットの概念を利用して、各フレームの処理とレンダリングに使用する時間の目安を定めます。

処理時間はミリ秒単位です。バジェットの使い方の一例として、1 秒は 1000 ミリ秒です。15 フレーム/秒の動画キャプチャを目安に設定すると、合計のバジェットは 1000ms/15fps = 66 ミリ秒になります。上の例で示されているように、`processingBudgetPerFrame` パラメータに値 `50` を指定することで、その 50% (33 ミリ秒) のバジェットを設定できます。

次に、`VideoFxProcessor` では指定されたバジェット内でフレームの処理を試みます。処理がバジェットを超えて実行されると、プロセッサではバジェット内に収まるように画質を下げます。プロセッサで画質を最低限まで下げ続けると、その時点で画質の低下は停止されます。この処理時間は継続的に測定されるため、(別のアプリケーションが終了して CPU が解放されるなどして) 利用可能なリソースが増えると、プロセッサではバジェットに達するまで、または画質が最大限になるまで、再び画質を上げます。

`processingBudgetPerFrame` に対して値を指定しない場合、`VideoFxProcessor` はデフォルトの `50` になります。

# Amazon Chime SDK の背景フィルタの例
<a name="example-bg-filter"></a>

次の例は、フィルタを実装する方法を示しています。

```
import {
    VideoFxConfig,
    VideoFxTypeConversion,
    VideoTransformDevice,
    DefaultVideoTransformDevice,
    Logger,
    VideoFxProcessor,
    MeetingSession
} from 'amazon-chime-sdk-js';

let videoTransformDevice: VideoTransformDevice | undefined = undefined;
let videoFxProcessor: VideoFxProcessor | undefined = undefined;

const videoFxConfig: VideoFxConfig = {
    backgroundBlur: {
        isEnabled: false,
        strength: "medium"
    },
    backgroundReplacement: {
        isEnabled: false,
        backgroundImageURL: 'space.jpg',
        defaultColor: undefined,
    }
}

export const addEffectsToMeeting = async (videoInputDevice: MediaDeviceInfo, meetingSession: MeetingSession, logger: Logger): Promise<void> => {
    try {
        videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig);
    } catch (error) {
        logger.error(error.toString());
        return;
    }

    videoTransformDevice = new DefaultVideoTransformDevice(
        logger,
        videoInputDevice,
        [videoFxProcessor]
    );

    await meetingSession.audioVideo.startVideoInput(videoTransformDevice);
}

export const enableReplacement = async (logger: Logger) => {
    videoFxConfig.backgroundBlur.isEnabled = false;
    videoFxConfig.backgroundReplacement.isEnabled = true;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const enableBlur = async (logger: Logger) => {
    videoFxConfig.backgroundReplacement.isEnabled = false;
    videoFxConfig.backgroundBlur.isEnabled = true;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const pauseEffects = async (logger: Logger) => {
    videoFxConfig.backgroundReplacement.isEnabled = false;
    videoFxConfig.backgroundBlur.isEnabled = false;
    await updateVideoFxConfig(videoFxConfig, logger);

}

export const setReplacementImage = async (newImageUrl: string, logger: Logger) => {
    videoFxConfig.backgroundReplacement.backgroundImageURL = newImageUrl;
    videoFxConfig.backgroundReplacement.defaultColor = undefined;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const setReplacementDefaultColor = async (newHexColor: string, logger: Logger) => {
    videoFxConfig.backgroundReplacement.defaultColor = newHexColor;
    videoFxConfig.backgroundReplacement.backgroundImageURL = undefined;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const setBlurStrength = async (newStrength: number, logger: Logger) => {
    videoFxConfig.backgroundBlur.strength = VideoFxTypeConversion.useBackgroundBlurStrengthType(newStrength);
    await updateVideoFxConfig(videoFxConfig, logger);

}

export const updateVideoFxConfig = async (config: VideoFxConfig, logger: Logger) => {
    try {
        await videoFxProcessor.setEffectConfig(videoFxConfig);
    } catch (error) {
        logger.error(error.toString())
    }
}

export const turnOffEffects = () => {
    const innerDevice = await videoTransformDevice?.intrinsicDevice();
    await videoTransformDevice?.stop();
    videoTransformDevice = undefined;
    videoFxProcessor = undefined;
    await meetingSession.audioVideo.startVideoInput(innerDevice);
}
```