라이브 뷰

Amazon Bedrock AgentCore의 라이브 뷰는 AWS DCV로 구동됩니다. 각 브라우저 세션은 브라우저 인터페이스를 스트리밍하고 실시간 사용자 상호 작용을 활성화하는 전용 DCV 서버를 시작합니다.

라이브 뷰를 웹 애플리케이션에 포함하려면 Amazon Bedrock AgentCore TypeScript SDK의 BrowserLiveView React 구성 요소를 사용합니다. 구성 요소는 AWS DCV 웹 클라이언트를 내부적으로 래핑하고 연결 설정, 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 브라우저 에이전트 임베드를 참조하세요.