View a markdown version of this page

Visualizzazione dal vivo - Fondamento Amazon AgentCore
Utilizzo del componente BrowserLiveView

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Visualizzazione dal vivo

Live View AgentCore di Amazon Bedrock è basato su AWS DCV. Ogni sessione del browser avvia un server DCV dedicato che trasmette in streaming l'interfaccia del browser e consente l'interazione dell'utente in tempo reale.

Per incorporare Live View nella tua applicazione web, utilizza il componente BrowserLiveView React dell'SDK Amazon Bedrock. AgentCore TypeScript Il componente racchiude internamente il AWS DCV Web Client e gestisce la configurazione della connessione, l'autenticazione SIGv4 e il rendering video, in modo da poter integrare uno streaming live del browser con un codice minimo mantenendo il pieno controllo sull'interfaccia utente.

Utilizzo del componente BrowserLiveView

Il BrowserLiveView componente richiede un URL SigV4-presigned Live View. Dopo aver avviato una sessione del browser (vedi Gestione delle sessioni del browser), genera l'URL prefirmato utilizzando il LiveViewUrl metodo generate della classe Browser dell' TypeScript SDK. Il metodo firma l'endpoint dello stream Live View con le credenziali Sigv4 e restituisce un URL limitato nel tempo che passi al componente. BrowserLiveView

Installa l'SDK Amazon Bedrock: AgentCore TypeScript 

npm install bedrock-agentcore

Importa il BrowserLiveView componente ed esegui il rendering con l'URL prefirmato. Il componente gestisce la WebSocket connessione, la negoziazione del protocollo DCV, la decodifica del flusso video e il rendering dei frame. Si ridimensiona automaticamente per adattarsi al contenitore principale preservando le proporzioni.

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

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

RemoteWidth e remoteHeight devono corrispondere alla finestra configurata per la sessione del browser. I valori non corrispondenti causano ritagli o barre nere.

Il Live View inizia lo streaming non appena l'URL prefirmato è valido e la sessione del browser è attiva. Se il contenitore rimane vuoto, verifica che l'URL prefirmato non sia scaduto e che la sessione del browser sia ancora in esecuzione.

Per una guida completa che include un esempio di applicazione React, consulta Incorporare un agente browser AI attivo nella tua app React con Amazon Bedrock. AgentCore