How to record videos with Puppeteer

1

Tailwind CSS

'use strict'; Const puppeteer = require('puppeteer'); Const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder'); Const util = require('util'); Const exec = util.promisify(require('child_process').exec); (async () => { const browser = await puppeteer.launch(); try { const page = await browser.newPage(); await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 }); const recorder = new PuppeteerScreenRecorder(page); await page.goto('https://tailwindcss.com/'); await recorder.start('video.mp4'); await page.evaluate(() => { window.scrollBy({ top: 500, left: 0, behavior: 'smooth' }); }); await recorder.stop(); await exec("ffmpeg -i video.mp4 -qscale 0 animated.gif"); } catch (e) { console.log(e) } finally { await browser.close(); } })();.

#Developer Tools #Design Tools #Website Design 871 social mentions

2

ScreenshotOne

If you don't have time to implement and generate animated screenshots and deal with video streaming infrastructure, you can rely on ScreenshotOne API.

#Screenshots #Website Screenshots #APIs 11 social mentions