Florian Ludewig
Florian Ludewig

Reputation: 6002

Docker + WebGL + Headless Chrome Error: Passthrough is not supported, GL is disabled

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: screenshot of canvas

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

Answers (1)

Florian Ludewig
Florian Ludewig

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

Related Questions