Codepen screen recording

capture.mjs

import { promises as fs } from 'fs';
import path from 'path';
import puppeteer from 'puppeteer';
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';

const viewport = {
    width: 512,
    height: 512,
    deviceScaleFactor: 1,
    // isMobile: true,
    // hasTouch: true,
    // isLandscape: true,
};

const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: viewport,
});
// const browser = await puppeteer.connect({
    // browserURL: 'http://127.0.0.1:21222',
    // defaultViewport: viewport
// });

const page = await browser.newPage();
// await page.setViewport(viewport);


const recorder = new PuppeteerScreenRecorder(page, {
    fps: 120,
    // videoFrame: {
    //     width: 512,
    //     height: 512,
    // },
    // aspectRatio: '1:1',
    recordDurationLimit: 20,
});
await page.goto('https://codepen.io/chriskirknielsen/full/xxJegmv');
await page.$eval('#main-header', el => el.remove());
await page.$eval('#result', el => el.style.height = '100%');
await recorder.start('./capture.mp4');
await new Promise(resolve => setTimeout(resolve, 20 * 1000));
await recorder.stop();
await browser.close();

console.log('Done');