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

Posted

技术标签:

【中文标题】使用 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 并回复您。感谢您的帮助。

以上是关于使用 Puppeteer 进行屏幕录制时 CSS 转换不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 puppeteer 和 Node js 为 pdf 页面生成屏幕截图

当我的 iOS 应用程序在后台使用 ReplayKit 时进行屏幕录制

有没有办法使用 Puppeteer 定位特定元素并在将 html 转换为 pdf 时保留 CSS?

前端UI自动化puppeteer实践

我无法在 heroku 中使用 puppeteer 进行截图

为啥我的屏幕录像无声音或者有杂音