Screenshot & Snapshot

async function captureScreenshot(url, options = {}) {
  const response = await fetch('https://api.webpeek.dev/snapshot', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      url,
      ...options
    })
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  return data;
}

// Example 1: Basic screenshot
const screenshot = await captureScreenshot('https://github.com', {
  fullPage: true,
  format: 'png'
});

console.log('Screenshot URL:', screenshot.screenshot_url);
console.log('Size:', screenshot.size_bytes, 'bytes');
console.log('Dimensions:', `${screenshot.width}x${screenshot.height}`);
console.log('Created at:', screenshot.created_at);

// Example 2: Download screenshot from URL (Node.js)
const fs = require('fs');
const https = require('https');

const file = fs.createWriteStream('screenshot.png');
https.get(screenshot.screenshot_url, (response) => {
  response.pipe(file);
  file.on('finish', () => {
    file.close();
    console.log('Screenshot downloaded successfully');
  });
});

// Example 3: High-quality retina screenshot
const retinaScreenshot = await captureScreenshot('https://github.com', {
  viewport: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 2
  },
  format: 'webp',
  quality: 90,
  waitUntil: 'networkidle2'
});

import requests
import base64
from pathlib import Path

def capture_screenshot(url, **options):
    payload = {'url': url, **options}
    response = requests.post(
        'https://api.webpeek.dev/snapshot',
        json=payload
    )
    response.raise_for_status()
    return response.json()

def save_screenshot(url, filename, **options):
    # Get screenshot data
    data = capture_screenshot(url, **options)

    # Download screenshot from URL
    import urllib.request
    urllib.request.urlretrieve(data['screenshot_url'], filename)

    print(f"Screenshot saved to {filename}")
    print(f"URL: {data['screenshot_url']}")
    print(f"Size: {data['size_bytes']} bytes")
    print(f"Dimensions: {data['width']}x{data['height']}")
    print(f"Format: {data['format']}")

    return data

# Example 1: Full page screenshot
screenshot = save_screenshot(
    'https://github.com',
    'screenshot.png',
    fullPage=True,
    format='png'
)

# Example 2: Mobile screenshot
mobile_screenshot = save_screenshot(
    'https://github.com',
    'mobile-screenshot.png',
    device='mobile'
)

# Example 3: High-quality WebP with custom viewport
webp_screenshot = save_screenshot(
    'https://github.com',
    'screenshot.webp',
    viewport={
        'width': 1920,
        'height': 1080,
        'deviceScaleFactor': 2
    },
    format='webp',
    quality=90,
    waitUntil='networkidle2'
)

<?php

function captureScreenshot($url, $options = []) {
    $payload = array_merge(['url' => $url], $options);

    $ch = curl_init('https://api.webpeek.dev/snapshot');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/json'
    ]);

    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($httpCode !== 200) {
        throw new Exception("HTTP error: $httpCode");
    }

    $data = json_decode($response, true);
    if ($data === null) {
        throw new Exception('Failed to decode JSON response');
    }

    return $data;
}

function saveScreenshot($url, $filename, $options = []) {
    $data = captureScreenshot($url, $options);

    // Download screenshot from URL
    $imageData = file_get_contents($data['screenshot_url']);
    file_put_contents($filename, $imageData);

    echo "Screenshot saved to $filename\n";
    echo "URL: {$data['screenshot_url']}\n";
    echo "Size: {$data['size_bytes']} bytes\n";
    echo "Dimensions: {$data['width']}x{$data['height']}\n";
    echo "Format: {$data['format']}\n";

    return $data;
}

// Example 1: Full page screenshot
$screenshot = saveScreenshot(
    'https://github.com',
    'screenshot.png',
    ['fullPage' => true, 'format' => 'png']
);

// Example 2: Mobile screenshot
$mobileScreenshot = saveScreenshot(
    'https://github.com',
    'mobile-screenshot.png',
    ['device' => 'mobile']
);

// Example 3: High-quality WebP with custom viewport
$webpScreenshot = saveScreenshot(
    'https://github.com',
    'screenshot.webp',
    [
        'viewport' => [
            'width' => 1920,
            'height' => 1080,
            'deviceScaleFactor' => 2
        ],
        'format' => 'webp',
        'quality' => 90,
        'waitUntil' => 'networkidle2'
    ]
);

?>

import { useState } from 'react';

interface ScreenshotData {
  screenshot_url: string;
  size_bytes: number;
  width: number;
  height: number;
  format: string;
  created_at: string;
}

export function ScreenshotViewer() {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [screenshot, setScreenshot] = useState<ScreenshotData | null>(null);
  const [error, setError] = useState<string | null>(null);

  const captureScreenshot = async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('https://api.webpeek.dev/snapshot', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          url,
          fullPage: false,
          format: 'png',
        })
      });

      if (!response.ok) {
        throw new Error('Failed to capture screenshot');
      }

      const data = await response.json();
      setScreenshot(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex gap-2">
        <input
          type="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="Enter URL..."
          className="flex-1 px-4 py-2 border rounded"
        />
        <button
          onClick={captureScreenshot}
          disabled={loading || !url}
          className="px-6 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
        >
          {loading ? 'Capturing...' : 'Capture'}
        </button>
      </div>

      {error && (
        <div className="p-4 bg-red-100 text-red-700 rounded">
          {error}
        </div>
      )}

      {screenshot && (
        <div className="space-y-2">
          <img
            src={screenshot.screenshot_url}
            alt="Screenshot"
            className="w-full border rounded shadow-lg"
          />
          <div className="text-sm text-gray-600">
            <p>Size: {(screenshot.size_bytes / 1024).toFixed(2)} KB</p>
            <p>
              Dimensions: {screenshot.width}x{screenshot.height}
            </p>
            <p>Format: {screenshot.format}</p>
            <p>Captured: {new Date(screenshot.created_at).toLocaleString()}</p>
          </div>
        </div>
      )}
    </div>
  );
}