

# Sitzungsaufzeichnung und -wiedergabe
<a name="browser-session-recording"></a>

Die Aufzeichnung und Wiedergabe von Browsersitzungen bietet umfassende Beobachtbarkeit für Debugging-, Überprüfungs- oder Schulungszwecke. Wenn Sie einen Browser mit aktivierter Sitzungsaufzeichnung erstellen, erfasst Amazon Bedrock AgentCore automatisch Browserinteraktionen und speichert sie zur späteren Analyse in Ihrem angegebenen Amazon S3 S3-Bucket.

Die Sitzungswiedergabe erfasst umfassende Browserinteraktionsdaten, die es Ihnen ermöglichen, Wiederholungen anzusehen und die Aktionen zu verstehen, die während der Browsersitzungen stattgefunden haben. Diese Funktion hilft Ihnen, Fehler zu beheben und future Aufrufe zu verbessern, indem sie detaillierte Einblicke in das Browserverhalten bietet.

Zu den Informationen, die während der Sitzungswiedergabe gesammelt werden, gehören:
+ Änderungen und Mutationen im Sitzungs-DOM
+ Benutzeraktionen wie Klicks, Scrollen und Formularinteraktionen
+ Konsolenprotokolle und Fehlermeldungen
+ Ereignisse im DevTools Chrome-Protokoll (CDP)
+ Netzwerkereignisse und HTTP-Anfragen

## Voraussetzungen für die Sitzungsaufzeichnung
<a name="session-replay-prerequisites"></a>

Um die Sitzungsaufzeichnung zu aktivieren, benötigen Sie:
+ Ein Amazon S3 S3-Bucket zum Speichern von Aufzeichnungsdaten
+ Eine IAM-Ausführungsrolle mit Schreibberechtigungen in Ihren Amazon S3 S3-Bucket
+ Ein benutzerdefiniertes Browser-Tool, das mit aktivierter Aufzeichnung konfiguriert ist

## Konfigurieren Sie die IAM-Rolle für die Aufzeichnung
<a name="session-replay-permissions"></a>

Um die Sitzungsaufzeichnung zu aktivieren, benötigen Sie eine IAM-Ausführungsrolle mit der Berechtigung, Aufzeichnungsdaten in Amazon S3 zu schreiben und Aktivitäten zu CloudWatch protokollieren. Detaillierte Anweisungen zum Einrichten von Berechtigungen finden Sie unter [Berechtigungen](browser-resource-session-management.md#browser-permissions).

Für die Ausführungsrolle sind zusätzliche Berechtigungen erforderlich, die über die standardmäßigen Browserberechtigungen hinausgehen:

```
{
    "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`Ersetzen Sie es durch Ihren tatsächlichen Amazon S3 S3-Bucket-Namen.

## Schritt 1: Erstellen Sie ein Browser-Tool mit Aufzeichnung
<a name="session-replay-step1"></a>

Erstellen Sie ein benutzerdefiniertes Browser-Tool mit aktivierter Aufzeichnung. Ausführliche Anweisungen zum Erstellen von Browser-Tools finden Sie unter [ AgentCore Browser erstellen](browser-using-tool.md#browser-create).

Achten Sie bei der Erstellung Ihres Browser-Tools darauf, dass Sie:
+ Aktivieren Sie die Sitzungsaufzeichnung in der Konfiguration
+ Geben Sie Ihren Amazon S3 S3-Bucket und Ihr Präfix zum Speichern von Aufzeichnungen an
+ Verwenden Sie die IAM-Ausführungsrolle aus Schritt 1

Beispiel mit dem 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/")
```

## Schritt 2: Verwenden Sie den aufzeichnungsfähigen Browser
<a name="session-replay-step2"></a>

Verwenden Sie Ihren aufzeichnungsfähigen Browser mit einem beliebigen Automatisierungs-Framework. Alle Browserinteraktionen werden automatisch aufgezeichnet. Beispiel mit 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"])
```

Alle Interaktionen während dieser Sitzung werden automatisch aufgezeichnet und am Ende der Sitzung in Ihren Amazon S3 S3-Bucket hochgeladen.

## Schritt 3: Überwachen Sie Live-Sitzungen und spielen Sie Aufzeichnungen erneut ab
<a name="session-replay-step3"></a>

Die AWS Konsole bietet umfassende Tools sowohl für die Echtzeitüberwachung als auch für die Analyse aufgezeichneter Sitzungen.

### Live-View-Überwachung
<a name="console-live-view"></a>

Überwachen Sie Browsersitzungen in Echtzeit und interagieren Sie mit aktiven Sitzungen:

 **So greifen Sie in der Konsole auf die Live-Ansicht zu** 

1. **Öffnen Sie die Amazon AgentCore Bedrock-Konsole und navigieren Sie zu Tools Built-in ** 

1. Wählen Sie Ihr Browser-Tool aus der Liste aus (zum Beispiel`MyRecordingBrowser`)

1. Suchen Sie im Abschnitt **Browsersitzungen** nach einer aktiven Sitzung mit dem Status **Bereit** oder **In Bearbeitung** 

1. Klicken Sie in der Spalte **Live-Ansicht/ Aufzeichnung** auf die angegebene URL „Live-Sitzung anzeigen“

1. Die Live-Ansicht wird in einem neuen Browserfenster geöffnet, in dem die Browsersitzung in Echtzeit angezeigt wird

Die Live-View-Oberfläche bietet:
+ Real-time Videostream der Browsersitzung
+ Interaktive Steuerungen zur Übernahme oder Freigabe der Steuerung aus der Automatisierung
+ Sitzungsstatusanzeigen und Verbindungsinformationen
+ Möglichkeit, direkt mit dem Browser zu interagieren, wenn die Steuerung aktiviert ist

### Wiedergabe und Analyse der Sitzung
<a name="console-recording-insights"></a>

Greifen Sie über die Wiedergabeoberfläche der Konsole auf detaillierte Sitzungsaufzeichnungen und Analysen zu:

 **So greifen Sie in der Konsole auf die Sitzungswiedergabe zu** 

1. Navigieren Sie zu Ihrem Browser-Tool und wählen Sie eine abgeschlossene Sitzung mit dem Status **Beendet** aus

1. Klicken Sie für die Sitzung, die Sie analysieren möchten, auf **Aufzeichnung anzeigen**

1. Die Seite mit der Sitzungswiedergabe wird mit umfassenden Analysetools angezeigt

 **Funktionen zur Sitzungsanalyse** 

Die Konsole bietet mehrere Analysetools:
+  **Videoplayer**: Interaktive Wiedergabe mit Timeline-Scrubber zur Navigation
+  **Seitennavigation**: Bereich, in dem alle besuchten Seiten mit Zeiträumen angezeigt werden
+  **Benutzeraktionen**: Alle Benutzerinteraktionen mit Zeitstempeln, Methoden und Details
+  **Seiten-DOM**: DOM-Struktur und HTML-Inhalt für jede Seite
+  **Konsolenprotokolle**: Ausgabe, Fehler und Protokollmeldungen der Browserkonsole
+  **CDP-Ereignisse**: DevTools Chrome-Protokollereignisse mit Parametern und Ergebnissen
+  **Netzwerkereignisse**: HTTP-Anfragen, Antworten, Statuscodes und Timing

 **Navigieren Sie in Aufzeichnungen** 

Verwenden Sie diese Methoden, um durch Aufzeichnungen zu navigieren:
+ Klicken Sie im Seiten-Menü auf Seiten, um zu bestimmten Momenten zu springen
+ Klicke auf Benutzeraktionen, um zu sehen, wo sie in der Timeline stattgefunden haben
+ Verwenden Sie den Video-Timeline-Scrubber für eine präzise Navigation
+ Wählen Sie „**Aufzeichnungslinks in Aktionstabellen anzeigen**“, um zu bestimmten Interaktionen zu springen

## Schritt 4: Programmgesteuert auf Aufzeichnungen zugreifen
<a name="session-replay-step4"></a>

Greifen Sie mithilfe des Amazon Bedrock AgentCore SDK und der APIs für benutzerdefinierte Integration und automatisierte Analysen programmatisch auf Live-Ansicht und Aufzeichnung von Erkenntnissen zu.

### Programmatischer Live-View-Zugriff
<a name="programmatic-live-view"></a>

Stellen Sie mithilfe des Browser-Clients und des Viewer-Servers eine Connect zu Live-Browsersitzungen her:

```
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()
```

### Zugriff auf programmatische Aufzeichnungen
<a name="programmatic-recording-access"></a>

Greifen Sie für benutzerdefinierte Analyse-Workflows direkt von Amazon S3 aus auf Aufzeichnungsdaten zu:

```
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()
```

Datenstruktur aufzeichnen:

```
s3://your-recording-bucket/browser-recordings/
  └── session-id/
      ├── batch_1.ndjson.gz
      ├── batch_2.ndjson.gz
      └── batch_3.ndjson.gz
```

Bei jeder Sitzung wird ein Ordner mit der Sitzungs-ID erstellt, und die Aufzeichnungsdaten werden im Verlauf der Sitzung in Abschnitten hochgeladen.

## Programmatische Beispiele für die Sitzungswiedergabe
<a name="session-replay-programmatic-usage"></a>

Für fortgeschrittene Anwendungsfälle können Sie benutzerdefinierte Viewer für die Sitzungswiedergabe erstellen und Aufzeichnungsdaten in Ihre eigenen Analyse-Workflows integrieren.

Die folgenden GitHub Beispiele zeigen einen eigenständigen Viewer für die Sitzungswiedergabe und zeigen, wie das gesamte Browsererlebnis bei Verwendung der Browser-Sitzungswiedergabefunktion aussieht.

Weitere Beispiele finden Sie unter [AgentCore Browser-Beispiele](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/) auf. GitHub

### Eigenständiger Viewer für die Sitzungswiedergabe
<a name="session-replay-standalone"></a>

Der Standalone Session Replay Viewer ist ein separates Tool zum Anzeigen aufgezeichneter Browsersitzungen direkt von Amazon S3 aus, ohne einen neuen Browser erstellen zu müssen.
+ Stellen Sie eine direkte Verbindung zu S3 her, um Aufzeichnungen anzusehen
+ Zeigen Sie alle früheren Aufzeichnungen an, indem Sie deren Sitzungs-ID angeben
+ Zeigt Fehlermeldungen an, wenn Artefakte in S3 fehlen, wobei die Konsolenwiedergabe-URLs für die Sitzungs-ID spezifisch sind
+ Interaktive Oberfläche für die Videowiedergabe mit Timeline-Navigation
+ Aktionsmarkierungen auf der Timeline zeigen das Ausfüllen von Formularen, Klicks und Navigationsereignisse
+ Beobachtbarkeitstabelle, in der die aufgerufenen Seiten mit Dauer und URL-Details angezeigt werden
+ Konsolenereignisse, CDP-Protokolle und Netzwerkprotokolle für jede Seiteninteraktion
+ Die Verfolgung der Sitzungsdauer ist auf Seitenebene integriert
+ Real-time Überprüfung von Aktionen mit visueller Korrelation zwischen Video- und Aktionsdaten

```
# 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
```

Weitere Informationen finden Sie unter [Standalone-Wiedergabe-Viewer für Sitzungen einschalten 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).

### Umfassendes Browser-Erlebnis mit Aufzeichnung und Wiedergabe
<a name="session-replay-complete"></a>

Ein umfassendes Tool zum Erstellen von Browsersitzungen mit Aufzeichnungsfunktionen und erweiterten Wiedergabefunktionen.
+ Erstellen Sie Browsersitzungen mit automatischer Aufzeichnung auf S3
+ Live-Ansicht mit interaktiver Steuerung (take/release)
+ Passen Sie die Bildschirmauflösung im Handumdrehen an
+ Automatische Sitzungsaufzeichnung auf S3
+ Integrierter Viewer für die Sitzungswiedergabe mit Videoplayer-Oberfläche
+ Zeitleistenbereinigung mit präziser Ortung von Aktionen
+ Page-by-page Analyse mit Navigationszeitleiste und URL-Kopierung
+ Überprüfung der Aktion beim Ausfüllen des Formulars mit Angaben zum Standort
+ Die Erfassung der Sitzungsdauer ist auf Seitenebene integriert
+ Real-time Überprüfung von Aktionen mit visueller Korrelation zwischen Video- und Aktionsdaten

```
# View the latest recording in a bucket
python -m live_view_sessionreplay.browser_interactive_session
```

Weitere Informationen finden Sie unter [Interaktive Browsersitzung am 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).