使用 Puppeteer 进行屏幕录制时 CSS 转换不起作用

Question

我有一个页面，其中有很多大图像正在调整大小和移动，我使用 CSS transitions 进行所有这些操作。

当我在浏览器上运行该页面时，一切正常。

过渡有时有点颠簸，但考虑到图像的大小和数量，这是可以理解的，所以我可以忍受。

但是，我现在尝试将 puppeteer（无头）与 puppeteer-screen-recorder 模块结合使用，当我查看生成的视频时，没有任何过渡。

import puppeteer from 'puppeteer'
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'

const defaultViewport = {
  width: 1440,
  height: 764
}

;(() => {

  const browser = await puppeteer.launch({ defaultViewport })
  const page = await browser.newPage()
  const recorder = new PuppeteerScreenRecorder(page, {
    videoFrame: defaultViewport,
    aspectRatio: '360:191'
  })

  async function stop() {
    await recorder.stop()
    await browser.close()
    process.exit(1) 
  }

  await page.setDefaultNavigationTimeout(0)

  await page.exposeFunction('onAnimationsDone', async () => {
    stop()
  })

  await page.exposeFunction('onAnimationsStarted', () => {
    recorder.start('./client/db/test.mp4')
  })

  await page.goto('http://localhost:8000/')

})()

这是使用无头木偶的不可避免的限制还是我做错了什么？

Answer 1

很难说，乍一看，这可能来自木偶师在无头奔跑时应用的某种减少动作。

• 见@https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Attribute	Syntax
reduce	Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
no-preference	Indicates that the user has made no preference known to the system.

您可以确保 chromium 正在运行 no-preference:

await page.emulateMediaFeatures([{ 
    name: 'prefers-reduced-motion', 
    value: 'no-preference' 
},]);

await page.evaluate(
    () => matchMedia('(prefers-reduced-motion: no-preference)').matches
);

您确定这与每秒 25 帧的 fps 默认设置无关吗？来自puppeteer-screen-recorder 包。

fps：数字值，表示每秒应记录视频的帧数。默认值为 25。