# 工作階段錄製和重播 瀏覽器工作階段記錄和重播可提供全面的可觀測性，用於偵錯、稽核或訓練目的。當您建立已啟用工作階段記錄的瀏覽器時，Amazon Bedrock AgentCore 會自動擷取瀏覽器互動，並將其存放在您指定的 Amazon S3 儲存貯體中以供日後分析。 工作階段重播會擷取完整的瀏覽器互動資料，讓您檢視重播並了解瀏覽器工作階段期間發生的動作。此功能透過提供瀏覽器行為的詳細洞察，協助您解決錯誤並改善未來的調用。 工作階段重播期間收集的資訊包括： + 工作階段 DOM 變更和變動 + 使用者動作，包括點選、捲動和表單互動 + 主控台日誌和錯誤訊息 + Chrome DevTools 通訊協定 (CDP) 事件 + 網路事件和 HTTP 請求 ## 工作階段錄製的先決條件 若要啟用工作階段錄製，您需要： + 儲存記錄資料的 Amazon S3 儲存貯體 + IAM 執行角色，具有寫入 Amazon S3 儲存貯體的許可 + 設定啟用記錄的自訂瀏覽器工具 ## 設定用於錄製的 IAM 角色 若要啟用工作階段記錄，您需要具有許可的 IAM 執行角色，才能將記錄資料寫入 Amazon S3，並將活動記錄到 CloudWatch。如需設定許可的詳細說明，請參閱[許可](browser-resource-session-management.md#browser-permissions)。 執行角色需要超出標準瀏覽器許可的額外許可： ``` { "Sid": "S3Permissions", "Effect": "Allow", "Action": [ "s3:PutObject", "s3:GetObject", "s3:ListBucket", "s3:ListMultipartUploadParts", "s3:AbortMultipartUpload" ], "Resource": [ "arn:aws:s3:::your-recording-bucket", "arn:aws:s3:::your-recording-bucket/*" ] }, { "Sid": "CloudWatchLogsPermissions", "Effect": "Allow", "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream", "logs:PutLogEvents", "logs:DescribeLogStreams" ], "Resource": "*" } ``` 將 取代`your-recording-bucket`為您實際的 Amazon S3 儲存貯體名稱。 ## 步驟 1：使用錄音功能建立瀏覽器工具 建立啟用記錄的自訂瀏覽器工具。如需建立瀏覽器工具的詳細說明，請參閱[建立 AgentCore 瀏覽器](browser-using-tool.md#browser-create)。 建立瀏覽器工具時，請確定您： + 在組態中啟用工作階段錄製 + 指定您的 Amazon S3 儲存貯體和字首來儲存錄音 + 使用步驟 1 中的 IAM 執行角色 使用 Python SDK 的範例： ``` import boto3 import uuid region = "us-west-2" bucket = "your-recording-bucket" client = boto3.client("bedrock-agentcore-control", region_name=region) response = client.create_browser( name="MyRecordingBrowser", description="Browser with session recording enabled", networkConfiguration={"networkMode": "PUBLIC"}, executionRoleArn="arn:aws:iam::123456789012:role/AgentCoreBrowserRecordingRole", clientToken=str(uuid.uuid4()), recording={ "enabled": True, "s3Location": { "bucket": bucket, "prefix": "browser-recordings" } } ) browser_identifier = response.get("browserId") or response.get("browserIdentifier") print(f"Created browser with recording: {browser_identifier}") print(f"Recordings will be stored at: s3://{bucket}/browser-recordings/") ``` ## 步驟 2：使用啟用錄製功能的瀏覽器 將已啟用錄音的瀏覽器與任何自動化架構搭配使用。所有瀏覽器互動都會自動記錄。使用 Strands 的範例： ``` from strands import Agent from strands_tools.browser import AgentCoreBrowser # Use the browser created with recording browser_identifier = "your-browser-identifier" region = "us-west-2" browser_tool = AgentCoreBrowser(region=region, identifier=browser_identifier) agent = Agent(tools=[browser_tool.browser]) prompt = ( "Navigate to https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/what-is-bedrock-agentcore.html " "and summarize the key features of AgentCore." ) response = agent(prompt) print("Agent Response:") print(response.message["content"][0]["text"]) ``` 此工作階段期間的所有互動都會在工作階段結束時自動記錄並上傳至您的 Amazon S3 儲存貯體。 ## 步驟 3：監控即時工作階段和重播錄製 AWS 主控台提供完整工具，可進行即時監控和記錄的工作階段分析。 ### 即時檢視監控 即時監控瀏覽器工作階段，並與作用中工作階段互動： **在 主控台中存取即時檢視** 1. 開啟 Amazon Bedrock AgentCore 主控台並導覽至**內建工具** 1. 從清單中選擇您的瀏覽器工具 `MyRecordingBrowser` （例如，) 1. 在**瀏覽器工作階段**區段中，尋找狀態為**就緒**或**進行中**的有效工作階段 1. 在**即時檢視/錄製**欄中，按一下提供的「檢視即時工作階段」 URL 1. 即時檢視會在新的瀏覽器視窗中開啟，顯示即時瀏覽器工作階段 即時檢視界面提供： + 瀏覽器工作階段的即時影片串流 + 從自動化接管或釋放控制的互動式控制項 + 工作階段狀態指示燈和連線資訊 + 啟用控制時能夠直接與瀏覽器互動 ### 工作階段重播和分析 透過主控台重播介面存取詳細的工作階段記錄和分析： **在主控台中存取工作階段重播** 1. 導覽至您的瀏覽器工具，然後選取已**終止**狀態的已完成工作階段 1. 按一下您要分析之工作階段的**檢視錄製** 1. 工作階段重播頁面會顯示完整的分析工具 **工作階段分析功能** 主控台提供多個分析工具： + **影片播放器**：使用時間軸清理工具進行互動式播放以進行導覽 + **頁面導覽**：顯示具有時間範圍之所有已造訪頁面的面板 + **使用者動作** ：所有使用者與時間戳記、方法和詳細資訊的互動 + Page **DOM**：每個頁面的 DOM 結構和 HTML 內容 + **主控台日誌**：瀏覽器主控台輸出、錯誤和日誌訊息 + **CDP 事件** ：具有參數和結果的 Chrome DevTools 通訊協定事件 + **網路事件**：HTTP 請求、回應、狀態碼和時間 **導覽錄音** 使用這些方法來導覽錄音： + 按一下頁面面板中的頁面以跳至特定時刻 + 按一下使用者動作以查看它們在時間軸中發生的位置 + 使用影片時間軸清除器進行精確導覽 + 選擇在動作資料表中**檢視錄製**連結，以跳至特定互動 ## 步驟 4：以程式設計方式存取錄音 使用 Amazon Bedrock AgentCore SDK 和 APIs 以程式設計方式存取即時檢視和記錄洞見，以進行自訂整合和自動化分析。 ### 程式設計即時檢視存取 使用瀏覽器用戶端和檢視器伺服器連線至即時瀏覽器工作階段： ``` import time from rich.console import Console from bedrock_agentcore.tools.browser_client import browser_session from browser_viewer import BrowserViewerServer console = Console() def main(): try: # Create browser session with browser_session('us-west-2') as client: print("✅ Browser ready!") ws_url, headers = client.generate_ws_headers() # Start viewer server console.print("[cyan]Starting viewer server...[/cyan]") viewer = BrowserViewerServer(client, port=8005) viewer_url = viewer.start(open_browser=True) # Keep running while True: time.sleep(1) except KeyboardInterrupt: console.print("[yellow]Shutting down...[/yellow]") if 'client' in locals(): client.stop() console.print("✅ Browser session terminated") if __name__ == "__main__": main() ``` ### 程式設計記錄存取 直接從 Amazon S3 存取記錄資料以進行自訂分析工作流程： ``` import boto3 s3_client = boto3.client('s3', region_name='us-west-2') # List recordings in your bucket bucket_name = "your-recording-bucket" prefix = "browser-recordings/" response = s3_client.list_objects_v2(Bucket=bucket_name, Prefix=prefix) print(f"Recordings in s3://{bucket_name}/{prefix}:") for obj in response.get('Contents', []): print(f" {obj['Key']} ({obj['Size']} bytes)") print(f" Last Modified: {obj['LastModified']}") print() ``` 記錄資料結構： ``` s3://your-recording-bucket/browser-recordings/ └── session-id/ ├── batch_1.ndjson.gz ├── batch_2.ndjson.gz └── batch_3.ndjson.gz ``` 每個工作階段都會建立具有工作階段 ID 的資料夾，並在工作階段進行時以區塊形式上傳記錄資料。 ## 工作階段重播程式設計範例 對於進階使用案例，您可以建立自訂工作階段重播檢視器，並將記錄資料整合到您自己的分析工作流程中。 下列 GitHub 範例顯示獨立工作階段重播檢視器，以及使用瀏覽器工作階段重播功能時的完整瀏覽器體驗。 如需其他範例，請參閱 [ GitHub 上的 AgentCore 瀏覽器範例](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/)。 ### 獨立工作階段重播檢視器 獨立工作階段重播檢視器是獨立的工具，可讓您直接從 Amazon S3 檢視錄製的瀏覽器工作階段，而無需建立新的瀏覽器。 + 直接連線至 S3 以檢視錄音 + 透過指定其工作階段 ID 檢視任何過去的錄製 + 當 S3 缺少成品時顯示錯誤訊息，具有工作階段 ID 特定的主控台重播 URLs + 具有時間軸導覽的互動式影片播放介面 + 時間軸上的動作標記，顯示表單填充、點選和導覽事件 + 可觀測性表格顯示以持續時間和 URL 詳細資訊移動的頁面 + 每個頁面互動的主控台事件、CDP 日誌和網路日誌 + 在頁面層級整合的工作階段持續時間追蹤 + 即時動作驗證，視訊和動作資料之間具有視覺化關聯性 ``` # View the latest recording in a bucket python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data # View a specific recording python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data --session 01JZVDG02M8MXZY2N7P3PKDQ74 # Use a specific AWS profile python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data --profile my-profile ``` 如需參考，請參閱 [ GitHub 上的獨立工作階段重播檢視器](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/live_view_sessionreplay/view_recordings.py)。 ### 使用錄製和重播完成瀏覽器體驗 建立具有錄製功能和進階重播功能的瀏覽器工作階段的全方位工具。 + 建立具有自動錄製至 S3 的瀏覽器工作階段 + 使用互動式控制 （擷取/發行） 的即時檢視 + 即時調整顯示器解析度 + 自動將工作階段錄製至 S3 + 具有影片播放器界面的整合式工作階段重播檢視器 + 使用精確動作位置追蹤進行時間軸清理 + 具有導覽時間軸和 URL 複製的Page-by-page分析 + 包含點選位置詳細資訊的表單填入動作驗證 + 在頁面層級整合的工作階段持續時間追蹤 + 即時動作驗證，視訊和動作資料之間具有視覺化關聯 ``` # View the latest recording in a bucket python -m live_view_sessionreplay.browser_interactive_session ``` 如需參考，請參閱 [ GitHub 上的互動式瀏覽器工作階段](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/live_view_sessionreplay/browser_interactive_session.py)。