Visualização ao vivo

O Live View AgentCore do Amazon Bedrock é alimentado por AWS DCV. Cada sessão do navegador inicia um servidor DCV dedicado que transmite a interface do navegador e permite a interação do usuário em tempo real.

Para incorporar o Live View em seu aplicativo web, use o componente BrowserLiveViewReact do Amazon Bedrock AgentCore TypeScript SDK. O componente envolve o AWS DCV Web Client internamente e gerencia a configuração da conexão, a autenticação SigV4 e a renderização de vídeo, para que você possa integrar um stream ao vivo do navegador com o mínimo de código e, ao mesmo tempo, manter o controle total sobre sua interface do usuário.

Usando o BrowserLiveView componente

O BrowserLiveViewcomponente requer uma URL de SigV4-presigned visualização dinâmica. Depois de iniciar uma sessão do navegador (consulte Gerenciamento de sessões do navegador), gere a URL pré-assinada usando o LiveViewUrl método generate da classe Browser do TypeScript SDK. O método assina o endpoint da transmissão do Live View com credenciais SigV4 e retorna uma URL com limite de tempo que você passa para o componente. BrowserLiveView

Instale o Amazon Bedrock AgentCore TypeScript SDK:

npm install bedrock-agentcore

Importe o BrowserLiveViewcomponente e renderize-o com o URL pré-assinado. O componente lida com WebSocket conexão, negociação de protocolo DCV, decodificação de fluxo de vídeo e renderização de quadros. Ele é dimensionado automaticamente para caber em seu contêiner principal, preservando a proporção.

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

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

O RemoteWidth e o RemoteHeight devem corresponder à janela de exibição configurada para a sessão do navegador. Valores incompatíveis causam cortes ou barras pretas.

A exibição ao vivo começa a ser transmitida assim que o URL pré-assinado for válido e a sessão do navegador estiver ativa. Se o contêiner permanecer vazio, verifique se o URL pré-assinado não expirou e se a sessão do navegador ainda está em execução.

Para uma explicação completa, incluindo uma amostra do aplicativo React, consulte Incorporar um agente de navegador de IA ativo em seu aplicativo React com o Amazon Bedrock. AgentCore