How to record videos with Puppeteer

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

'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(); } })();

• FFmpeg

  486 42,374 10.0 C

  Mirror of https://git.ffmpeg.org/ffmpeg.git

  

If you need to generate GIF (an image format, not video) for animated screenshots, you can use the FFmpeg library to convert MP4 to GIF. Make sure it is installed locally. And then you can upgrade your script to generate GIFs on demand:

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project