# ライブビュー
<a name="browser-dcv-integration"></a>

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

Live View をウェブアプリケーションに埋め込むには、[Amazon Bedrock AgentCore TypeScript SDK](https://github.com/aws/bedrock-agentcore-sdk-typescript) の BrowserLiveView React コンポーネントを使用します。コンポーネントは [AWS DCV ウェブクライアント](https://docs.aws.amazon.com/dcv/latest/websdkguide/what-is.html)を内部的にラップし、接続設定、SigV4 認証、ビデオレンダリングを処理するため、UI を完全に制御しながら、ライブブラウザストリームを最小限のコードと統合できます。

## BrowserLiveView コンポーネントの使用
<a name="browser-live-view-render"></a>

BrowserLiveView コンポーネントには、SigV4-presignedライブビュー URL が必要です。ブラウザセッションを開始した後 ([「ブラウザセッションの管理](browser-managing-sessions.md)」を参照）、TypeScript SDK のブラウザクラスから [generateLiveViewUrl](https://github.com/aws/bedrock-agentcore-sdk-typescript/blob/main/src/tools/browser/client.ts#L380) メソッドを使用して署名付き 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 ブラウザエージェントを埋め込む](https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/)」を参照してください。