# Vista en directo
<a name="browser-dcv-integration"></a>

La función Live View AgentCore de Amazon Bedrock funciona con [AWS DCV](https://docs.aws.amazon.com/dcv/). Cada sesión del navegador lanza un servidor DCV dedicado que transmite la interfaz del navegador y permite la interacción del usuario en tiempo real.

Para integrar Live View en su aplicación web, utilice el componente BrowserLiveViewReact del [ AgentCore TypeScript SDK de Amazon Bedrock](https://github.com/aws/bedrock-agentcore-sdk-typescript). El componente integra el [cliente web AWS DCV](https://docs.aws.amazon.com/dcv/latest/websdkguide/what-is.html) internamente y se encarga de la configuración de la conexión, la autenticación SigV4 y la renderización del vídeo, de modo que puede integrar una transmisión en directo desde el navegador con un código mínimo y, al mismo tiempo, conservar el control total de la interfaz de usuario.

## Uso del componente BrowserLiveView
<a name="browser-live-view-render"></a>

El BrowserLiveViewcomponente requiere una URL de SigV4-presigned Live View. Tras iniciar una sesión de navegador (consulte [Administrar las sesiones de navegador](browser-managing-sessions.md)), genere la URL prefirmada mediante el LiveViewUrl método [generate](https://github.com/aws/bedrock-agentcore-sdk-typescript/blob/main/src/tools/browser/client.ts#L380) de la clase Browser del TypeScript SDK. El método firma el punto final de transmisión de Live View con credenciales de SigV4 y devuelve una URL con un límite de tiempo que se transfiere al componente. BrowserLiveView

Instale el AgentCore TypeScript SDK de Amazon Bedrock:

```
npm install bedrock-agentcore
```

Importe el BrowserLiveViewcomponente y renderícelo con la URL prefirmada. El componente gestiona la WebSocket conexión, la negociación del protocolo DCV, la decodificación del flujo de vídeo y la renderización de cuadros. Se escala automáticamente para adaptarse a su contenedor principal y, al mismo tiempo, conserva la relación de aspecto.

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

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

RemoteWidth y RemoteHeight deben coincidir con la ventana gráfica configurada para la sesión del navegador. Los valores no coincidentes provocan recortes o barras negras.

La visualización en directo comienza a reproducirse en cuanto la URL prefirmada es válida y la sesión del navegador está activa. Si el contenedor permanece vacío, compruebe que la URL prefirmada no haya caducado y que la sesión del navegador siga ejecutándose.

Para ver un recorrido completo que incluye un ejemplo de aplicación de React, consulte [Insertar un agente de navegador de IA activo en su aplicación React con Amazon Bedrock AgentCore](https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/).