如何解决Puppeteer加载直播流页面超时并实现强制截图？

嘿，这个问题我太有共鸣了！直播流页面因为一直在持续推送帧数据，Puppeteer默认的“等待页面完全加载”逻辑根本不适用，超时报错简直是家常便饭。不过咱们可以换个思路，不等页面“加载完成”，直接在页面渲染出画面后就截图关闭，下面给你几个可行的方案：

方案一：修改页面加载等待策略 #

Puppeteer的page.goto()支持通过waitUntil参数调整等待逻辑，对于直播流页面，我们可以只等DOM结构加载完成（也就是domcontentloaded事件触发），之后就直接进行截图操作，不用管后续的网络请求。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 先禁用默认的导航超时（避免还没等到DOM加载就超时）
  page.setDefaultNavigationTimeout(0);
  
  // 只等待DOM加载完成就停止等待
  await page.goto('http://74.95.30.43/display_pic.cgi?cam=1&res=low', {
    waitUntil: 'domcontentloaded'
  });
  
  // 可选：给页面1-2秒时间渲染直播画面（如果是视频流的话更需要）
  await page.waitForTimeout(1500);
  
  // 执行截图
  await page.screenshot({ path: 'live_capture.jpg', fullPage: true });
  
  await browser.close();
})();

方案二：设置导航超时并捕获错误 #

如果DOM加载完成的时机不好判断，也可以直接给page.goto()设置一个合理的超时时间，即使页面没加载完，超时后我们捕获错误，继续执行截图操作就行。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  try {
    // 设置5秒的导航超时，到点就停止等待
    await page.goto('http://74.95.30.43/display_pic.cgi?cam=1&res=low', {
      timeout: 5000,
      waitUntil: 'load' // 这里即使没完成load，超时后也会进入catch
    });
  } catch (err) {
    // 不用纠结超时错误，直接继续下一步
    console.log('页面加载超时，开始截图');
  }
  
  // 截图
  await page.screenshot({ path: 'live_capture.jpg' });
  
  await browser.close();
})();

额外注意事项 #

• 如果你的直播流是用<video>标签渲染的，记得给页面留一点渲染时间（比如waitForTimeout），确保视频帧已经显示出来再截图。
• 可以用page.waitForSelector()来等待直播画面对应的元素（比如图片或视频标签）出现，这样截图的成功率更高，比如：await page.waitForSelector('img#live-stream', { timeout: 3000 });

内容的提问来源于stack exchange，提问作者Mark B