Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Affichage en direct

Live View d'Amazon Bedrock AgentCore est alimenté par AWS DCV. Chaque session de navigateur lance un serveur DCV dédié qui diffuse l'interface du navigateur et permet une interaction utilisateur en temps réel.

Pour intégrer Live View à votre application Web, utilisez le composant BrowserLiveView React du AgentCore TypeScript SDK https://github.com/aws/bedrock-agentcore-sdk-typescript Amazon Bedrock. Le composant enveloppe le client Web AWS DCV en interne et gère la configuration de la connexion, l'authentification SIGv4 et le rendu vidéo, afin que vous puissiez intégrer un flux de navigateur en direct avec un minimum de code tout en conservant le contrôle total de votre interface utilisateur.

Utilisation du BrowserLiveView composant

Le BrowserLiveView composant nécessite une URL SigV4-presigned Live View. Après avoir démarré une session de navigateur (voir Gestion des sessions de navigateur), générez l'URL présignée à l'aide de la LiveViewUrl méthode generate de la classe Browser du TypeScript SDK. La méthode signe le point de terminaison du flux Live View avec des informations d'identification SIGv4 et renvoie une URL limitée dans le temps que vous transmettez au BrowserLiveView composant.

Installez le AgentCore TypeScript SDK Amazon Bedrock :

npm install bedrock-agentcore

Importez le BrowserLiveView composant et affichez-le avec l'URL présignée. Le composant gère la WebSocket connexion, la négociation du protocole DCV, le décodage du flux vidéo et le rendu des images. Il est redimensionné automatiquement pour s'adapter à son conteneur parent tout en préservant le rapport hauteur/largeur.

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

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

Les valeurs RemoteWidth et RemoteHeight doivent correspondre à la fenêtre d'affichage configurée pour la session du navigateur. Les valeurs non concordantes entraînent un recadrage ou des barres noires.

Le Live View commence à diffuser dès que l'URL présignée est valide et que la session du navigateur est active. Si le conteneur reste vide, vérifiez que l'URL présignée n'a pas expiré et que la session du navigateur est toujours en cours.

Pour une présentation complète, y compris un exemple d'application React, voir Intégrer un agent de navigateur IA en direct dans votre application React avec Amazon AgentCore Bedrock.