ライブビュー

Amazon Bedrock AgentCore のライブビューは AWS DCV を利用しています。各ブラウザセッションは、ブラウザインターフェイスをストリーミングし、リアルタイムのユーザー操作を可能にする専用の DCV サーバーを起動します。

Live View をウェブアプリケーションに埋め込むには、Amazon Bedrock AgentCore TypeScript SDK の BrowserLiveView React コンポーネントを使用します。コンポーネントは AWS DCV ウェブクライアントを内部的にラップし、接続設定、SigV4 認証、ビデオレンダリングを処理するため、UI を完全に制御しながら、ライブブラウザストリームを最小限のコードと統合できます。

BrowserLiveView コンポーネントの使用

BrowserLiveView コンポーネントには、SigV4-presignedライブビュー URL が必要です。ブラウザセッションを開始した後 (「ブラウザセッションの管理」を参照）、TypeScript SDK のブラウザクラスから generateLiveViewUrl メソッドを使用して署名付き URL を生成します。メソッドは、SigV4 認証情報を使用して Live View ストリームエンドポイントに署名し、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 ブラウザエージェントを埋め込む」を参照してください。