Visualizzazione dal vivo

Live View di Amazon Bedrock AgentCore è alimentato da 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, usa il componente BrowserLiveViewReact dell'SDK Amazon Bedrock AgentCore TypeScript . Il componente avvolge 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 codice minimo pur mantenendo il pieno controllo sull'interfaccia utente.

Utilizzo del componente BrowserLiveView

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

Installa l' AgentCore TypeScript SDK Amazon Bedrock:

npm install bedrock-agentcore

Importa il BrowserLiveViewcomponente e rendilo con l'URL predefinito. 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 predefinito è valido e la sessione del browser è attiva. Se il contenitore rimane vuoto, verifica che l'URL predefinito non sia scaduto e che la sessione del browser sia ancora in esecuzione.

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