Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Menggunakan library klien Amazon Chime SDK untuk JavaScript
Panduan ini memberikan ikhtisar konseptual pustaka klien Amazon Chime SDK JavaScript untuk, dan kode contoh untuk komponen server dan klien penting.
**Topics**
+ [Memahami komponen aplikasi Amazon Chime SDK](components.md)
+ [Memahami konsep kunci dari library klien Amazon Chime SDK untuk JavaScript](key-concepts.md)
+ [Memahami arsitektur layanan untuk Amazon Chime SDK](service-architecture-java.md)
+ [Memahami arsitektur aplikasi web untuk Amazon Chime SDK](web-architecture.md)
+ [Memahami arsitektur aplikasi server untuk Amazon Chime SDK](server-app-architecture.md)
+ [Memahami bidang kontrol media Amazon Chime SDK](media-control-plane-java.md)
+ [Memahami bidang data media Amazon Chime SDK](media-data-plane.md)
+ [Memahami arsitektur komponen aplikasi web untuk Amazon Chime SDK](web-app-comp-arch-java.md)
+ [Membangun aplikasi server untuk Amazon Chime SDK](build-server-app.md)
+ [Membangun aplikasi klien untuk Amazon Chime SDK](build-client-app.md)
+ [Mengintegrasikan filter latar belakang ke dalam aplikasi klien untuk Amazon Chime SDK](background-filters.md)
# Memahami komponen aplikasi Amazon Chime SDK
Untuk menyematkan kemampuan audio, video, dan berbagi layar real-time ke dalam aplikasi Amazon Chime SDK, Anda menggunakan komponen berikut:
+ **Pustaka klien Amazon Chime SDK untuk JavaScript, SDK sisi klien** yang Anda integrasikan ke browser atau aplikasi web Electron. Anda melakukannya dengan menambahkan [paket Amazon Chime SDK untuk JavaScript NPM](https://www.npmjs.com/package/amazon-chime-sdk-js) sebagai dependensi. Paket ini memanfaatkan [https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices)dan [https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) APIs untuk bergabung rapat dan bertukar audio, video, dan untuk berbagi konten dengan peserta lain. Ini memberi Anda permukaan kontrol untuk mengelola berbagai jenis media dan kemampuan untuk mengikat sumber daya tersebut ke antarmuka pengguna aplikasi Anda.
+ ** AWS SDK**, Amazon Chime SDK API yang digunakan aplikasi server Anda untuk mengautentikasi dan mengotorisasi permintaan rapat dari aplikasi web Anda. AWS SDK memberi Anda tindakan API seperti [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html)dan [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html)untuk membuat serta mengelola sumber daya rapat dan peserta.
Seperti AWS sumber daya lainnya, layanan AWS Identity and Access Management (IAM) mengonfigurasi akses ke tindakan ini. AWS SDK tersedia dalam [beberapa bahasa pemrograman](https://aws.amazon.com/tools/) dan menghilangkan kerumitan dari memanggil AWS SDK Chime API dari aplikasi server Anda. Jika aplikasi Anda saat ini tidak menggunakan aplikasi server, Anda dapat memulai dengan CloudFormation template yang disertakan dalam folder [demos/tanpa](https://github.com/aws/amazon-chime-sdk-js/tree/master/demos/serverless) server. Demo tersebut menunjukkan cara membuat aplikasi tanpa server AWS Lambda berbasis yang menggunakan AWS SDK Chime API.
+ **Layanan media Amazon Chime SDK** menyediakan audio, video, dan pensinyalan yang digunakan oleh library klien Amazon Chime SDK untuk terhubung ke rapat. JavaScript Layanan media tersedia secara global untuk mendukung pencampuran audio, penerusan video, dan traversal NAT menggunakan relay TURN. Tim layanan Amazon Chime menyebarkan, memantau, dan mengelola layanan ini. Layanan media di-host dalam satu rentang alamat IP — 99.77.128.0/18 — dan menggunakan port TCP/443 dan UDP/3478 untuk menyederhanakan konfigurasi firewall untuk administrator TI. Akhirnya, layanan ini memanfaatkan [Infrastruktur Cloud AWS Global](https://aws.amazon.com/about-aws/global-infrastructure/).
# Memahami konsep kunci dari library klien Amazon Chime SDK untuk JavaScript
Untuk sepenuhnya memahami cara membuat dan mengelola rapat dan pengguna, Anda perlu memahami konsep-konsep ini:
**[https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Meeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Meeting.html)**— Sesi media multi-partai. Setiap rapat memiliki pengenal rapat yang unik. Anda dapat membuat rapat di salah satu AWS Wilayah yang didukung. Saat Anda membuat rapat, daftar Media URLs akan ditampilkan. Itu adalah bagian penting dari data yang diperlukan untuk bergabung dalam rapat, dan Anda perlu menyebarluaskan data itu ke semua pengguna yang mencoba bergabung dalam rapat.
**[https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Attendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Attendee.html)**— Seorang pengguna yang mencoba bergabung dengan sesi media multi-pihak. Setiap peserta memiliki pengenal unik, pengenal pengguna eksternal yang dapat diteruskan untuk memetakan peserta ke pengguna di sistem pengembang, ditambah token gabungan yang ditandatangani yang memberi mereka akses ke rapat.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/meetingsession.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/meetingsession.html)**dan [https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html](https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html)— Objek root pustaka klien Amazon Chime SDK untuk JavaScript itu mewakili sesi setiap pengguna dalam rapat. Aplikasi web dimulai dengan membuat instance MeetingSession dan mengonfigurasinya dengan informasi rapat dan peserta yang tepat.
**[https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html](https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html)**— Menyimpan data rapat dan peserta yang diperlukan untuk bergabung dengan sesi rapat. Data itu adalah respons dari panggilan `CreateAttendee` API `CreateMeeting` dan yang dilakukan oleh aplikasi server. Aplikasi server meneruskan data ini ke aplikasi web, yang menggunakannya untuk membuat instance. `MeetingSession`
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/devicecontroller.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/devicecontroller.html)**(DefaultDeviceController)— Digunakan untuk menghitung daftar perangkat audio dan video yang tersedia pada sistem pengguna. Anda juga dapat menggunakan pengontrol perangkat selama rapat untuk beralih perangkat yang aktif.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html)**(DefaultAudioVideoFacade)— Antarmuka kunci yang mendukung rapat. Ini menyediakan APIs yang memulai, mengontrol, dan mengakhiri rapat. Ini juga menyediakan APIs untuk mendengarkan peristiwa penting yang mendorong perubahan pengalaman pengguna, seperti daftar peserta, dengan melacak pengguna yang bergabung atau pergi, diredam atau tidak dimatikan, berbicara secara aktif, atau memiliki konektivitas yang buruk. Anda juga dapat menggunakannya APIs untuk mengikat elemen HTML kontrol audio ke output audio rapat dan memutarnya melalui perangkat output audio yang dipilih.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/activespeakerdetectorfacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/activespeakerdetectorfacade.html)**(DefaultActiveSpeakerDetector)— API yang berlangganan acara pembicara aktif. Secara berkala mengembalikan daftar peserta yang diurutkan berdasarkan volume mikrofon mereka dari waktu ke waktu. Anda dapat mengganti dan mengubah kebijakan pembicara aktif sesuai kebutuhan.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/contentsharecontroller.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/contentsharecontroller.html)**(DefaultContentShareController)— APIs itu start-stop dan pause-unpause berbagi konten. Ini juga menyediakan APIs untuk mendengarkan peristiwa siklus hidup untuk melacak status berbagi konten.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/logger.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/logger.html)**— Antarmuka yang digunakan untuk memanfaatkan log konsol, atau meneruskan objek logger untuk mengganti implementasi logging saat ini dan mendapatkan tingkat log yang berbeda dari Amazon Chime SDK.
# Memahami arsitektur layanan untuk Amazon Chime SDK
Diagram arsitektur tingkat tinggi ini menunjukkan bagaimana komponen yang tercantum dalam [Memahami konsep kunci dari library klien Amazon Chime SDK untuk JavaScript](key-concepts.md) berinteraksi dan bekerja dengan AWS layanan lain:
![\[Diagram yang menunjukkan bagaimana library klien Amazon Chime SDK untuk JavaScript berinteraksi dengan layanan lain. AWS\]](http://docs.aws.amazon.com/id_id/chime-sdk/latest/dg/images/architecture-1.png)
# Memahami arsitektur aplikasi web untuk Amazon Chime SDK
Anda dapat melayani aplikasi web Anda dari jaringan pengiriman konten, dan memuatnya saat pengguna menavigasi ke URL di browser. Anda juga dapat membungkusnya dalam aplikasi Electron platform-native yang diinstal pengguna di mesin mereka.
Untuk bergabung dengan rapat baru atau yang sudah ada, aplikasi web membuat permintaan REST ke aplikasi server. Biasanya, permintaan membawa token otorisasi atau cookie yang digunakan aplikasi Anda untuk permintaan API lainnya. Anda juga dapat mendesain klien web Anda untuk mengirim petunjuk wilayah ke server, yang dapat digunakan saat memberikan MediaRegion parameter. [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html) Aplikasi web Anda dapat menentukan wilayah layanan media terdekat dengan membuat permintaan HTTP GET ke titik akhir [https://nearest-media-region.l.chime.aws](https://nearest-media-region.l.chime.aws/).
# Memahami arsitektur aplikasi server untuk Amazon Chime SDK
Ketika server menerima permintaan dari klien, pertama-tama memastikan bahwa pengguna berwenang untuk memulai atau bergabung dengan rapat. Server menggunakan AWS SDK tertanam dalam bahasa pilihan untuk membuat [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html)dan panggilan [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html)API ke bidang kontrol media global. Itu dilakukan untuk membuat pertemuan dan peserta di salah satu Daerah yang didukung AWS . Untuk membuat permintaan ini, layanan membutuhkan pengguna atau peran IAM yang sesuai. Pada gilirannya, pengguna dan peran IAM memerlukan kebijakan [ AmazonChimeSDK](https://docs.aws.amazon.com/chime-sdk/latest/ag/security_iam_id-based-policy-examples.html).
# Memahami bidang kontrol media Amazon Chime SDK
Bidang kontrol media Amazon Chime SDK bersifat global — di-host dari us-east-1 — dan melayani dan [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html) APIs digunakan untuk membuat dan mengelola sumber daya rapat [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html)dan peserta di seluruh bidang data. Ini memvalidasi kredensi dan memastikan sesi di-bootstrap di bidang data di wilayah yang diminta.
Bidang kontrol juga memicu [Amazon Chime SDK](https://docs.aws.amazon.com/chime-sdk/latest/ag/automating-chime-with-cloudwatch-events.html) Events ke mekanisme notifikasi seperti Amazon EventBridge, Amazon Simple Queueing Service (SQS) atau Amazon Simple Notification Service (SNS). AWS terus-menerus memonitor layanan, dan mereka menskalakan secara otomatis saat beban meningkat. APIs Ini dirancang untuk hanya menerima pengidentifikasi pengguna buram dan bukan data pengguna, sehingga mereka mematuhi persyaratan kedaulatan data.
# Memahami bidang data media Amazon Chime SDK
Anda dapat menggunakan wilayah bidang kontrol apa pun untuk membuat rapat di semua AWS Wilayah. Bidang data media tersedia di semua AWS Wilayah. Ini mencakup layanan pencampuran audio, layanan penerusan video, layanan TURN dan layanan interoperabilitas Session Initiation Protocol (SIP). Layanan terus dipantau dan dirancang untuk skala secara otomatis saat beban meningkat. Untuk mempelajari lebih lanjut, lihat [Amazon Chime SDK](https://docs.aws.amazon.com/chime-sdk/latest/dg/chime-sdk-meetings-regions.html) Media Regions.
Untuk daftar Wilayah dan Availability Zone saat ini, lihat [Wilayah dan Availability Zone](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/).
# Memahami arsitektur komponen aplikasi web untuk Amazon Chime SDK
Diagram ini menunjukkan arsitektur aplikasi klien web Amazon Chime SDK:
![\[Diagram yang menunjukkan arsitektur aplikasi web Amazon Chime SDK.\]](http://docs.aws.amazon.com/id_id/chime-sdk/latest/dg/images/architecture-2.png)
Aplikasi web biasanya terdiri dari lapisan antarmuka pengguna HTML dan CSS yang didukung oleh lapisan logika bisnis aplikasi. Anda dapat membangun aplikasi web dalam HTML biasa dan JavaScript, atau Anda dapat menggunakan kerangka kerja UI seperti React dan Angular.
Lapisan logika bisnis aplikasi web berinteraksi dengan pustaka klien Amazon Chime SDK JavaScript untuk melalui satu set. JavaScript APIs [https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html](https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html)Ini adalah objek root SDK. Saat membangun aplikasi server yang Anda gunakan [https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html](https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html)untuk menginisialisasi dengan informasi rapat dan peserta dan bergabung dengan rapat. Ini DefaultMeetingSession juga mengekspos [https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html), yang memungkinkan lapisan logika bisnis untuk mengambil tindakan, dan untuk mendaftarkan callback yang memperbarui antarmuka pengguna ketika keadaan dasar sesi berubah.
Pustaka klien Amazon Chime SDK JavaScript adalah sumber terbuka dan memiliki serangkaian komponen yang dapat disesuaikan yang dapat Anda ganti sesuai kebutuhan. Implementasi default memungkinkan Anda untuk membangun aplikasi komunikasi terpadu lengkap seperti aplikasi MeetingV2 demo kami. Pustaka klien Amazon Chime SDK untuk JavaScript bergantung pada dua pustaka lainnya:
+ [Browser-Detect](https://www.npmjs.com/package/browser-detect) untuk mengidentifikasi jenis dan kemampuan browser.
+ [ ProtoBufJs ](https://www.npmjs.com/package/protobufjs)untuk menyandikan dan memecahkan kode perintah pensinyalan dan tanggapan yang diperlukan untuk bergabung dengan sesi media.
Amazon Chime SDK juga bergantung pada browser atau aplikasi Electron untuk menyediakan Manajemen Perangkat dan APIs implementasi WebRTC untuk sesi audio-video.
Pustaka klien SDK Amazon Chime sumber untuk JavaScript ada di TypeScript, tetapi Anda dapat menggunakan TypeScript kompiler untuk mengompilasinya. JavaScript Anda kemudian dapat menggabungkannya menggunakan bundler modul seperti Webpack. Sebagai praktik terbaik, instal pustaka klien Amazon Chime SDK JavaScript dari registri NPM, lalu gunakan di lingkungan CommonJS. AWS [juga menyediakan skrip rollup untuk menggabungkan Amazon Chime SDK ke dalam file JS yang diperkecil jika Anda ingin memasukkannya secara langsung sebagai tag skrip dalam HTML Anda.](https://github.com/aws/amazon-chime-sdk-js/tree/master/demos/singlejs)
# Membangun aplikasi server untuk Amazon Chime SDK
Informasi di bagian berikut menjelaskan cara membuat aplikasi server Amazon Chime SDK. Setiap bagian memberikan contoh kode sesuai kebutuhan, dan Anda dapat menyesuaikan kode itu untuk memenuhi kebutuhan Anda.
**Topics**
+ [Membuat pengguna atau peran IAM untuk Amazon Chime SDK](create-iam-users-roles.md)
+ [Mengonfigurasi AWS SDK untuk memanggil Amazon Chime APIs SDK](invoke-apis.md)
+ [Membuat rapat untuk Amazon Chime SDK](create-meeting.md)
+ [Membuat peserta untuk Amazon Chime SDK](create-attendee.md)
+ [Mengirim respons ke klien untuk Amazon Chime SDK](send-response-to-client.md)
# Membuat pengguna atau peran IAM untuk Amazon Chime SDK
Anda membuat pengguna sebagai pengguna IAM, atau dalam peran yang sesuai dengan kasus penggunaan Anda. Anda kemudian menetapkan kebijakan berikut kepada mereka. Ini memastikan bahwa Anda memiliki izin yang diperlukan untuk AWS SDK yang disematkan di aplikasi server Anda. Pada gilirannya, itu memungkinkan Anda untuk melakukan operasi siklus hidup pada sumber daya rapat dan peserta.
```
// Policy ARN: arn:aws:iam::aws:policy/AmazonChimeSDK
// Description: Provides access to Amazon Chime SDK operations
{
"Version": "2012-10-17",
"Statement": [
{
"Action": [
"chime:CreateMeeting",
"chime:DeleteMeeting",
"chime:GetMeeting",
"chime:ListMeetings",
"chime:CreateAttendee",
"chime:BatchCreateAttendee",
"chime:DeleteAttendee",
"chime:GetAttendee",
"chime:ListAttendees"
],
"Effect": "Allow",
"Resource": "*"
}
]}
```
# Mengonfigurasi AWS SDK untuk memanggil Amazon Chime APIs SDK
Contoh kode ini menunjukkan cara meneruskan kredensyal ke AWS SDK, dan menetapkan wilayah dan titik akhir.
```
AWS.config.credentials = new AWS.Credentials(accessKeyId, secretAccessKey, null);
const chime = new AWS.Chime({ region: 'us-east-1' });
chime.endpoint = new AWS.Endpoint('https://service.chime.aws.amazon.com/console');
```
# Membuat rapat untuk Amazon Chime SDK
Panggilan [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html)API menerima parameter yang diperlukan, yaitu`ClientRequestToken`, yang memungkinkan pengembang untuk meneruskan konteks keunikan. Ini juga menerima parameter opsional seperti`MediaRegion`, yang mewakili wilayah bidang data layanan media untuk dipilih untuk rapat, yang `MeetingHostId` digunakan untuk meneruskan pengenal buram untuk mewakili host rapat, jika berlaku, dan `NotificationsConfiguration` untuk menerima peristiwa siklus hidup rapat. Secara default, Amazon EventBridge mengirimkan acara. Secara opsional, Anda juga dapat menerima acara dengan melewati antrian SQS ARN atau SNS Topic ARN di. `NotificationsConfiguration` API Mengembalikan objek Rapat yang berisi unik`MeetingId`, ditambah objek `MediaRegion` dan `MediaPlacement` objek dengan satu set media URLs.
```
meeting = await chime.createMeeting({
ClientRequestToken: clientRequestToken,
MediaRegion: mediaRegion,
MeetingHostId: meetingHostId,
NotificationsConfiguration: {
SqsQueueArn: sqsQueueArn,
SnsTopicArn: snsTopicArn
}
}).promise();
```
# Membuat peserta untuk Amazon Chime SDK
Setelah membuat rapat, Anda membuat sumber daya peserta yang mewakili setiap pengguna yang mencoba bergabung dengan sesi media. [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html)API mengambil yang berikut:
+ Rapat tempat Anda menambahkan pengguna. `MeetingId`
+ An`ExternalUserId`, yang dapat berupa pengidentifikasi pengguna buram dari sistem identitas Anda.
Misalnya, jika Anda menggunakan Active Directory (AD), ini bisa menjadi ID objek pengguna di AD. `ExternalUserId`Ini berharga karena diteruskan kembali ke aplikasi klien ketika mereka menerima acara peserta dari klien. SDKs Hal ini memungkinkan aplikasi klien untuk mengetahui siapa yang bergabung atau meninggalkan rapat dan mengambil informasi tambahan dari aplikasi server tentang pengguna tersebut, seperti nama tampilan, email, atau gambar.
Panggilan ke `CreateAttendee` API menghasilkan `Attendee` objek. Objek berisi unik `AttendeeId` yang dihasilkan oleh layanan, `ExternalUserId` yang diteruskan, dan tanda tangan `JoinToken` yang memungkinkan peserta mengakses rapat selama durasinya, atau hingga [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_DeleteAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_DeleteAttendee.html)API menghapus peserta.
```
attendee = await chime.createAttendee({
MeetingId: meeting.MeetingId,
ExternalUserId: externalUserId,
}).promise();
```
# Mengirim respons ke klien untuk Amazon Chime SDK
Setelah Anda membuat sumber daya rapat dan peserta, aplikasi server harus menyandikan dan mengirim objek rapat dan peserta kembali ke aplikasi klien. Klien memerlukan potongan informasi tersebut untuk mem-bootstrap perpustakaan klien Amazon Chime SDK JavaScript, dan memungkinkan peserta untuk bergabung dengan rapat dengan sukses dari aplikasi berbasis web atau Elektron.
# Membangun aplikasi klien untuk Amazon Chime SDK
Untuk membuat aplikasi klien, ikuti langkah-langkah yang tercantum dalam [Ikhtisar Amazon Chime JavaScript SDK API](https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html). GitHub Ikhtisar memberikan contoh kode sesuai kebutuhan.
# Mengintegrasikan filter latar belakang ke dalam aplikasi klien untuk Amazon Chime SDK
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
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
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
`VideoFxProcessor`Objek membutuhkan browser yang mendukung Web GL2 untuk mengakses GPU pada perangkat klien.
## Pengiriman konten dan bandwidth untuk Amazon Chime SDK
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
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
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
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
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
`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
`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
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
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.
```
```
## Kesalahan kebijakan keamanan konten
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
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
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`
# Contoh filter latar belakang untuk Amazon Chime SDK
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 => {
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);
}
```