

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Mengintegrasikan filter latar belakang ke dalam aplikasi klien untuk Amazon Chime SDK
<a name="background-filters"></a>

Bagian ini menjelaskan cara memfilter latar belakang video secara terprogram dengan menggunakan blur latar belakang 2.0 dan penggantian latar belakang 2.0. Untuk menambahkan filter latar belakang ke aliran video, Anda membuat `VideoFxProcessor` yang berisi `VideoFxConfig` objek. Anda kemudian memasukkan prosesor itu ke dalam file`VideoTransformDevice`.

Prosesor filter latar belakang menggunakan model pembelajaran mesin TensorFlow Lite, Pekerja JavaScript Web, dan WebAssembly untuk menerapkan filter ke latar belakang setiap bingkai dalam aliran video. Aset ini diunduh saat runtime saat Anda membuat `VideoFxProcessor` file.

[Aplikasi demo browser GitHub](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/browser) menggunakan blur latar belakang baru dan filter pengganti. Untuk mencobanya, luncurkan demo dengan`npm run start`, bergabung dengan rapat, lalu klik kamera untuk mengaktifkan video. Buka menu **Apply Filter** (![\[Button with a circle and a downward arrow.\]](http://docs.aws.amazon.com/id_id/chime-sdk/latest/dg/images/blur-apply-filter-initial.png)) dan pilih salah satu opsi **Background Blur 2.0** atau **Background Replacement 2.0**.

**Topics**
+ [Tentang menggunakan filter latar belakang untuk Amazon Chime SDK](about-bg-filters.md)
+ [Menggunakan kebijakan keamanan konten dengan library klien Amazon Chime SDK untuk JavaScript](content-security.md)
+ [Menambahkan filter latar belakang ke aplikasi Anda untuk Amazon Chime SDK](add-filters.md)
+ [Contoh filter latar belakang untuk Amazon Chime SDK](example-bg-filter.md)

# Tentang menggunakan filter latar belakang untuk Amazon Chime SDK
<a name="about-bg-filters"></a>

Filter latar belakang dapat intensif CPU dan intensif GPU. Beberapa perangkat seluler dan laptop atau komputer desktop dengan spesifikasi lebih rendah mungkin tidak memiliki kekuatan untuk menjalankan filter bersama dengan beberapa aliran video.

## Dukungan SIMD untuk Amazon Chime SDK
<a name="simd-support"></a>

Filter latar belakang lebih efisien di lingkungan yang mendukung Instruksi Tunggal, Beberapa Data (SIMD). Filter menggunakan lebih sedikit CPU untuk tingkat kompleksitas tertentu saat Anda mengaktifkan SIMD. Perangkat bertenaga rendah yang menjalankan browser tanpa dukungan SIMD mungkin tidak menjalankan filter latar belakang.

## GL2 Dukungan web untuk Amazon Chime SDK
<a name="webgl2-support"></a>

`VideoFxProcessor`Objek membutuhkan browser yang mendukung Web GL2 untuk mengakses GPU pada perangkat klien.

## Pengiriman konten dan bandwidth untuk Amazon Chime SDK
<a name="delivery-caching-bandwidth"></a>

Jaringan pengiriman konten Amazon memuat machine-learning-model file untuk filter latar belakang saat runtime. Ini menyediakan distribusi global latensi rendah tanpa perlu menyajikan rangkaian file lengkap sebagai bagian dari aplikasi Anda. Namun, memuat file model dapat menambahkan latensi ke bagian aplikasi Anda. Untuk membantu mengurangi dampak itu, browser menyimpan file model tanpa batas waktu. Cache itu membuat beban berikutnya secara signifikan lebih cepat. Sebagai praktik terbaik, periksa browser yang didukung, lalu buat sumber daya filter latar belakang saat pengguna mungkin tidak melihat latensi apa pun. Misalnya, Anda dapat mengunduh file model saat pengguna menunggu di lobi, atau saat mereka menggunakan pemilih perangkat.

Aplikasi Anda harus terhubung ke yang berikut:
+ Layanan media Amazon Chime SDK.
+ Amazon CloudFront melalui HTTPS (port 443).

Semua permintaan adalah untuk subdomain dari. `sdkassets.chime.aws` Aplikasi yang tidak dapat mengakses jaringan pengiriman konten atau tidak menyertakan domain yang benar dalam [kebijakan keamanan konten](content-security.md) mereka akan gagal dalam pemeriksaan dukungan mereka dan tidak dapat menggunakan filter.

Untuk informasi selengkapnya tentang CloudFront rentang alamat IP, lihat [Lokasi dan rentang alamat IP server CloudFront edge](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html) di *Panduan CloudFront Pengembang Amazon*.

## Kompatibilitas browser untuk Amazon Chime SDK
<a name="filters-browser-compat"></a>

Tabel berikut mencantumkan browser dan versi yang mendukung filter latar belakang.


| Peramban | Versi minimum yang didukung | 
| --- | --- | 
| Firefox | 76\$1 | 
| Browser dan lingkungan berbasis Chromium, termasuk Edge dan Electron | 78\$1 | 
| Android Chrome | 110\$1 | 
| Safari di macOS | 16.3\$1 | 
| Safari di iOS (iPhone, iPad) | 16.x | 
| Chrome di iOS | 110.0.0.xx | 
| Firefox di iOS (iPhone iPad) | 16.x | 

Versi 3.14 `VideoFxProcessor` objek mendukung Android. Untuk dukungan perangkat Android pada versi sebelum 3.14, gunakan `BackgroundBlurVideoFrameProcessor` dan `BackgroundReplacementVideoFrameProcessor` objek. Untuk informasi lebih lanjut tentang menggunakannya, lihat [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)halaman di GitHub.

# Menggunakan kebijakan keamanan konten dengan library klien Amazon Chime SDK untuk JavaScript
<a name="content-security"></a>

Aplikasi web modern menggunakan kebijakan keamanan konten untuk melindungi pengguna dari kelas serangan tertentu. Aplikasi yang menggunakan `VideoFxProcessor` harus menyertakan arahan kebijakan yang dijelaskan dalam bagian ini. Arahan memberikan Amazon Chime SDK akses ke sumber daya yang dibutuhkan saat runtime.

**Topics**
+ [Arahan kebijakan keamanan konten yang diperlukan](#required-csp)
+ [Contoh kebijakan keamanan konten](#example-csp)
+ [Kesalahan kebijakan keamanan konten](#csp-errors)
+ [Kebijakan keamanan konten pembuka lintas asal](#cross-origin-policy)

## Arahan kebijakan keamanan konten yang diperlukan
<a name="required-csp"></a>

Anda harus menggunakan arahan kebijakan keamanan konten berikut.
+ Untuk `script-src:` menambahkan `blob: https://*.sdkassets.chime.aws` untuk memuat kode pemrosesan video, dan `wasm-unsafe-eval` untuk memungkinkan menjalankannya. 
+ Untuk `script-src-elem:` tambahkan `blob:` `https://*.sdkassets.chime.aws` untuk memuat kode pemrosesan video dari sumbernya.
+ Untuk `worker-src:` add `blob: https://*.sdkassets.chime.aws` to load worker JavaScript di seluruh asal.

Jika Anda menghilangkan salah satu entri ini, atau jika Anda menggunakan header HTTP dan `http-equiv` meta tag untuk menentukan kebijakan dan secara tidak sengaja mengecualikan salah satu dari ini dengan persimpangan, maka filter latar belakang tidak akan dapat diinisialisasi. Filter tampaknya tidak didukung, atau menciptakan prosesor bingkai video tanpa operasi. Anda akan melihat kesalahan di konsol browser Anda seperti:

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

### Arahan kebijakan skrip yang diperlukan
<a name="required-script"></a>

Agar berfungsi, `VideoFxProcessor` kelas harus memuat JavaScript kelas saat runtime dari jaringan pengiriman konten Amazon. Kelas-kelas ini menggunakan Web GL2 untuk mengimplementasikan post-processing untuk video. Untuk mengizinkan aplikasi mengambil dan menjalankan kelas-kelas ini, Anda harus menyertakan arahan berikut:
+ `script-src 'self' blob: https://*.sdkassets.chime.aws`
+ `script-src-elem 'self' blob: https://*.sdkassets.chime.aws`

**catatan**  
Untuk dukungan penuh pada Safari dan Firefox, Anda harus menggunakan `script-src` dan `script-src-elem` arahan.

### Arahan kebijakan pekerja
<a name="required-worker"></a>

`VideoFxProcessor`Memuat JavaScript kelas sebagai gumpalan untuk menjalankan thread pekerja web. Thread menggunakan model pembelajaran mesin untuk memproses video. Untuk memberikan akses aplikasi untuk mengambil dan menggunakan pekerja ini, sertakan arahan berikut:

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

### WebAssembly kebijakan
<a name="required-web-assembly"></a>

`VideoFxProcessor`Memuat modul WebAssembly (WASM) dari jaringan pengiriman konten milik Amazon yang sama. Di Chrome 95 dan yang lebih baru, modul WASM yang dikompilasi tidak dapat dilewatkan melintasi beberapa batas modul. Untuk memungkinkan mengambil dan membuat instance modul-modul ini, sertakan `'wasm-unsafe-eval'` dalam direktif. `script-src`

Untuk informasi selengkapnya tentang dokumentasi Kebijakan Keamanan Konten WebAssembly, lihat [Kebijakan Keamanan WebAssembly Konten](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md) di GitHub.

### (Opsional) Arahan kebijakan gambar latar belakang
<a name="optional-directives"></a>

Untuk menggunakan gambar latar belakang yang dimuat secara dinamis dengan filter pengganti latar belakang, `VideoFxProcessor` harus memiliki akses ke gambar. Untuk melakukan itu, sertakan `connect-src` arahan dengan domain yang menghosting gambar.

## Contoh kebijakan keamanan konten
<a name="example-csp"></a>

Contoh kebijakan berikut memungkinkan Anda untuk menggunakan`VideoFxProcessor`. `connect-src`Definisi tersebut tidak spesifik untuk a`VideoFxProcessor`. Sebaliknya, mereka terkait dengan audio dan video dari rapat 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>
```

## Kesalahan kebijakan keamanan konten
<a name="csp-errors"></a>

Jika Anda menghilangkan salah satu arahan yang diperlukan, tidak `VideoFxProcessor` akan membuat instance dan tidak akan didukung. Dalam hal ini, kesalahan berikut (atau serupa) muncul di konsol browser:

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

## Kebijakan keamanan konten pembuka lintas asal
<a name="cross-origin-policy"></a>

Untuk membatasi penggunaan memori, modul lebih suka menggunakan a `SharedArrayBuffer` untuk pemrosesan. Namun, ini mengharuskan Anda mengkonfigurasi keamanan web dengan hati-hati. Anda harus mengatur header berikut saat menyajikan HTML aplikasi Anda:

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

Server harus mengatur ini karena mereka tidak memiliki ekuivalen meta-tag. Jika Anda tidak mengatur header ini, filter latar belakang mungkin menggunakan sedikit lebih banyak RAM. 

Filter latar belakang dapat intensif CPU dan intensif GPU. Beberapa perangkat seluler dan laptop atau komputer desktop dengan spesifikasi lebih rendah mungkin tidak memiliki kekuatan untuk menjalankan filter bersama dengan beberapa aliran video.

# Menambahkan filter latar belakang ke aplikasi Anda untuk Amazon Chime SDK
<a name="add-filters"></a>

Proses menambahkan filter latar belakang mengikuti langkah-langkah luas ini:
+ Periksa browser yang didukung.
+ Buat `VideoFxConfig` objek dengan konfigurasi yang ingin Anda gunakan.
+ Gunakan objek konfigurasi untuk membuat `VideoFxProcessor` objek.
+ Sertakan `VideoFxProcessor` objek dalam a`VideoTransformDevice`.
+ Gunakan `VideoTransformDevice` untuk memulai input video.

**catatan**  
Untuk menyelesaikan langkah-langkah tersebut, Anda harus terlebih dahulu:  
Buat a`Logger`.
Pilih perangkat video kelas`MediaDeviceInfo`.
Berhasil bergabung dengan a`MeetingSession`.

Langkah-langkah di bagian berikut menjelaskan cara menyelesaikan proses.

**Topics**
+ [Memeriksa dukungan sebelum menawarkan filter untuk Amazon Chime SDK](support-check.md)
+ [Membuat VideoFxConfig objek untuk Amazon Chime SDK](create-videofxconfig.md)
+ [Membuat VideoFxProcessor objek untuk Amazon Chime SDK](create-videofxprocessor.md)
+ [Mengonfigurasi VideoFxProcessor objek untuk Amazon Chime SDK](configure-videofxprocessor.md)
+ [Membuat VideoTransformDevice objek untuk Amazon Chime SDK](create-video-transform.md)
+ [Memulai input video untuk Amazon Chime SDK](start-video-input.md)
+ [Tuning pemanfaatan sumber daya untuk Amazon Chime SDK](tuning.md)

# Memeriksa dukungan sebelum menawarkan filter untuk Amazon Chime SDK
<a name="support-check"></a>

Amazon Chime SDK menyediakan metode statis asinkron yang memeriksa browser yang didukung dan mencoba mengunduh aset yang diperlukan. Namun, itu tidak memeriksa kinerja perangkat. Sebagai praktik terbaik, selalu pastikan browser dan perangkat pengguna dapat mendukung filter sebelum Anda menawarkan filter.

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

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

# Membuat VideoFxConfig objek untuk Amazon Chime SDK
<a name="create-videofxconfig"></a>

Anda dapat menentukan konfigurasi untuk `backgroundBlur` dan `backgroundReplacement` dalam objek yang sama. Namun, Anda tidak dapat mengatur `isEnabled` `true` untuk kedua filter secara bersamaan. Itu konfigurasi yang tidak valid.

`VideoFxConfig`Kelas tidak melakukan validasi sendiri. Validasi terjadi pada langkah berikutnya.

Contoh berikut menunjukkan valid`VideoFxConfig`.

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

Tabel berikut mencantumkan `VideoFxProcessor` properti yang dapat Anda tentukan dalam `VideoFxConfig` objek.

**Properti filter blur latar belakang**


| Properti | Tipe | Deskripsi | 
| --- | --- | --- | 
| `isEnabled` | `boolean` |  Saat`true`, filter mengaburkan latar belakang. | 
| `strength` | `string` | Menentukan tingkat kekaburan. Nilai yang valid: `low` \$1 `medium` \$1`high`. | 

**Properti filter pengganti latar belakang**


| Properti | Tipe | Deskripsi | 
| --- | --- | --- | 
| `isEnabled` | `boolean` |  Kapan`true`, filter menggantikan latar belakang\$1. | 
| `backgroundImageURL` | `string` | URL dari gambar latar belakang. Filter mengubah ukuran gambar secara dinamis ke dimensi layar saat ini. Anda dapat menggunakan string seperti `https://...` atau URL data seperti`data:image/jpeg;base64`. | 
| `defaultColor` | `string` | String warna hex seperti `000000` atau`FFFFFF`, atau string seperti `black` atau`white`. Jika Anda tidak menentukan URL gambar, prosesor menggunakan `defaultColor` sebagai latar belakang. Jika Anda tidak menentukan a`defaultColor`, prosesor default menjadi hitam. | 

# Membuat VideoFxProcessor objek untuk Amazon Chime SDK
<a name="create-videofxprocessor"></a>

Saat membuat `VideoFxProcessor` objek, AWS server mengunduh aset runtime, atau cache browser memuat aset. Jika konfigurasi jaringan atau CSP mencegah akses ke aset, `VideoFx.create` operasi akan memberikan pengecualian. Hasilnya VideoFxProcessor dikonfigurasi sebagai prosesor tanpa operasi, yang tidak akan memengaruhi aliran video.

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

`VideoFxProcessor.create`juga mencoba memuat gambar dari`backgroundReplacement.backgroundImageURL`. Jika gambar gagal dimuat, prosesor melempar pengecualian. Prosesor juga memberikan pengecualian karena alasan lain, seperti konfigurasi yang tidak valid, browser yang tidak didukung, atau perangkat keras yang kurang bertenaga. 

# Mengonfigurasi VideoFxProcessor objek untuk Amazon Chime SDK
<a name="configure-videofxprocessor"></a>

Tabel berikut mencantumkan `VideoFxProcessor` properti yang dapat Anda konfigurasi. Contoh di bawah tabel menunjukkan konfigurasi runtime yang khas.

**Latar belakang kabur**  
Background blur mengambil properti berikut:


| Properti | Tipe | Deskripsi | 
| --- | --- | --- | 
| `isEnabled` | `boolean` | Saat`true`, filter mengaburkan latar belakang. | 
| `strength` | `string` | Menentukan tingkat kekaburan. Nilai yang valid: `low` \$1 `medium` \$1 `high`. | 

**Penggantian latar belakang**  
Penggantian latar belakang mengambil parameter berikut:


| Properti | Tipe | Deskripsi | 
| --- | --- | --- | 
| `isEnabled` | `boolean` | Kapan`true`, filter menggantikan latar belakang. | 
| `backgroundImageURL` | `string` | URL dari gambar latar belakang. Filter mengubah ukuran gambar secara dinamis ke dimensi layar saat ini. Anda dapat menggunakan string seperti `https://...` atau URL data seperti`data:image/jpeg;base64`. | 
| `defaultColor` | `string` | String warna hex seperti `000000` atau`FFFFFF`, atau string seperti `black` atau`white`. Jika Anda tidak menentukan URL gambar, prosesor menggunakan `defaultColor` sebagai latar belakang. Jika Anda tidak menentukan prosesor default `defaultColor` ke hitam. | 

**Mengubah konfigurasi saat runtime**  
Anda dapat mengubah `VideoFxProcessor` konfigurasi saat runtime dengan menggunakan `videoFxProcessor.setEffectConfig` parameter. Contoh berikut menunjukkan cara mengaktifkan penggantian latar belakang dan menonaktifkan blur latar belakang.

**catatan**  
Anda hanya dapat menentukan satu jenis penggantian latar belakang pada satu waktu. Tentukan nilai untuk `backgroundImageURL` atau`defaultColor`, tetapi tidak keduanya.

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

Jika `setEffectConfig` melempar pengecualian, konfigurasi sebelumnya tetap berlaku. `setEffectConfig`melempar pengecualian dalam kondisi yang mirip dengan yang menyebabkan `VideoFxProcessor.create` melempar pengecualian.

Contoh berikut menunjukkan cara mengubah gambar latar belakang saat video berjalan.

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

# Membuat VideoTransformDevice objek untuk Amazon Chime SDK
<a name="create-video-transform"></a>

Contoh berikut menunjukkan cara membuat `VideoTransformDevice` objek yang berisi`VideoFxProcessor`.

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

# Memulai input video untuk Amazon Chime SDK
<a name="start-video-input"></a>

Contoh berikut menunjukkan bagaimana menggunakan `VideoTransformDevice` objek untuk memulai input video. 

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

# Tuning pemanfaatan sumber daya untuk Amazon Chime SDK
<a name="tuning"></a>

Saat membuat`VideoFxProcessor`, Anda dapat menyediakan `processingBudgetPerFrame` parameter opsional dan mengontrol jumlah CPU dan GPU yang digunakan filter.

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

`VideoFxProcessor`Membutuhkan waktu untuk memproses bingkai. Jumlah waktu tergantung pada perangkat, browser, dan apa lagi yang berjalan di browser atau di perangkat. Prosesor menggunakan konsep *anggaran* untuk menargetkan jumlah waktu yang digunakan untuk memproses dan merender setiap frame.

Waktu pemrosesan dalam milidetik. Sebagai contoh cara menggunakan anggaran, 1 detik memiliki 1000ms. Menargetkan 15 frame per detik hasil pengambilan video dalam total anggaran 1000ms/15fps = 66ms. Anda dapat menetapkan anggaran 50% dari itu, atau 33ms, dengan memberikan nilai `50` dalam `processingBudgetPerFrame` parameter, seperti yang ditunjukkan pada contoh di atas.

`VideoFxProcessor`Kemudian mencoba memproses bingkai dalam anggaran yang ditentukan. Jika pemrosesan melebihi anggaran, prosesor mengurangi kualitas visual agar tetap sesuai anggaran. Prosesor terus mengurangi kualitas visual seminimal mungkin, di mana ia berhenti berkurang. Durasi pemrosesan ini diukur terus menerus, jadi jika lebih banyak sumber daya tersedia, seperti penutupan aplikasi lain dan membebaskan CPU, prosesor meningkatkan kualitas visual lagi hingga mencapai anggaran, atau kualitas visual maksimum tercapai.

Jika Anda tidak memberikan nilai ke`processingBudgetPerFrame`, `VideoFxProcessor` defaultnya adalah. `50`

# Contoh filter latar belakang untuk Amazon Chime SDK
<a name="example-bg-filter"></a>

Contoh berikut menunjukkan bagaimana menerapkan filter.

```
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);
}
```