视觉分析开发范例：Puppeteer截图＋计算机视觉动态定位

npm install puppeteer-extra puppeteer-extra-plugin-stealth tesseract.js sharp

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
const tesseract = require('tesseract.js'); // 用于图像识别
const sharp = require('sharp');            // 图像裁剪处理

puppeteer.use(StealthPlugin());

(async () => {
  // 爬虫代理配置（亿牛云示例 ）
  const proxyHost = 'proxy.16yun.cn';
  const proxyPort = '31000';
  const proxyUser = '16YUN';
  const proxyPass = '16IP';

  // Puppeteer 启动带代理
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      `--proxy-server=http://${proxyHost}:${proxyPort}`,
    ],
  });

  const page = await browser.newPage();

  // 设置 User-Agent 和 Cookie（模拟真实用户）
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');

  await page.setCookie({
    name: 'xhsTracker',
    value: 'your_cookie_value',
    domain: '.xiaohongshu.com'
  });

  // 设置代理认证
  await page.authenticate({
    username: proxyUser,
    password: proxyPass,
  });

  // 打开小红书搜索页面
  const keyword = '旅行vlog';
  await page.goto(`https://www.xiaohongshu.com/search_result?keyword=${encodeURIComponent(keyword)}`, {
    waitUntil: 'networkidle2'
  });

  await page.waitForTimeout(3000); // 等待页面加载

  // 点击第一个视频内容
  const videoSelector = 'div.video-feed-container div.feed-video-card:first-child';
  await page.waitForSelector(videoSelector);
  await page.click(videoSelector);

  // 等待视频播放页加载
  await page.waitForTimeout(5000);

  // 截图当前页面
  const screenshotPath = 'screenshot.png';
  await page.screenshot({ path: screenshotPath, fullPage: true });
  console.log('页面截图已保存:', screenshotPath);

  // 对截图进行图像识别（找出“暂停/播放按钮”等图标）
  const croppedPath = 'video_button_crop.png';

  // 示例：裁剪中间区域（大概率是播放按钮）
  await sharp(screenshotPath)
    .extract({ left: 500, top: 300, width: 300, height: 200 }) // 可按实际屏幕调整
    .toFile(croppedPath);

  console.log('已裁剪截图区域:', croppedPath);

  // 使用 Tesseract 识别该区域的文本（可替换为模板匹配找图标）
  const result = await tesseract.recognize(croppedPath, 'eng', {
    logger: m => console.log(m)
  });

  console.log('识别结果：', result.data.text);

  await browser.close();
})();