实时取景

Amazon Bedrock AgentCore 的实时视图由 AWS DC V 提供支持。每个浏览器会话都会启动一个专用 DCV 服务器，用于流式传输浏览器界面并实现实时用户交互。

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

使用组 BrowserLiveView 件

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