My message was because you pinged Walshy randomly, and not for moderation reasons or from a prior co

IIsaac McFadyen My message was because you pinged Walshy randomly, and not for moderation reason...

C

ceddy•9/8/24, 3:29 PM

https://tenor.com/view/why-persian-room-cat-guardian-but-why-trendizisst-anyaboz-gif-2156104475561014590

Tenor

S

ShaqLite•9/12/24, 8:24 PM

HI Im confused between a browser, session and context.
My use-cases is I need to take screenshots of say 20 pages simkultaneously. (they can be from the same browser /sessions / context / connection)
There are 2 browsers allowed, but can I use these to spawn multiple URLs simultaneously? and if so whats the maximum number of URLs I can open per browser?

.

.gwapes•9/14/24, 6:24 PM

Do you not want the env parameter cf sends whenever the fetch event etc runs?

.

.gwapes•9/14/24, 6:48 PM

My experience and knowledge is pretty much null, but I don’t think process.env.xxx works on workers since it’s all in the env object

.

.gwapes•9/14/24, 6:49 PM

Wrangler dev would use your local system iirc, so process.env would work

Sscythe Yeah, you can open diff tabs. If you open too many though you can go over the br...

M

Mr. Technician•9/15/24, 4:56 AM

can separate tabs in the same browser session be interacted with simultaneously?

A

Advany•9/16/24, 11:05 AM

Do I need to enable browser rendering? I am on a paid plan.

Keep getting the same error (its deployed):


Error during Puppeteer rendering: TypeError: Cannot read properties of undefined (reading 'fetch')
    at PuppeteerWorkers.launch (index.js:11855:32)
    at Browser2.fetch (index.js:13414:59) {
  stack: TypeError: Cannot read properties of undefined (re…855:32)
    at Browser2.fetch (index.js:13414:59),
  message: Cannot read properties of undefined (reading 'fetch')
}


Error during Puppeteer rendering: TypeError: Cannot read properties of undefined (reading 'fetch')
    at PuppeteerWorkers.launch (index.js:11855:32)
    at Browser2.fetch (index.js:13414:59) {
  stack: TypeError: Cannot read properties of undefined (re…855:32)
    at Browser2.fetch (index.js:13414:59),
  message: Cannot read properties of undefined (reading 'fetch')
}


Error during Puppeteer rendering: TypeError: Cannot read properties of undefined (reading 'fetch')
    at PuppeteerWorkers.launch (index.js:11855:32)
    at Browser2.fetch (index.js:13414:59) {
  stack: TypeError: Cannot read properties of undefined (re…855:32)
    at Browser2.fetch (index.js:13414:59),
  message: Cannot read properties of undefined (reading 'fetch')
}


Error during Puppeteer rendering: TypeError: Cannot read properties of undefined (reading 'fetch')
    at PuppeteerWorkers.launch (index.js:11855:32)
    at Browser2.fetch (index.js:13414:59) {
  stack: TypeError: Cannot read properties of undefined (re…855:32)
    at Browser2.fetch (index.js:13414:59),
  message: Cannot read properties of undefined (reading 'fetch')
}

AAdvany Do I need to enable browser rendering? I am on a paid plan. Keep getting the sa...

A

Advany•9/16/24, 11:15 AM

found the issue

browser = { binding = "MY_BROWSER" }

browser = { binding = "MY_BROWSER" }

browser = { binding = "MY_BROWSER" }

browser = { binding = "MY_BROWSER" }

AAdvany found the issue ```browser = { binding = "MY_BROWSER" }```

A

Advany•9/16/24, 11:16 AM

this syntax in wrangler works but

[browser]
binding = "MY_BROWSER"

[browser]
binding = "MY_BROWSER"

[browser]
binding = "MY_BROWSER"

[browser]
binding = "MY_BROWSER"

doesn't work

J

JFK•9/16/24, 2:47 PM

"The "Download PDF" button triggers a direct download. Unfortunately, Puppeteer running in a Cloudflare Worker environment does not have direct support for file downloads."

Is this true? Or is the AI hallucinating.

I'm trying to download a pdf that does not come as a network payload, but is generated client side with js

A

Advany•9/24/24, 11:20 AM

how do I debug these kidns of errors like server abnormal shutdown and chromium chrashed?

AAdvany how do I debug these kidns of errors like server abnormal shutdown and chromium ...

P

Peps•9/24/24, 4:07 PM

Best is to create a support ticket for this, as the team for this product isn't active on the discord

B

Boyd•9/24/24, 4:21 PM

Hello everyone! We've got a pipeline working where screenshots are taken of specific routes in our app that we want to use for generating thumbnail previews of pages — ~~however when the pages contain CSS filters on images (right side of the browser window) the filters are not applied.~~ Additionally, when we use backdrop filter blur on a content area (left side of the browser window) the backdrop blur is rendered but the content of the div is not.

The attached screenshot is a preview of the Cloudflare Browser Rendering API result positioned over top of the actual page that was being screenshot in the browser.

Is there anything we can do from our side to better troubleshoot this? We've done everything we can as far as vendor prefixing to make the effects as backwards compatible as possible. Are we hitting limits of the Browser Rendering API or are there ways to work around the issue?

Thanks in advance for your time!

Screenshot_2024-09-24_at_11.52.10_AM.png

C

cloudkite•9/25/24, 5:53 AM

Workaround for local puppeteer dev:

dev/run script:

import * as chromeLauncher from "chrome-launcher";
  let chrome = await chromeLauncher.launch({
    port: await allocatePort(),
    chromeFlags: ["--headless", "--disable-gpu"],
    logLevel: "info",
  });

  let chromeInfo = (await fetch(`http://localhost:${chrome.port}/json/version`).then(
    (res) => res.json(),
  )) as { webSocketDebuggerUrl: string };

let browserWsEndpoint = chromeInfo.webSocketDebuggerUrl;

// then either write out .dev.vars or pass direct to wrangler
exec(`wrangler dev --var BROWSER_WS_ENDPOINT:${browserWsEndpoint}`)

import * as chromeLauncher from "chrome-launcher";
  let chrome = await chromeLauncher.launch({
    port: await allocatePort(),
    chromeFlags: ["--headless", "--disable-gpu"],
    logLevel: "info",
  });

  let chromeInfo = (await fetch(`http://localhost:${chrome.port}/json/version`).then(
    (res) => res.json(),
  )) as { webSocketDebuggerUrl: string };

let browserWsEndpoint = chromeInfo.webSocketDebuggerUrl;

// then either write out .dev.vars or pass direct to wrangler
exec(`wrangler dev --var BROWSER_WS_ENDPOINT:${browserWsEndpoint}`)

import * as chromeLauncher from "chrome-launcher";
  let chrome = await chromeLauncher.launch({
    port: await allocatePort(),
    chromeFlags: ["--headless", "--disable-gpu"],
    logLevel: "info",
  });

  let chromeInfo = (await fetch(`http://localhost:${chrome.port}/json/version`).then(
    (res) => res.json(),
  )) as { webSocketDebuggerUrl: string };

let browserWsEndpoint = chromeInfo.webSocketDebuggerUrl;

// then either write out .dev.vars or pass direct to wrangler
exec(`wrangler dev --var BROWSER_WS_ENDPOINT:${browserWsEndpoint}`)

import * as chromeLauncher from "chrome-launcher";
  let chrome = await chromeLauncher.launch({
    port: await allocatePort(),
    chromeFlags: ["--headless", "--disable-gpu"],
    logLevel: "info",
  });

  let chromeInfo = (await fetch(`http://localhost:${chrome.port}/json/version`).then(
    (res) => res.json(),
  )) as { webSocketDebuggerUrl: string };

let browserWsEndpoint = chromeInfo.webSocketDebuggerUrl;

// then either write out .dev.vars or pass direct to wrangler
exec(`wrangler dev --var BROWSER_WS_ENDPOINT:${browserWsEndpoint}`)

then in your worker:

import puppeteer from "@cloudflare/puppeteer";
  let browserWSEndpoint = env.BROWSER_WS_ENDPOINT;
  return await puppeteer.connect(browserWSEndpoint ? { browserWSEndpoint } : env.BROWSER);

import puppeteer from "@cloudflare/puppeteer";
  let browserWSEndpoint = env.BROWSER_WS_ENDPOINT;
  return await puppeteer.connect(browserWSEndpoint ? { browserWSEndpoint } : env.BROWSER);

import puppeteer from "@cloudflare/puppeteer";
  let browserWSEndpoint = env.BROWSER_WS_ENDPOINT;
  return await puppeteer.connect(browserWSEndpoint ? { browserWSEndpoint } : env.BROWSER);

import puppeteer from "@cloudflare/puppeteer";
  let browserWSEndpoint = env.BROWSER_WS_ENDPOINT;
  return await puppeteer.connect(browserWSEndpoint ? { browserWSEndpoint } : env.BROWSER);

PPeps Best is to create a support ticket for this, as the team for this product isn't ...

A

Advany•9/25/24, 8:24 AM

thanks a lot!

Oom Can anyone explain this please

C

cloudkite•9/25/24, 7:02 PM

use "chrome-launcher" to launch chrome and get a wsEndpoint for a local browser. Write this to .dev.vars which gets picked up by wrangler dev OR run wrangler dev in same script passing in wsEndpoint through the CLI as a variable. In your worker code check if that ENV variable is present and launch puppeteer with wsEndpoint instead. Since that env variable only exists in dev, in production it uses browser from cloudflare instead

AAdvany found the issue ```browser = { binding = "MY_BROWSER" }```

A

AGill•9/26/24, 2:29 AM

Hey I'm getting the same error. Trying to add the browser binding to my Nuxt3 project. May I ask what framework you are using? And mind sharing what your full

wrangler.toml

wrangler.toml

looks like?

A

AGill•9/26/24, 4:05 AM

^ was able to add the binding. I used the CF API to add the binding manually: https://developers.cloudflare.com/api/operations/pages-project-update-project

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

A

AGill•9/26/24, 4:06 AM

Where would be the best place to make a feature request on configuring browser binding via the dashboard?

B

Boyd•9/26/24, 7:31 PM

Hey, me again. Using the Browser Renderer I'm unable to get Google Fonts to load in screenshots. It's always a fallback font. I there anything I need to do in my configuruation for the puppeteer instance to enable 3rd-party assets such as Google Fonts? I can confirm they're loading fine when accessed directly.

V

Vikash•9/27/24, 10:38 AM

Can we request to increase concurrent browsers limit?

Do CF consider such requests or is it fixed to max 2 per account and can't change?

A

Advany•9/28/24, 7:27 AM

They didnt annouce a change...

A

Advany•9/30/24, 7:59 PM

anyone using puppeteer with other services?

1

1984 Ford Laser•10/1/24, 7:56 AM

Apologies if this has been brought up before, does the limit of 2 concurrent browsers per account include every DO that have a BR worker? I would be looking to have say 20 DOs concurrently run 1 browser instance/session each

K

kol3x•10/3/24, 12:53 PM

Is any special configuration required to run vitest on a Worker that uses browser rendering? Since it's only able to run locally with --remote - I wonder if it's possible at all

R

Roman•10/6/24, 3:45 PM

Hi all! Does Cloudflare Puppeteer support passing proxy server? This works for regular Puppeteer:

const proxyServer = 'example.com:123';
const proxyUser = 'user';
const proxyPass = 'pass';

const browser = await puppeteer.launch(env.MY_BROWSER, {
    args: `--proxy-server=${proxyServer}`,
});
const page = await browser.newPage();
await page.authenticate({
    username: proxyUser,
    password: proxyPass,
});

const proxyServer = 'example.com:123';
const proxyUser = 'user';
const proxyPass = 'pass';

const browser = await puppeteer.launch(env.MY_BROWSER, {
    args: `--proxy-server=${proxyServer}`,
});
const page = await browser.newPage();
await page.authenticate({
    username: proxyUser,
    password: proxyPass,
});

const proxyServer = 'example.com:123';
const proxyUser = 'user';
const proxyPass = 'pass';

const browser = await puppeteer.launch(env.MY_BROWSER, {
    args: `--proxy-server=${proxyServer}`,
});
const page = await browser.newPage();
await page.authenticate({
    username: proxyUser,
    password: proxyPass,
});

const proxyServer = 'example.com:123';
const proxyUser = 'user';
const proxyPass = 'pass';

const browser = await puppeteer.launch(env.MY_BROWSER, {
    args: `--proxy-server=${proxyServer}`,
});
const page = await browser.newPage();
await page.authenticate({
    username: proxyUser,
    password: proxyPass,
});

RRoman Hi all! Does Cloudflare Puppeteer support passing proxy server? This works for r...

G

GutsNGl0ry•10/8/24, 4:44 PM

const browser = await puppeteer.connect(env.MYBROWSER);
    const proxyContext = await browser.createIncognitoBrowserContext({
        proxyServer: "host:port",
    });

    const page = await proxyContext.newPage();
    // if authentication is required
    await page.authenticate({
        username: 'username',
        password: 'password',
    });

    await page.goto('https://google.com');
    await page.screenshot({ path: 'screenshot.png' });

const browser = await puppeteer.connect(env.MYBROWSER);
    const proxyContext = await browser.createIncognitoBrowserContext({
        proxyServer: "host:port",
    });

    const page = await proxyContext.newPage();
    // if authentication is required
    await page.authenticate({
        username: 'username',
        password: 'password',
    });

    await page.goto('https://google.com');
    await page.screenshot({ path: 'screenshot.png' });

const browser = await puppeteer.connect(env.MYBROWSER);
    const proxyContext = await browser.createIncognitoBrowserContext({
        proxyServer: "host:port",
    });

    const page = await proxyContext.newPage();
    // if authentication is required
    await page.authenticate({
        username: 'username',
        password: 'password',
    });

    await page.goto('https://google.com');
    await page.screenshot({ path: 'screenshot.png' });

const browser = await puppeteer.connect(env.MYBROWSER);
    const proxyContext = await browser.createIncognitoBrowserContext({
        proxyServer: "host:port",
    });

    const page = await proxyContext.newPage();
    // if authentication is required
    await page.authenticate({
        username: 'username',
        password: 'password',
    });

    await page.goto('https://google.com');
    await page.screenshot({ path: 'screenshot.png' });

here is an example, just fyi I have not tested this but the code indicates this is the way to set proxy

A

acusti•10/8/24, 9:00 PM

I am trying to use the browser rendering API to screenshot a page with a <video> element and I cannot get the video to render. To make sure that the video is getting a chance to load, I tried triggering the video to play, waiting 5 seconds, triggering pause, and then captured the screenshot at that point, and it shows the progress bar in the video controls as being 5 seconds into the video, but the video itself is just a white background (see attached). searching back in this channel, I saw browser-rendering-api that indicated that the version of chromium being used supports some proprietary video / audio codecs, including video/H264, but the video I am testing with is H.264, so it seems like that might not be accurate. Does anyone know if there is any chance that this will eventually work? [a couple of related issues in the puppeteer github repo: 291 and 381]

C

Chief•10/9/24, 3:46 AM

How does the browser rendering api fit in with cloudflare’s anti botting stance?

Realistically, people want to use the api to take screenshots or remote view websites at a regular basis and want to go around things like turnstiles

E

Erisa•10/9/24, 4:16 AM

browser rendering doesn't bypass turnstile afaik

E

Erisa•10/9/24, 4:16 AM

you cant use it to scrape sites which have bot protection on them

Aacusti I am trying to use the browser rendering API to screenshot a page with a <video>...

P

Puliczek•10/10/24, 4:25 PM

Same problem, did you solve it?

Aacusti I am trying to use the browser rendering API to screenshot a page with a <video>...

P

Puliczek•10/11/24, 8:21 AM

Not sure if it is related to video/h264. I have same problem with youtube videos. Is it possible that all videos are blocked bycloudflare to avoid extra bandwidth?

Aacusti I am trying to use the browser rendering API to screenshot a page with a <video>...

P

Puliczek•10/11/24, 12:46 PM

Created issue: https://github.com/cloudflare/puppeteer/issues/84

GitHub

[Bug]: Video not working - White screen · Issue #84 · cloudflare/pu...

Minimal, reproducible example import puppeteer from "@cloudflare/puppeteer"; export default { async fetch(request, env) { const browser = await puppeteer.launch(env.MYBROWSER); const page...

Original message was deleted

P

Puliczek•10/23/24, 9:33 AM

is there any plan to support it?

V

Vikash•10/23/24, 11:56 AM

How do I kill a freezing session? The session is busy from last 10 minutes doing nothing...seems like puppeteer freeze.
I want to kill it by checking

connectionStartTime > now + 1 minutes

connectionStartTime > now + 1 minutes

connectionStartTime > now + 1 minutes

connectionStartTime > now + 1 minutes using a CRON every minute. But don't see any option, any suggestion?

{
    "sessionId": "fcd55f36-8415-4602-aa60-835fc98439ec",
    "startTime": 1729683740652,
    "connectionId": "2500e575-abe8-4db0-9cd2-f5a542c376ca",
    "connectionStartTime": 1729683742094
  },

{
    "sessionId": "fcd55f36-8415-4602-aa60-835fc98439ec",
    "startTime": 1729683740652,
    "connectionId": "2500e575-abe8-4db0-9cd2-f5a542c376ca",
    "connectionStartTime": 1729683742094
  },

{
    "sessionId": "fcd55f36-8415-4602-aa60-835fc98439ec",
    "startTime": 1729683740652,
    "connectionId": "2500e575-abe8-4db0-9cd2-f5a542c376ca",
    "connectionStartTime": 1729683742094
  },

{
    "sessionId": "fcd55f36-8415-4602-aa60-835fc98439ec",
    "startTime": 1729683740652,
    "connectionId": "2500e575-abe8-4db0-9cd2-f5a542c376ca",
    "connectionStartTime": 1729683742094
  },

A

andreaselia•10/23/24, 12:24 PM

Using the Browser Rendering API to create a new page, go to the URL of a PDF, and then return a screenshot doesn't seem to be able to load the PDF itself, any suggestions or is this simply not one of those use cases the Browser Rendering API should be used for?

Slimmed down version of my Worker code:

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();

await page.goto(url, {
  waitUntil: 'networkidle0',
});

const img = (await page.screenshot()) as Buffer;

// Here I upload to R2/handle, return a response, etc.

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();

await page.goto(url, {
  waitUntil: 'networkidle0',
});

const img = (await page.screenshot()) as Buffer;

// Here I upload to R2/handle, return a response, etc.

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();

await page.goto(url, {
  waitUntil: 'networkidle0',
});

const img = (await page.screenshot()) as Buffer;

// Here I upload to R2/handle, return a response, etc.

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();

await page.goto(url, {
  waitUntil: 'networkidle0',
});

const img = (await page.screenshot()) as Buffer;

// Here I upload to R2/handle, return a response, etc.

If it's not the blank screenshot attached, it's a timeout due to exceeding the 30s navigation timeout.

An example PDF I found on GitHub if anyone wants to try it: usbtemp.s3.amazonaws.com/terms.pdf

K

Kathy•4/7/25, 10:46 PM

Hi all!

With the new Browser Rendering announcements for Developer week, we've reopened the Browser Rendering channel so we can better keep track of questions, requests, etc. for our team!

-New free tier
-REST API in not Generally Available
-New endpoints (/json, /links, /markdown)
-Playwright support
https://developers.cloudflare.com/changelog/?product=browser-rendering

Cloudflare Docs

Changelogs

Hhannes a question regarding the new REST API: do we have to still care about the concep...

J

Jadugar_Jaggu•4/9/25, 4:58 PM

browser rendering is included with you workers paid plan, there isn't separate pricing yet

My message was because you pinged Walshy randomly, and not for moderation reasons or from a prior co

Similar Threads

Similar Threads

Similar Threads