How to capture screen recordings with puppeteer-recorder library

Other Questions Puppeteer
1

I want to capture what my puppeteer script does when it runs on my server. I found this package that should help me record the browser activity but I’m running into some issues.

Here’s my current setup:

const puppeteer = require('puppeteer');
const { record } = require('puppeteer-recorder');
var outputPath = 'D:\\projects\\automation\\videos\\';

startBrowser();

let mainBrowser;
async function startBrowser() {
    mainBrowser = await puppeteer.launch({
        headless: false,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    performLogin();
}

async function performLogin() {
    try {
        const newPage = await mainBrowser.newPage();
        await newPage.setViewport({width: 1200, height: 800});

        await record({
            browser: mainBrowser,
            page: newPage,
            output: outputPath + 'recording.webm',
            fps: 30,
            frames: 30 * 10, // 10 seconds recording
            prepare: function () {},
            render: function () {}
        });

        await newPage.goto('https://www.testsite.com', {timeout: 30000})
            .catch(function (err) {
                throw new Error('NavigationTimeout');
            });

        await newPage.close();
    } catch (error) {
        console.log('BROWSER ERROR:');
        console.log(error);
    }
}

But I keep getting this error about ffmpeg not being found and stream issues. I tried installing ffmpeg but it still doesn’t work. What am I missing here?

2

you def need to add ffmpeg to your PATH or specify it directly in your config. some versions of puppeteer-recorder have issues w/ the latest puppeteer, so check compatibility too. hope that helps!

3

I ditched puppeteer-recorder for puppeteer-screen-recorder after hitting the same wall. The library’s super picky about ffmpeg setup and the error messages are useless. Had to downgrade puppeteer to 13.x since newer versions break it completely. Your frames calculation’s probably part of the problem - ditch that parameter and just use duration instead. The frame counting gets wonky when the browser can’t keep up. If you’re stuck with puppeteer-recorder, make sure you’re actually awaiting the record function since it’s a promise that only resolves when recording kicks off.

4

Yeah, this is a super common issue with puppeteer-recorder. Besides the ffmpeg PATH problem mentioned above, there’s usually a timing issue where recording starts before the page actually loads. I ran into the same thing and fixed it by moving the record function call - put it after you create the page but before any navigation happens. Make sure your ffmpeg has all the codecs it needs, and double-check that your output directory exists with write permissions. Those permission issues can fail silently and show up as stream errors.