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

Question

我想用 3D canvas 截取网页截图，如下所示：

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);

运行本地代码，在我的 Ubuntu 机器上工作正常，生成此图像：

运行 Docker 容器 (Ubuntu + Node.js + Chrome) 中的代码不起作用。它会截取屏幕截图，但 3D canvas 不会呈现。

[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

可在此处找到该问题的最小复现：https://github.com/flolu/docker-puppeteer-webgl

我的目标是运行 Kubernetes 集群上的代码。如何配置我的 Docker 文件以支持 WebGL？

Answer 1

解决方案是向我的 Dockerfile 添加一些依赖项：

RUN apt-get install -y xorg xserver-xorg xvfb libx11-dev libxext-dev

工作示例：https://github.com/flolu/docker-puppeteer-webgl

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

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

webgl

node.js

docker

google-chrome-headless

puppeteer