# 实时取景
<a name="browser-dcv-integration"></a>

Amazon Bedrock AgentCore 的实时视图由 [AWS DC](https://docs.aws.amazon.com/dcv/) V 提供支持。每个浏览器会话都会启动一个专用 DCV 服务器，用于流式传输浏览器界面并实现实时用户交互。

要将 Live View 嵌入到你的 Web 应用程序中，请使用 [Amazon Bedrock AgentCore TypeScript SDK](https://github.com/aws/bedrock-agentcore-sdk-typescript) 中的 BrowserLiveViewReact 组件。该组件在内部封装 [AWS DCV Web Client](https://docs.aws.amazon.com/dcv/latest/websdkguide/what-is.html)，处理连接设置、SigV4 身份验证和视频渲染，因此您可以用最少的代码集成实时浏览器流，同时保持对用户界面的完全控制。

## 使用组 BrowserLiveView 件
<a name="browser-live-view-render"></a>

该BrowserLiveView组件需要 SigV4-presigned 实时预览 URL。启动浏览器会话（请参阅[管理浏览器会话](browser-managing-sessions.md)）后，使用 TypeScript SDK 浏览器类中的 generate LiveViewUrl 方法[生成](https://github.com/aws/bedrock-agentcore-sdk-typescript/blob/main/src/tools/browser/client.ts#L380)预签名 URL。该方法使用 Sigv4 凭据对 Live View 直播流端点进行签名，并返回您传递给组件的限时网址。BrowserLiveView

安装 Amazon Bedrock AgentCore TypeScript SDK：

```
npm install bedrock-agentcore
```

导入BrowserLiveView组件并使用预签名 URL 进行渲染。该组件处理 WebSocket 连接、DCV 协议协商、视频流解码和帧渲染。它会自动缩放以适应其父容器，同时保持纵横比。

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

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

RemoteWidth 和 RemoteHeigh t 必须与为浏览器会话配置的视口相匹配。值不匹配会导致条块被裁剪或出现黑条。

一旦预签名 URL 有效且浏览器会话处于活动状态，Live View 就会开始流式传输。如果容器仍为空，请确认预签名 URL 尚未过期，并且浏览器会话仍在运行。

有关包括示例 React 应用程序在内的完整演练，请参阅使用 A [mazon Bed AgentCore rock 在你的 React 应用程序中嵌入实时人工智能浏览器代理](https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/)。