How to capture browser screen recordings with puppeteer-recorder package

Other Questions Puppeteer
1

I want to record what my puppeteer script does when it runs on my server. I found this recording package that should help me capture the browser activity.

Here’s my basic setup:

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

startBrowser();

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

async function performTest() {
    try {
        const newPage = await mainBrowser.newPage();
        await newPage.setViewport({width: 1200, height: 900});
        
        await record({
            browser: mainBrowser,
            page: newPage,
            output: outputDir + '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('Navigation failed');
            });
            
        await newPage.close();
    }
    catch (error) {
        console.log('TEST ERROR:', error);
    }
}

But I keep getting this ffmpeg error:

$ node test.js
(node:1234) UnhandledPromiseRejectionWarning: Error: spawn ffmpeg ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed
    at doWrite (_stream_writable.js:406:19)

I tried installing ffmpeg but it still doesn’t work. What am I missing here?

2

Your record function is in the wrong spot - you’re calling it before navigating to the page. Move it so it wraps around your actual browser interactions instead of running before them. The ffmpeg error is just a side effect. Right now you’re trying to record 10 seconds right after creating the page but before any content actually loads. I’ve hit this exact issue with automated testing recordings. Structure it so the record function covers your navigation and interaction code. Also heads up - some antivirus software blocks ffmpeg even when it’s installed correctly, so try disabling real-time protection if fixing the PATH doesn’t work. That stream destruction error usually happens because the initial recording setup failed.

3

This ffmpeg error occurs because your system can’t locate the ffmpeg executable in your PATH. Simply installing ffmpeg isn’t sufficient; it needs to be configured correctly. On Windows, after installing ffmpeg, ensure that its ‘bin’ directory is added to your system PATH. Restart your command prompt or IDE afterward. I faced a similar problem with puppeteer-recorder, and the solution was to download the static build from ffmpeg’s official site and manually add it to the PATH. You can verify if it’s working by running ffmpeg -version in your terminal. Additionally, ensure that your output directory exists; if it doesn’t, create the necessary folder structure first. The ‘stream destroyed’ error typically surfaces after addressing the ffmpeg problem, so fixing the PATH should resolve both issues.

4

ffmpeg isn’t installed or can’t find it in your PATH. Run where ffmpeg on Windows to check. Also, puppeteer-recorder is probably outdated - switch to puppeteer-screen-recorder instead. I’ve had way better luck with it and fewer dependency headaches.