本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 实时预览
<a name="browser-dcv-integration"></a>

亚马逊 Bedrock AgentCore 的 Live View 由 [Amazon DCV ](https://docs.amazonaws.cn/dcv/) 提供支持。每个浏览器会话都会启动一个专用 DCV 服务器，该服务器流式传输浏览器界面并支持实时用户交互。

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

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

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

安装亚马逊 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}
/>
```

远程宽度和远程高度必须与为浏览器会话配置的视口相匹配。值不匹配会导致裁剪或黑条。

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

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