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

实时预览

亚马逊 Bedrock AgentCore 的 Live View 由 AWS DCV 提供支持。每个浏览器会话都会启动一个专用 DCV 服务器，该服务器流式传输浏览器界面并支持实时用户交互。

要将实时视图嵌入到您的 Web 应用程序中，请使用亚马逊 Bedrock AgentCore TypeScript SDK 中的 BrowserLiveView React 组件。该组件在内部封装 AWS DCV Web Client 并处理连接设置、SigV4 身份验证和视频渲染，因此您可以用最少的代码集成实时浏览器流，同时保持对用户界面的完全控制。

使用组 BrowserLiveView 件

该BrowserLiveView组件需要 SigV4-presigned 实时预览网址。启动浏览器会话（请参阅管理浏览器会话）后，使用 TypeScript SDK 浏览器类的生成LiveViewUrl方法生成预签名 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 应用程序中嵌入实时的 AI 浏览器代理。