Chrome无头模式下HeadlessExperimental.beginFrame超时无截图数据排查求助

以下是针对beginFrame请求超时（30秒定时器触发）的具体排查方向和调试方案：

1. 验证CDP会话有效性 #

如果CDP会话意外断开、崩溃或被销毁，send方法会一直处于pending状态直到超时。

• 在请求前检查会话连接状态，同时监听断开事件：

  console.log('CDP Session 连接状态:', this.cdpSession.connected);
  this.cdpSession.on('disconnected', () => console.error('CDP Session 意外断开'));
  

2. 确认视频播放状态 #

beginFrame需要浏览器生成新帧才会返回截图，若视频处于异常状态会导致等待超时：

• 检查视频是否在播放、缓冲是否充足：

  const [videoPaused, bufferedEnd, currentTime] = await Promise.all([
    this.cdpSession.send('Runtime.evaluate', { expression: 'document.querySelector("video").paused' }),
    this.cdpSession.send('Runtime.evaluate', { expression: 'document.querySelector("video").buffered.end(0)' }),
    this.cdpSession.send('Runtime.evaluate', { expression: 'document.querySelector("video").currentTime' })
  ]);
  console.log('视频是否暂停:', videoPaused.result.value);
  console.log('剩余缓冲时长:', bufferedEnd.result.value - currentTime.result.value);
  

• 若视频是自动播放，确保浏览器启动时添加了--autoplay-policy=no-user-gesture-required参数，避免无头模式下自动播放被拦截。

3. 调整beginFrame参数配置 #

默认情况下beginFrame会等待自然帧生成，若视频帧率极低（<1fps），等待时间可能超过30秒：

• 手动指定frameTimeTicks强制生成帧：

  const frameData = await Promise.race([
    this.cdpSession.send("HeadlessExperimental.beginFrame", {
      frameTimeTicks: Date.now() * 1000, // 转换为微秒格式
      screenshot: { format: "jpeg", quality: 80 }
    }),
    new Promise(resolve => timer = setTimeout(() => resolve(false), 30000))
  ]);
  

• 确保使用新版无头模式，启动参数改为--headless=new，旧版无头模式存在部分渲染兼容性问题。

4. 捕获CDP请求错误 #

当前代码未捕获send方法的错误，可能请求已失败但被超时Promise掩盖：

• 添加错误捕获，查看CDP层面的具体报错：

  const frameData = await Promise.race([
    this.cdpSession.send("HeadlessExperimental.beginFrame", { screenshot: { format: "jpeg", quality: 80 } })
      .catch(err => {
        console.error('beginFrame 请求失败:', err);
        throw err;
      }),
    new Promise(resolve => timer = setTimeout(() => resolve(false), 30000))
  ]);
  

5. 排查性能与兼容性问题 #

• 监控浏览器进程的CPU、内存占用，若资源过载会导致帧渲染延迟，可减少同时运行的CDP请求或页面操作。
• 测试不同编码的视频，部分编码（如HEVC）在无头模式下可能存在渲染障碍，可换用H.264编码视频验证：

  const codecSupport = await this.cdpSession.send('Runtime.evaluate', {
    expression: `
      navigator.mediaCapabilities.decodingInfo({
        type: 'video',
        video: {
          contentType: 'video/mp4; codecs="avc1.42E01E"',
          width: 1920,
          height: 1080,
          bitrate: 5000000,
          framerate: 30
        }
      }).then(res => res.supported)
    `,
    awaitPromise: true
  });
  console.log('H.264编码支持:', codecSupport.result.value);
  

内容的提问来源于stack exchange，提问作者gengxin li