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:

Node.js

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}`);

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}")

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

<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

<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

Node.js

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)...',
  },
});

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)...",
    },
)

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.