Live-Ansicht

AgentCoreDie Live-Ansicht von Amazon Bedrock wird von AWS DCV unterstützt. Jede Browsersitzung startet einen dedizierten DCV-Server, der die Browseroberfläche streamt und Benutzerinteraktionen in Echtzeit ermöglicht.

Verwenden Sie die BrowserLiveViewReact-Komponente aus dem Amazon Bedrock AgentCore TypeScript SDK, um die Live-Ansicht in Ihre Webanwendung einzubetten. Die Komponente umschließt den AWS DCV-Webclient intern und kümmert sich um den Verbindungsaufbau, die SigV4-Authentifizierung und das Rendern von Videos, sodass Sie einen Live-Browser-Stream mit minimalem Code integrieren können und gleichzeitig die volle Kontrolle über Ihre Benutzeroberfläche behalten.

Verwenden der Komponente BrowserLiveView

Die BrowserLiveViewKomponente benötigt eine SigV4-presigned Live-View-URL. Nachdem Sie eine Browsersitzung gestartet haben (siehe Browsersitzungen verwalten), generieren Sie die vorsignierte URL mithilfe der LiveViewUrlGenerate-Methode aus der Browser-Klasse des TypeScript SDK. Die Methode signiert den Live View-Stream-Endpunkt mit SigV4-Anmeldeinformationen und gibt eine zeitlich begrenzte URL zurück, die Sie an die Komponente übergeben. BrowserLiveView

Installieren Sie das Amazon Bedrock AgentCore TypeScript SDK:

npm install bedrock-agentcore

Importieren Sie die BrowserLiveViewKomponente und rendern Sie sie mit der vorsignierten URL. Die Komponente kümmert sich um die WebSocket Verbindung, die DCV-Protokollaushandlung, die Decodierung von Videostreams und das Frame-Rendern. Es passt sich automatisch an den übergeordneten Container an und behält dabei das Seitenverhältnis bei.

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

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

RemoteWidth und RemoteHeight müssen mit dem für die Browsersitzung konfigurierten Viewport übereinstimmen. Nicht übereinstimmende Werte führen zu abgeschnittenen oder schwarzen Balken.

Die Live-Ansicht beginnt mit dem Streaming, sobald die vorsignierte URL gültig ist und die Browsersitzung aktiv ist. Wenn der Container leer bleibt, stellen Sie sicher, dass die vorsignierte URL nicht abgelaufen ist und dass die Browsersitzung noch läuft.

Eine vollständige Anleitung mit einer React-Beispielanwendung finden Sie unter Einbetten eines Live-KI-Browseragenten in Ihre React-App mit Amazon AgentCore Bedrock.