Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Menambahkan filter latar belakang ke aplikasi Anda untuk Amazon Chime SDK
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
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
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
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
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
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
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
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`