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

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

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

K

Kathy•4/9/25, 10:25 PM

we are working on pricing and will let y'all know as soon as we have it!
in the meantime, as @Jadugar_Jaggu mentioned - you can use without charge until then up to the limits here https://developers.cloudflare.com/browser-rendering/platform/limits/

Cloudflare Docs

Limits · Browser Rendering docs

Learn about the limits associated with Browser Rendering.

M

mayleen•4/10/25, 10:07 AM

Hello !
is it possible to use puppeteer's 'margin' and 'headerTemplate' options via the REST API?

Mmayleen Hello ! is it possible to use puppeteer's 'margin' and 'headerTemplate' options ...

K

Kathy•4/11/25, 7:27 PM

which REST API endpoint are you trying to use?

KKathy we are working on pricing and will let y'all know as soon as we have it! in the ...

M

milwel•4/14/25, 2:33 PM

hi, would it be possible to put a notice somewhere in the browser rendering docs (limits page, or a new pricing page) saying that it's free to use as long as you're within the current paid/free limits?

M

milwel•4/14/25, 2:33 PM

was very confused trying to find any info on pricing until i came onto the discord

M

milwel•4/14/25, 2:47 PM

also, is there a way to monitor usage?

Mmilwel hi, would it be possible to put a notice somewhere in the browser rendering docs...

K

Kathy•4/14/25, 4:39 PM

great feedback - can do

Mmilwel also, is there a way to monitor usage?

K

Kathy•4/14/25, 4:40 PM

in dashboard you can monitor usage when using the workers binding API right now. we are in process for adding for the REST API. so please stay tuned

KKathy in dashboard you can monitor usage when using the workers binding API right now....

M

milwel•4/14/25, 7:48 PM

got it, thank you!

D

darren•4/15/25, 1:56 AM

I’m really happy to see Cloudflare add support for Playwright with Browser Rendering.

I’m attempting to use it on a project, but I’m running in to errors when attempting to deploy.

As soon as I include the “@Cloudflare/playwright” package in my build, deploys fail.

My guess is that there could be something in that package that isn’t supported in the Workers run time?

✘ [ERROR] A request to the Cloudflare API (/accounts/4f453aab7846de127d0e18aec26d1576/workers/scripts/locum-jobs/versions) failed.

  Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at null.<anonymous> (assets/app-YABV1Xlm.js:39099:31) in hasFlag
    at null.<anonymous> (assets/app-YABV1Xlm.js:39115:7) in requireSupportsColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39564:29)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39694:5) in requireColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39702:19)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39704:5) in requireSafe
    at null.<anonymous> (assets/app-YABV1Xlm.js:39707:19)
   [code: 10021]

✘ [ERROR] A request to the Cloudflare API (/accounts/4f453aab7846de127d0e18aec26d1576/workers/scripts/locum-jobs/versions) failed.

  Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at null.<anonymous> (assets/app-YABV1Xlm.js:39099:31) in hasFlag
    at null.<anonymous> (assets/app-YABV1Xlm.js:39115:7) in requireSupportsColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39564:29)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39694:5) in requireColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39702:19)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39704:5) in requireSafe
    at null.<anonymous> (assets/app-YABV1Xlm.js:39707:19)
   [code: 10021]

✘ [ERROR] A request to the Cloudflare API (/accounts/4f453aab7846de127d0e18aec26d1576/workers/scripts/locum-jobs/versions) failed.

  Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at null.<anonymous> (assets/app-YABV1Xlm.js:39099:31) in hasFlag
    at null.<anonymous> (assets/app-YABV1Xlm.js:39115:7) in requireSupportsColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39564:29)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39694:5) in requireColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39702:19)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39704:5) in requireSafe
    at null.<anonymous> (assets/app-YABV1Xlm.js:39707:19)
   [code: 10021]

✘ [ERROR] A request to the Cloudflare API (/accounts/4f453aab7846de127d0e18aec26d1576/workers/scripts/locum-jobs/versions) failed.

  Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at null.<anonymous> (assets/app-YABV1Xlm.js:39099:31) in hasFlag
    at null.<anonymous> (assets/app-YABV1Xlm.js:39115:7) in requireSupportsColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39564:29)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39694:5) in requireColors
    at null.<anonymous> (assets/app-YABV1Xlm.js:39702:19)
    at null.<anonymous> (assets/app-YABV1Xlm.js:39704:5) in requireSafe
    at null.<anonymous> (assets/app-YABV1Xlm.js:39707:19)
   [code: 10021]

R

Rapid•4/16/25, 11:39 PM

Does browser rendering support proxies if I want to use? If I need a specific location

J

John Spurlock•4/20/25, 10:21 PM

It looks like browser content requests using the REST api append

cf-biso-request-id

cf-biso-request-id

cf-biso-request-id

cf-biso-request-id and

cf-biso-devtools

cf-biso-devtools

cf-biso-devtools

cf-biso-devtools request headers when fetching the url. Is there any way to override/remove them? (

setExtraHTTPHeaders

setExtraHTTPHeaders

setExtraHTTPHeaders

setExtraHTTPHeaders did not seem to work for these)

J

JOEY•4/24/25, 7:25 AM

Any examples how can i integrate browser rendering api in my hono app

JJOEY Any examples how can i integrate browser rendering api in my hono app

K

Kathy•4/24/25, 9:34 PM

this might help https://github.com/elizabethsiegle/seo-analysis-browser-rendering-worker

GitHub

GitHub - elizabethsiegle/seo-analysis-browser-rendering-worker: Clo...

Cloudflare Worker to analyze SEO of input website using Cloudflare browser rendering and Llama-3.2 hosted on Workers AI - elizabethsiegle/seo-analysis-browser-rendering-worker

C

confusionprevails•4/25/25, 2:32 PM

Hi lovely folks - I am trying to use with the sdk:
https://developers.cloudflare.com/api/node/resources/browser_rendering/subresources/screenshot/

What is the response attribute which gives me back an image buffer (or base64) when I call

await client.browserRendering.screenshot.create()

await client.browserRendering.screenshot.create()

await client.browserRendering.screenshot.create()

await client.browserRendering.screenshot.create()

The response type def seems to contain { status, errors? } but no option for the actual image.

Cloudflare API | Browser Rendering › Screenshot

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

Cconfusionprevails Hi lovely folks - I am trying to use with the sdk: https://developers.cloudflare...

C

confusionprevails•4/25/25, 2:34 PM

I do seem to get back some data as screenshot response but it isnt base64 or a buffer that is valid image. What am I doing wrong?

S

sam•4/27/25, 5:30 AM

The API docs are wrong, they say the binding type is

browser_rendering

browser_rendering

browser_rendering

browser_rendering but that results in a

400

400. The wrangler source code uses

"browser"

"browser"

"browser"

"browser": https://github.com/cloudflare/workers-sdk/blob/main/packages/wrangler/src/deployment-bundle/create-worker-upload-form.ts#L470-L471

T

Tobias•4/27/25, 8:54 PM

Am I correct to assume that the Rest API for creating PDFs does not allow specifying format (e.g. A4 instead of US Letter)?

T

Tobias•4/27/25, 9:00 PM

god damn

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

Similar Threads

Similar Threads

Similar Threads