Browser Swarm Docs
  • 🚀Welcome
    • What is Browser Swarm?
  • Understanding Headless Browsers
  • Quickstart Guide
  • Framework Compatibility
  • 🌟 Core Concepts
    • Starting a Browser Task
  • Interacting with Browser Tasks
  • Task Lifecycle Management
  • ⚙️Advanced Features
    • Stealth Automation
  • Proxy Integration
  • Real-Time Monitoring
  • Responsive Viewports
  • Session Debugging & Replay
  • File Handling (Downloads & Uploads)
  • Capturing Screenshots & PDFs
  • Persistent Contexts
  • Extension Support
  • Session Tagging & Metadata
  • 🎯Practical Examples
    • Automating Form Interactions
  • Efficient Data Scraping
  • Automated Web Testing
  • Cost Optimization Strategies
  • Handling Extended Tasks
  • Selecting Execution Regions
  • Monitoring Resource Usage
  • Leveraging Task Metadata
  • Pricing and Subscription
  • Account and Team Management
  • Managing Limits and Concurrency
  • Authentication Automation
  • Security Best Practices
  • 🔌Ecosystem Integrations
    • Integration Overview
  • 💻Developer Resources
    • APIs and SDKs Overview
  • Node.js Integration
  • Python Integration
  • Browser Task API
  • Project Management API
  • Context Management API
  • Browser Extensions API
  • 🙋‍♂️Support & Resources
    • Getting Help
  • Dashboard Overview
  • FAQs & Troubleshooting
Powered by GitBook
On this page
  • 🔍 Live View Overview
  • ⚙️ Accessing Live View
  • 🧩 Embedding Live View
  • 📱 Mobile Viewports
  • 🛠️ Use Cases

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:

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

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

PreviousProxy IntegrationNextResponsive Viewports

Last updated 1 month ago