即時檢視

Amazon Bedrock AgentCore 的即時檢視採用 AWS DCV 技術。每個瀏覽器工作階段都會啟動專用 DCV 伺服器，以串流瀏覽器界面並啟用即時使用者互動。

若要將即時檢視嵌入 Web 應用程式，請使用 Amazon Bedrock AgentCore TypeScript SDK 中的 BrowserLiveView React 元件。元件會在內部包裝 AWS DCV Web 用戶端，並處理連線設定、SigV4 身分驗證和影片轉譯，因此您可以使用最少的程式碼整合即時瀏覽器串流，同時保留對 UI 的完全控制。

使用 BrowserLiveView 元件

BrowserLiveView 元件需要 SigV4-presigned即時檢視 URL。啟動瀏覽器工作階段後 （請參閱管理瀏覽器工作階段)，使用 TypeScript SDK 的瀏覽器類別中的 generateLiveViewUrl 方法產生預先簽章的 URL。方法會使用 SigV4 登入資料簽署即時檢視串流端點，並傳回您傳遞至 BrowserLiveView 元件的時間限制 URL。

安裝 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 和 remoteHeight 必須符合為瀏覽器工作階段設定的檢視區。不相符的值會導致裁切或黑條。

一旦預先簽章的 URL 有效且瀏覽器工作階段處於作用中狀態，即時檢視就會開始串流。如果容器保持空白，請確認預先簽章的 URL 尚未過期，且瀏覽器工作階段仍在執行中。

如需包含 React 應用程式範例的完整演練，請參閱使用 Amazon Bedrock AgentCore 在 React 應用程式中內嵌即時 AI 瀏覽器代理程式。