Tampilan Langsung

Live View Amazon Bedrock AgentCore didukung oleh AWS DCV. Setiap sesi browser meluncurkan server DCV khusus yang mengalirkan antarmuka browser dan memungkinkan interaksi pengguna waktu nyata.

Untuk menyematkan Live View ke aplikasi web Anda, gunakan komponen BrowserLiveViewReact dari Amazon Bedrock AgentCore TypeScript SDK. Komponen ini membungkus Klien Web AWS DCV 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 Mengelola sesi browser), buat URL presigned menggunakan LiveViewUrl metode generate dari kelas Browser TypeScript SDK. Metode ini menandatangani titik akhir streaming Live View dengan kredenal SigV4 dan mengembalikan URL terbatas waktu yang Anda teruskan ke komponen. BrowserLiveView

Instal Amazon Bedrock AgentCore TypeScript SDK:

npm install bedrock-agentcore

Impor BrowserLiveViewkomponen dan render dengan URL yang telah ditentukan sebelumnya. Komponen menangani WebSocket koneksi, negosiasi protokol DCV, decoding aliran video, dan rendering bingkai. Ini menskalakan otomatis 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 cocok dengan viewport yang dikonfigurasi untuk sesi browser. Nilai yang tidak cocok menyebabkan pemotongan atau bilah hitam.

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

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