使用 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-motionAttribute | 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?