Vue 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 le Live View dans votre application Web, utilisez le composant BrowserLiveViewReact du SDK Amazon Bedrock AgentCore TypeScript . Le composant intègre le client Web AWS DCV en interne et gère la configuration de la connexion, l'authentification SigV4 et le rendu vidéo. Vous pouvez ainsi intégrer un flux de navigateur en direct avec un minimum de code tout en gardant le contrôle total de votre interface utilisateur.

Utilisation du BrowserLiveView composant

Le BrowserLiveViewcomposant 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 les informations d'identification SigV4 et renvoie une URL limitée dans le temps que vous transmettez au BrowserLiveViewcomposant.

Installez le AgentCore TypeScript SDK Amazon Bedrock :

npm install bedrock-agentcore

Importez le BrowserLiveViewcomposant 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 s'adapte automatiquement à 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 paramètres 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.

La diffusion en direct commence 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 d'exécution.

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