https://github.com/pew/cloudflare-workers-browser-rendering

Take a screenshot of a website using the Cloudflare Workers Browser Rendering API
https://github.com/pew/cloudflare-workers-browser-rendering

cloudflare cloudflare-r2 cloudflare-workers puppeteer

Last synced: about 1 month ago
JSON representation

Take a screenshot of a website using the Cloudflare Workers Browser Rendering API

• Host: GitHub
• URL: https://github.com/pew/cloudflare-workers-browser-rendering
• Owner: pew
• Created: 2023-05-20T10:18:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-03T21:57:11.000Z (about 1 year ago)
• Last Synced: 2024-05-16T12:58:49.576Z (8 months ago)
• Topics: cloudflare, cloudflare-r2, cloudflare-workers, puppeteer
• Language: TypeScript
• Homepage:
• Size: 80.1 KB
• Stars: 19
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cloudflare Workers Puppeteer

Just playing around with the [Workers Browser Rendering API](https://blog.cloudflare.com/browser-rendering-open-beta/)

It'll accept an URL, uses the Browser API to capture a screenshot of the full page and saves it to R2.

**install everything:**

```shell

npm i

```

**create R2 bucket:**

```shell

npx wrangler r2 bucket create my-bucket

```

rename `wrangler.example.toml` to `wrangler.toml` and add the r2 binding to it:

```toml

r2_buckets  = [

  { binding = "puppeteer", bucket_name = "my-bucket"}

]

```

you may want to make the r2 bucket public so you can access the screenshot directly, the Worker will do an redirect. Put the public bucket url into `wrangler.toml` as the `bucketUrl` environment variable.

**deploy everything:**

```shell

npm run deploy

```

**take a screenshot:**

```

https://your-worker.cool.workers.dev/?url=https://www.youtube.com/watch?v=dQw4w9WgXcQ

```