Reputation: 6002
I want to take a screenshot of a web page with a 3D canvas like this:
import {createServer} from 'http'
import puppeteer from 'puppeteer'
const url = "https://webglfundamentals.org/webgl/webgl-load-obj-w-extents.html";
async function main() {
const browser = await puppeteer.launch({
args: [
"--no-sandbox",
"--use-gl=swiftshader",
"--enable-webgl",
],
headless: true,
dumpio: true,
defaultViewport: { width: 400, height: 300 },
});
const page = await browser.newPage();
await page.goto(url);
await page.waitForNetworkIdle();
await page.waitForSelector("#canvas");
const screenshot = await page.screenshot();
console.log(screenshot);
Running the code locally, on my Ubuntu machine works fine, producing this image:
Running the code inside a Docker container (Ubuntu + Node.js + Chrome) does not work. It takes a screenshot, but the 3D canvas does not render.
[end of stack trace]
[0927/180308.980024:ERROR:gpu_process_host.cc(961)] GPU process exited unexpectedly: exit_code=134
[0927/180308.980054:WARNING:gpu_process_host.cc(1274)] The GPU process has crashed 6 time(s)
[0927/180308.982162:ERROR:gpu_init.cc(441)] Passthrough is not supported, GL is disabled
[0927/180308.983772:WARNING:gpu_process_host.cc(989)] Reinitialized the GPU process after a crash. The reported initialization time was 0 ms
A minimal reproduction of the issue can be found here: https://github.com/flolu/docker-puppeteer-webgl
My goal is to run the code on a Kubernetes cluster. How can I configure my Dockerfile to support WebGL?
Upvotes: 2
Views: 4498
Reputation: 6002
The solution was to add some dependencies to my Dockerfile:
RUN apt-get install -y xorg xserver-xorg xvfb libx11-dev libxext-dev
Working example: https://github.com/flolu/docker-puppeteer-webgl
Upvotes: 9