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

Posted 2023-02-19

【中文标题】使用 Puppeteer 进行屏幕录制时 CSS 转换不起作用

【英文标题】：CSS transitions not working when screen-recording using Puppeteer

【发布时间】：2022-01-21 06:28:03

【问题描述】：

我有一个页面，其中有很多大图像正在调整大小和移动，我使用 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/')

)()

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

【问题讨论】：

您怀疑headless模式是罪魁祸首，但是当您通过pptr启动浏览器headful时，过渡是否正确？ puppeteer.launch( headless: false ).

【参考方案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。

【讨论】：

我看不出 fps 怎么可能是个问题。现在它好像以 1fps 录制。不过，我会检查prefers-reduced-motion 并回复您。感谢您的帮助。