Bulk Screenshots

The Screenshots API allows you to capture multiple web pages efficiently using webhooks for asynchronous processing. This guide shows you how to implement bulk screenshot functionality in your application.

How Bulk Screenshots Work

Instead of making individual requests for each URL, you can:

1. Send multiple requests with webhooks
2. Process them in parallel on the server
3. Receive callbacks for each completed screenshot

Implementation Example

Here's how to implement bulk screenshots in your application:

async function takeBulkScreenshots(urls, options = {}) {
  const results = await Promise.all(
    urls.map(url => 
      fetch('https://api.screenshotsapi.dev/screenshot', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          url,
          webhook: 'https://your-webhook-url.com/callback',
          ...options
        })
      })
    )
  );
  
  return await Promise.all(results.map(r => r.json()));
}
 
// Webhook handler
app.post('/callback', async (req, res) => {
  const { status, url, metadata } = req.body;
  
  if (status === 'success') {
    // Store the screenshot URL and metadata
    await db.screenshots.create({
      url,
      metadata,
      status: 'completed'
    });
  } else {
    // Handle the error
    await db.screenshots.create({
      url: req.body.originalUrl,
      status: 'failed',
      error: req.body.error
    });
  }
  
  res.status(200).send('OK');
});

Best Practices

1. Rate Limiting:

   • Monitor your API usage
   • Implement exponential backoff for retries
   • Stay within your plan's limits

2. Error Handling:

   • Implement proper error handling for each request
   • Log failed attempts for retry
   • Monitor webhook responses

3. Performance:

   • Use appropriate timeouts
   • Process webhooks quickly
   • Store results efficiently

4. Security:

   • Validate webhook requests
   • Use HTTPS for webhooks
   • Secure your API keys

Webhook Payload

For each screenshot in your bulk request, you'll receive a webhook with:

{
  "status": "success",
  "url": "https://your-bucket.s3.amazonaws.com/screenshots/example.jpg",
  "metadata": {
    "width": 1920,
    "height": 1080,
    "format": "jpeg",
    "timestamp": "2024-03-20T12:00:00Z"
  },
  "originalUrl": "https://example.com"
}

Monitoring Progress

To track the progress of your bulk requests:

1. Store request IDs when initiating screenshots
2. Record webhook responses in your database
3. Implement a status endpoint to check progress
4. Set up alerts for failed requests

Common Use Cases

1. Website Monitoring: Capture regular screenshots of multiple pages
2. Competitor Analysis: Track changes across multiple websites
3. Content Archiving: Preserve web content for future reference
4. Quality Assurance: Verify website appearance across different pages