# Visualização ao vivo
<a name="browser-dcv-integration"></a>

O Live View AgentCore do Amazon Bedrock é alimentado por [AWS DCV](https://docs.aws.amazon.com/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](https://github.com/aws/bedrock-agentcore-sdk-typescript). O componente envolve o [AWS DCV Web Client](https://docs.aws.amazon.com/dcv/latest/websdkguide/what-is.html) 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
<a name="browser-live-view-render"></a>

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](browser-managing-sessions.md)), gere a URL pré-assinada usando o LiveViewUrl método [generate](https://github.com/aws/bedrock-agentcore-sdk-typescript/blob/main/src/tools/browser/client.ts#L380) 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](https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/) Bedrock. AgentCore