using puppeteer-recorder to record video of browser

Question

I'm trying to record puppeteer to see what happens when i run it on server, as I understand this package does what i want.

https://www.npmjs.com/package/puppeteer-recorder

so here is simplified version of my code

const puppeteer = require('puppeteer');
const { record } = require('puppeteer-recorder');
var path = 'C:\\wamp64\\www\\home_robot\\';

init_puppeteer();

const global_browser  ; 
async function init_puppeteer() {

        global_browser = await puppeteer.launch({headless: false , args: ['--no-sandbox', '--disable-setuid-sandbox']});

    check_login()
};

async function check_login()
{
    try {
        const page = await global_browser.newPage();
        await page.setViewport({width: 1000, height: 1100});

        await record({
            browser: global_browser, // Optional: a puppeteer Browser instance,
            page: page, // Optional: a puppeteer Page instance,
            output: path + 'output.webm',
            fps: 60,
            frames: 60 * 5, // 5 seconds at 60 fps
        prepare: function () {}, // <-- add this line
        render: function () {} // <-- add this line

        });

        await page.goto('https://www.example.cob', {timeout: 60000})
            .catch(function (error) {
                throw new Error('TimeoutBrows');
            });

        await page.close();
    }
    catch (e) {
        console.log(' LOGIN ERROR ---------------------');
        console.log(e);
    }
}

But I get this error

    $ node home.js
(node:7376) UnhandledPromiseRejectionWarning: Error: spawn ffmpeg ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
(node:7376) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This
error originated either by throwing inside of an async function without a catch
block, or by rejecting a promise which was not handled with .catch(). (rejection
 id: 1)
(node:7376) [DEP0018] DeprecationWarning: Unhandled promise rejections are depre
cated. In the future, promise rejections that are not handled will terminate the
 Node.js process with a non-zero exit code.
 LOGIN ERROR ---------------------
Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed
    at doWrite (_stream_writable.js:406:19)
    at writeOrBuffer (_stream_writable.js:394:5)
    at Socket.Writable.write (_stream_writable.js:294:11)
    at Promise (C:\wamp64\www\home_robot\node_modules\puppeteer-recorder\index.j
s:72:12)
    at new Promise (<anonymous>)
    at write (C:\wamp64\www\home_robot\node_modules\puppeteer-recorder\index.js:
71:3)
    at module.exports.record (C:\wamp64\www\home_robot\node_modules\puppeteer-re
corder\index.js:44:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)

i've even ran npm i reinstall ffmpeg --with-libvpx as it was suggested here

https://github.com/clipisode/puppeteer-recorder/issues/6

but still didnt work .... wha telse do i need to do ?

interesting. there is a way to globally record every test runned with puppeteer by jest in a single video? it can be very useful for debug purpose. — Andrea Bisello, Mar 17 '20 at 13:58
@AndreaBisello it's been a while but it didn't work as expected , video had very low frame rate which is not odd considering its just bunch of screenshots attached to each other ... and for some reason the "video" was very short ... its a great idea but this package is not working very good — hretic, Mar 18 '20 at 05:11

prasana kannan · Answer 1 · 2022-01-17T16:32:19.400

9

I know this would be a very late response to your question, but nevertheless.

A years ago, I visited this same stack-overflow thread and I had similar challenge of finding a screen recorder library which does a good job a capturing the video as well as offers an options to manually start and stop the recording.

Finally I wrote one for myself and distributed as NPM library...!!

https://www.npmjs.com/package/puppeteer-screen-recorder

Hope this is helpful...!!

edited Jan 17 '22 at 16:32

answered Jan 17 '22 at 07:39

prasana kannan

646
6
12

thanx , very useful ... and it actually works !! – hretic Jan 17 '22 at 14:13
thanks, i actually used that before coming here but it seems to record the video later and kind of fails to capture how long the site takes to load – Chris Jul 06 '22 at 13:42
what is the ```PassThrough``` ? WebStorm could not find it – Igor Vlasuyk Jul 07 '22 at 07:32
1

Hi! Nice work! Is it possible to capture specific element? Thanks! – Florin Vîrdol Aug 29 '22 at 14:15

score 6 · Accepted Answer · answered May 27 '19 at 18:17

6

Add two empty functions called prepare and render in the options.

await record({
  browser: global_browser, // Optional: a puppeteer Browser instance,
  page, // Optional: a puppeteer Page instance,
  output: path + 'output.webm',
  fps: 60,
  frames: 60 * 5, // 5 seconds at 60 fps,
  prepare: function () {}, // <-- add this line
  render: function () {} // <-- add this line
});

Basically it's missing some default functions and the error is not handled properly.

answered May 27 '19 at 18:17

Md. Abu Taher

17,395
5
49
73

2

ffmpeg is not a npm package. Check this to install ffmpeg on your windows machine https://video.stackexchange.com/a/20496 – Md. Abu Taher May 28 '19 at 10:41
1

Recorded video quality is poor, with the same settings – Dinesh Rawat Oct 07 '20 at 08:18

score 0 · Answer 3 · answered May 28 '22 at 15:44

0

Also, there's https://www.npmjs.com/package/puppeteer-capture which uses HeadlessExperimental protocol.

answered May 28 '22 at 15:44

Alexey Pelykh

93
1
5

using puppeteer-recorder to record video of browser

3 Answers3