Take screenshot of the iframe content w/ Puppetter

[hypervillain]

Hi! This is probably an anti-pattern because of the Chromium security sandbox but I'm curious if there is a way to take a screenshot of the page served by the Webcontainers API using Puppeteer.

Solution

• Pass the url returned by server-ready event to a lamda. This lambda loads a page via Puppeteer and takes a screenshot of it. At the moment, I'm able to capture the "Additional step required" page, which is something already 😊

I'm not sure what the "connect this window to its project" means in term of security but I'm curious if there is a way to pass a token to the the Puppeteer instance, or if the sandbox will prevent this kind of actions by design?

Thanks!

[SamVerschueren]

Not entirely sure if I understand what you're trying to do, or what the problem is you run into.

But if you go to this WebContainer API example from our docs. You could simply download that project, run it on local, let puppeteer navigate to your localhost:5173 and take a screenshot of it? Wouldn't that be enough?

[paoloricciuti]

I think it would be cool to have a way to automate this process if you are not in control...for example at SvelteLab we would love to show a preview of the project and we would really need something like this

[jrvidal]

have a way to automate this process if you are not in control

@paoloricciuti Can you elaborate on what you mean by that?

[paoloricciuti]

have a way to automate this process if you are not in control

@paoloricciuti Can you elaborate on what you mean by that?

At svelte lab we let users create svelte kit projects that runs into web containers. And I would love to take a screenshot of the application when the user save to use it as an og:image for that project. This obviously means I cannot download the project, run it locally, and execute puppeteer. I would need to take a screenshot of the web container instance.