GCloud Docker环境中navigator.mediaDevices.getDisplayMedia调用失败排查

核心问题本质 #

在GCloud服务器的Docker容器里跑有头Chrome时，navigator.mediaDevices.getDisplayMedia() 要么报DOM错误要么无响应，根源是容器缺图形环境支撑和媒体权限强制配置——哪怕禁用了无头模式，容器里没有真实显示输出、音频设备，Chrome没法完成媒体流的捕获初始化。

具体修复操作 #

1. 给容器搭虚拟图形环境 #

Docker默认没X11服务，得装虚拟显示组件：

• Dockerfile里加依赖：

  RUN apt-get update && apt-get install -y \
      xvfb \
      x11vnc \
      fluxbox
  

• 启动脚本（run.sh）里先启动虚拟屏：

  # 开个1920x1080的虚拟显示屏，分辨率按需改
  Xvfb :99 -screen 0 1920x1080x24 &
  export DISPLAY=:99
  

2. 给Chrome加必要的媒体权限参数 #

启动Chrome必须直接授予权限，容器里没法处理弹窗：

google-chrome \
  --no-sandbox \
  --disable-dev-shm-usage \
  --autoplay-policy=no-user-gesture-required \
  --allow-running-insecure-content \
  --disable-web-security \
  --disable-features=VizDisplayCompositor \
  --use-fake-ui-for-media-stream \  # 跳过权限确认弹窗，别和虚拟设备参数搞混
  --enable-usermedia-screen-capturing \
  --start-maximized

划重点：--use-fake-ui-for-media-stream 是跳权限弹窗，和你之前用的--use-fake-device-for-media-stream（虚拟设备）完全是俩东西，别用错。

3. 给容器足够的权限和资源 #

• 启动Docker时加--privileged，或者至少挂载必要设备：

  docker run --privileged -v /dev/shm:/dev/shm -v /dev/dri:/dev/dri ...
  

• GCloud服务器至少配2核4G，媒体捕获吃资源，配置太低也会无响应。

4. 调整JS代码的捕获参数 #

调用时明确指定音频捕获（要录Meet音频的话），同时做好错误处理：

async function startCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,  // 抓系统音频，Chrome支持这个参数
      preferCurrentTab: true  // 优先抓当前标签页，适配Meet场景
    });
    // 后续处理媒体流逻辑
  } catch (err) {
    console.error('捕获失败:', err.name, err.message);
    // 针对DOMError可以加针对性处理，比如权限重试逻辑
  }
}

5. 验证容器内的媒体设备 #

进容器后用v4l2-ctl --list-devices查虚拟视频设备，aplay -l查音频设备，确保Chrome能识别到可用设备。

内容的提问来源于stack exchange，提问作者Pavel Racu