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

Tampilan Langsung

Live View Amazon Bedrock AgentCore didukung oleh AWS DC V. Setiap sesi browser meluncurkan server DCV khusus yang mengalirkan antarmuka browser dan memungkinkan interaksi pengguna real-time.

Untuk menyematkan Live View ke aplikasi web Anda, gunakan komponen BrowserLiveView React dari Amazon Bedrock AgentCore TypeScript SDK. Komponen ini membungkus AWS DCV Web Client secara internal dan menangani pengaturan koneksi, otentikasi SIGv4, dan rendering video, sehingga Anda dapat mengintegrasikan streaming browser langsung dengan kode minimal sambil mempertahankan kontrol penuh atas UI Anda.

Menggunakan BrowserLiveView komponen

BrowserLiveViewKomponen memerlukan URL SigV4-presigned Live View. Setelah memulai sesi browser (lihat M engelola sesi browser), buat URL yang telah ditandatangani menggunakan LiveViewUrl metode generate dari kelas Browser TypeScript SDK. Metode ini menandatangani titik akhir aliran Live View dengan kredenSIAL SIGv4 dan mengembalikan URL terbatas waktu yang Anda berikan ke BrowserLiveView komponen.

Instal Amazon Bedrock AgentCore TypeScript SDK:

npm install bedrock-agentcore

Impor BrowserLiveView komponen dan render dengan URL yang telah ditandatangani sebelumnya. Komponen menangani WebSocket koneksi, negosiasi protokol DCV, decoding aliran video, dan rendering bingkai. Ini secara otomatis menskalakan agar sesuai dengan wadah induknya sambil mempertahankan rasio aspek.

import { BrowserLiveView }
  from 'bedrock-agentcore/browser/live-view'

<BrowserLiveView
  signedUrl={presignedUrl}
  remoteWidth={1920}
  remoteHeight={1080}
/>

RemoteWidth dan RemoteHeight harus sesuai dengan viewport yang dikonfigurasi untuk sesi browser. Nilai yang tidak cocok menyebabkan pemangkasan atau bilah hitam.

Live View mulai streaming segera setelah URL yang telah ditandatangani valid dan sesi browser aktif. Jika wadah tetap kosong, verifikasi bahwa URL yang ditandatangani sebelumnya belum kedaluwarsa dan sesi browser masih berjalan.

Untuk panduan lengkap termasuk contoh aplikasi React, lihat Men anamkan agen browser AI langsung di aplikasi React Anda dengan Amazon Bedrock AgentCore.