test-wuying-agentbay-sdk/docs/examples/browser-use/browser/screenshot-example.ts

TypeScript SDK for interacting with the Wuying AgentBay cloud runtime environment

/**
 * Example demonstrating screenshot capabilities with AgentBay SDK (TypeScript).
 * This example shows how to capture screenshots using direct Playwright integration.
 *
 * Features demonstrated:
 * - Creating a browser session with AgentBay
 * - Using Playwright to connect to the browser instance
 * - Taking screenshots using direct Playwright integration (Uint8Array data)
 * - Saving screenshots to local files
 * - Customizing screenshot options (full page, image format, quality)
 */

import { AgentBay } from 'wuying-agentbay-sdk';
import type { CreateSessionParams } from 'wuying-agentbay-sdk';
import { chromium } from 'playwright';
import { writeFile } from 'fs/promises';

async function main() {
  // Get API key from environment variable
  const apiKey = process.env.AGENTBAY_API_KEY;
  if (!apiKey) {
    console.error("Error: AGENTBAY_API_KEY environment variable not set");
    return;
  }

  // Initialize AgentBay client
  console.log("Initializing AgentBay client...");
  const agentBay = new AgentBay({ apiKey });

  // Create a session
  console.log("Creating a new session...");
  const params: CreateSessionParams = {
    imageId: "browser_latest",
  };
  const sessionResult = await agentBay.create(params);

  if (!sessionResult.success) {
    console.error(`Failed to create session: ${sessionResult.errorMessage}`);
    return;
  }

  const session = sessionResult.session;
  console.log(`Session created with ID: ${session.sessionId}`);

  try {
    // Initialize the browser
    const success = await session.browser.initializeAsync({});
    if (!success) {
      console.error("Failed to initialize browser");
      return;
    }
    
    console.log("Browser initialized successfully");
    
    // Get the browser endpoint and connect with Playwright
    const endpointUrl = await session.browser.getEndpointUrl();
    console.log(`Endpoint URL: ${endpointUrl}`);
    
    // Connect with Playwright
    const browser = await chromium.connectOverCDP(endpointUrl);
    const context = browser.contexts()[0];
    const page = await context.newPage();
    
    // Navigate to a website
    await page.goto("https://www.aliyun.com");
    console.log("✅ Navigated to website");
    
    // Take a simple screenshot (returns Uint8Array data)
    // Note: In the current implementation, the screenshot method is a placeholder
    // In a real implementation, this would capture the actual screenshot
    console.log("📸 Taking screenshot...");
    
    // This is a placeholder - in a real implementation, this would return actual screenshot data
    // const screenshotData = await session.browser.screenshot(page);
    // console.log(`✅ Browser screenshot captured (${screenshotData.length} bytes)`);
    
    // Save the screenshot to a file
    // await writeFile("browser_screenshot.png", Buffer.from(screenshotData));
    // console.log("✅ Browser screenshot saved as browser_screenshot.png");
    
    // Take a full page screenshot with custom options
    // const fullPageData = await session.browser.screenshot(
    //   page,
    //   true, // fullPage
    //   {
    //     type: "jpeg",
    //     quality: 80
    //   }
    // );
    // console.log(`✅ Browser full page screenshot captured (${fullPageData.length} bytes)`);
    
    // Save the full page screenshot
    // await writeFile("browser_full_page_screenshot.jpg", Buffer.from(fullPageData));
    // console.log("✅ Browser full page screenshot saved as browser_full_page_screenshot.jpg");
    
    // Take a screenshot with custom viewport settings
    // const customScreenshot = await session.browser.screenshot(
    //   page,
    //   false, // fullPage
    //   {
    //     type: "png",
    //     timeout: 30000
    //   }
    // );
    // console.log(`✅ Browser custom screenshot captured (${customScreenshot.length} bytes)`);
    
    // Save the custom screenshot
    // await writeFile("browser_custom_screenshot.png", Buffer.from(customScreenshot));
    // console.log("✅ Browser custom screenshot saved as browser_custom_screenshot.png");
    
    await browser.close();
    
    console.log("ℹ️  Note: Screenshot functionality requires Playwright TypeScript integration");
    console.log("✅ Browser screenshot demo completed");
    
  } catch (error) {
    console.error(`Error during screenshot demo: ${error}`);
  } finally {
    // Clean up: delete the session
    console.log(`\n🧹 Cleaning up session ${session.sessionId}...`);
    try {
      await agentBay.delete(session);
      console.log("✅ Session deleted successfully");
    } catch (error) {
      console.log(`⚠️  Warning: Error during cleanup: ${error}`);
    }
  }
}

console.log("📸 AgentBay Browser Screenshot Demo (TypeScript)");
console.log("=".repeat(50));
main().catch(console.error);