# Real-Time Monitoring

**Browser Swarm** offers robust real-time monitoring capabilities, enabling you to observe and interact with your browser sessions as they happen. This feature is invaluable for debugging, human-in-the-loop interventions, and embedding live browser views into your applications.

***

### 🔍 Live View Overview

The **Live View** provides an interactive window into your active browser sessions, allowing you to:

* **Observe**: Watch the browser's actions in real-time, including navigation, clicks, and form interactions.
* **Interact**: Manually control the browser session by clicking, typing, or scrolling within the Live View.
* **Embed**: Integrate the Live View into your own applications via an iframe for seamless user experiences.

This functionality is particularly useful when dealing with complex automation tasks that may require human oversight or intervention.

***

### ⚙️ Accessing Live View

To access the Live View for a session, use the `getLiveViewUrl` method provided by the **Browser Swarm SDK**. This method returns a URL that can be opened in a browser or embedded in an iframe.

#### Example:

{% tabs %}
{% tab title="Node.js " %}

```javascript
import { BrowserSwarm } from 'browser-swarm-sdk';

const bs = new BrowserSwarm({ apiKey: process.env.BROWSER_SWARM_API_KEY });

const session = await bs.sessions.create({
  projectId: process.env.BROWSER_SWARM_PROJECT_ID,
  // Additional session configuration
});

const liveViewUrl = await bs.sessions.getLiveViewUrl(session.id);
console.log(`Live View URL: ${liveViewUrl}`);
```

{% endtab %}

{% tab title="Python" %}

```python
from browser_swarm import BrowserSwarm
import os

bs = BrowserSwarm(api_key=os.environ["BROWSER_SWARM_API_KEY"])

session = bs.sessions.create(
    project_id=os.environ["BROWSER_SWARM_PROJECT_ID"],
    # Additional session configuration
)

live_view_url = bs.sessions.get_live_view_url(session.id)
print(f"Live View URL: {live_view_url}")
```

{% endtab %}
{% endtabs %}

Once you have the Live View URL, you can open it in your browser to monitor the session or embed it into your application as needed.

***

### 🧩 Embedding Live View

To embed the Live View into your application, use an `<iframe>` element with the obtained URL.

#### Read-Only View

```html
<iframe
  src="{liveViewUrl}"
  sandbox="allow-same-origin allow-scripts"
  allow="clipboard-read; clipboard-write"
  style="pointer-events: none; width: 100%; height: 600px;"
></iframe>
```

#### Interactive View

```html
<iframe
  src="{liveViewUrl}"
  sandbox="allow-same-origin allow-scripts allow-forms"
  allow="clipboard-read; clipboard-write"
  style="width: 100%; height: 600px;"
></iframe>
```

Adjust the `sandbox` attributes and styles according to your application's requirements.

***

### 📱 Mobile Viewports

To simulate mobile devices in the Live View, configure the session's viewport and user agent settings during creation.

#### Example

{% tabs %}
{% tab title="Node.js " %}

```javascript
const session = await bs.sessions.create({
  projectId: process.env.BROWSER_SWARM_PROJECT_ID,
  browserSettings: {
    viewport: { width: 375, height: 667 },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X)...',
  },
});
```

{% endtab %}

{% tab title="Python " %}

```python
session = bs.sessions.create(
    project_id=os.environ["BROWSER_SWARM_PROJECT_ID"],
    browser_settings={
        "viewport": {"width": 375, "height": 667},
        "user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X)...",
    },
)
```

{% endtab %}
{% endtabs %}

This setup ensures that the Live View accurately reflects the appearance and behavior of a mobile device.

***

### 🛠️ Use Cases

* **Debugging**: Identify and resolve issues in real-time by observing session behavior.
* **Human-in-the-Loop**: Allow human intervention during automation tasks for inputs like CAPTCHA solving or complex navigation.
* **User Support**: Assist users by observing their interactions and providing guidance through embedded Live Views.
* **Demonstrations**: Showcase automation workflows live within presentations or applications.

***

By leveraging the Real-Time Monitoring capabilities of **Browser Swarm**, you can enhance the reliability and interactivity of your browser automation tasks.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://browserswarm.gitbook.io/docs/real-time-monitoring.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.