Tengo una página donde muchas imágenes grandes se redimensionan y se mueven y estoy usando transitions CSS para todas estas acciones.
Cuando ejecuto la página en el navegador, todo funciona bien.
Las transiciones a veces son un poco irregulares, pero es comprensible dado el tamaño de las imágenes y la gran cantidad, así que puedo vivir con eso.
Sin embargo, ahora estoy tratando de usar puppeteer (sin cabeza) combinado con el módulo puppeteer-screen-recorder y cuando miro el video resultante, no hay transiciones.
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/') })()¿Es esta una limitación inevitable de usar un titiritero sin cabeza o estoy haciendo algo mal?
Difícil de decir, a primera vista esto podría provenir de algún tipo de movimiento reducido aplicado por el titiritero cuando corre sin cabeza.
| Atributo | Sintaxis |
|---|---|
reduce | Indica que el usuario ha notificado al sistema que prefiere una interfaz que elimine o reemplace los tipos de animación basada en movimiento que provocan molestias para las personas con trastornos del movimiento vestibular. |
no-preference | Indica que el usuario no ha dado a conocer ninguna preferencia al sistema. |
Puede asegurarse de que Chrome se esté ejecutando no-preference :
await page.emulateMediaFeatures([{ name: 'prefers-reduced-motion', value: 'no-preference' },]); await page.evaluate( () => matchMedia('(prefers-reduced-motion: no-preference)').matches ); ¿Está seguro de que esto no está relacionado con la configuración predeterminada de fps de 25 fotogramas por segundo? del paquetepuppeteer-screen-recorder .
fps: valor numérico que denota el número de fotogramas por segundo en los que se debe grabar el video. el valor predeterminado es 25.
Algunas cosas para probar...
const browser = await puppeteer.launch({ headless: false, args: [ '--hide-scrollbars', '--mute-audio' ] });¿Alguna diferencia? Si no funciona en headless, lo primero que debe hacer es ejecutar non-Headless y ver si le parece bien. Si le parece bien y no se captura en el video... entonces es un problema con esta biblioteca. Si no le parece bien, entonces es un problema del navegador que está usando el titiritero. Cambiar el navegador o los argumentos de configuración del navegador.
Hay limitaciones de medios en Chromium (lo que utiliza el titiritero de forma predeterminada). Si tiene instalado Google Chrome normal en su computadora, puede decirle al titiritero que lo use en su lugar. Descubrí que esto ayudó con la captura de incrustaciones de video que no se reprodujeron en cromo.
const browser = await puppeteer.launch({ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', ....