Laravel 11 - BrowserShot

Quick Overview

Step # 1 : Create a fresh Laravel project or use an existing one.

laravel new browserShot

composer create-project laravel/laravel --prefer-dist browserShot

1. Would you like to install the starter kit? — Choose none.
2. Select the testing framework. — Choose Pest.
3. Select the database for your application. — Choose mysql.
4. Run the default database migration? — Choose yes.
   
   

Step # 2 : Access the project.

cd c:xampp/htdocs/browserShot

Step # 3 : Install BrowserShot and Dependencies.

composer require spatie/browsershot

npm install puppeteer

Step # 4 : Create BrowserShot Controller.

php artisan make:controller BrowserShotController

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Spatie\Browsershot\Browsershot;
class BrowserShotController extends Controller
{
    public function capture()
    {
    // Define directory and file path
        $directory = public_path('Browsershot');
        $filePath = $directory . '/' . time() . 'screenshot.png';
    // Ensure the directory exists before saving the file (Browsershot doesn't create directories like Laravel's storage helper)
        if (!file_exists($directory)) {
            mkdir($directory, 0755, true);
        }
    // Capture a screenshot of the given URL with a specific window size, ensuring the page is fully loaded before saving the image
        Browsershot::url('https://www.codeshotcut.com/')
        ->windowSize(1920, 1080)
        ->waitUntilNetworkIdle()
        ->save($filePath);
        return "Screenshot saved at: " . $filePath;
    }
}

Step # 5 : Define a Route.

use App\Http\Controllers\BrowserShotController;

Route::get('/screenshot', [BrowserShotController::class, 'capture']);

Step # 6 : It's time to test BrowserShot.

php artisan serve

    public function capture()
    {
    // Define directory and file path
    $directory = public_path('Browsershot');
    $filePath = $directory . '/' . time() . 'document.pdf';
    // Ensure the directory exists before saving the file (Browsershot doesn't create directories like Laravel's storage helper)
    if (!file_exists($directory)) {
        mkdir($directory, 0755, true);
    }
    // Capture a PDF of the given URL, ensuring the page is fully loaded before saving the document
    Browsershot::url('https://www.placeholder.com/')
        ->waitUntilNetworkIdle()
        ->savePdf($filePath);
    return "PDF saved at: " . $filePath;
    }

    public function capture()
    {
    // Define directory and file path
        $directory = public_path('Browsershot');
        $filePath = $directory . '/' . time() . 'screenshot.png';
    // Create directory if not exists
        if (!file_exists($directory)) {
            mkdir($directory, 0755, true);
        }
    // Ensures the entire page is captured (Desktop Size)
        Browsershot::url('https://www.placeholder.com/')
        ->windowSize(1920, 1080)
        ->waitUntilNetworkIdle()
        ->fullPage()
        ->save($filePath);
        return "Screenshot saved at: " . $filePath;
    }

    public function capture()
    {
    // Define directory and file path
        $directory = public_path('Browsershot');
        $filePath = $directory . '/' . time() . 'screenshot.png';
    // Create directory if not exists
        if (!file_exists($directory)) {
            mkdir($directory, 0755, true);
        }
    // Alternatively, for mobile size, use a mobile user agent to ensure the website loads the mobile version for accurate capture.
        Browsershot::url('https://codeshotcut.com/')
        ->windowSize(375, 667)
        ->userAgent('Mozilla/5.0 (Linux; Android 10; Pixel 3 XL) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36')
        ->waitUntilNetworkIdle()
        ->save($filePath);
        return "Screenshot saved at: " . $filePath;
    }

Conclusion