使用 puppeteer + ffmpeg 从网站录制视频

Question

I'm trying to record video from website using the way similar to puppeteer-recorder , but I want to stop recording by myself and then save it to file (after I stopped it). I wrote simple web service for this purpose:

var express = require('express');
var app = express();
const { spawn } = require('child_process');
const puppeteer = require('puppeteer');
var record = true;


app.get('/startRecord', function (req, res)
{
const frun_record = async () => {
    console.log("Start recording");
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://worldfoodclock.com/', { waitUntil: 'networkidle2' });
    var ffmpegPath = 'ffmpeg';
    var fps = 60;

    var outFile = 'E:\\Code\\video-record\\output.webm';

    const args = ffmpegArgs(fps);

    args.push(outFile);

    const ffmpeg = spawn(ffmpegPath, args);

    const closed = new Promise((resolve, reject) => {
        ffmpeg.on('error', reject);
        ffmpeg.on('close', resolve);
    });

    console.log("Entering loop");

    while (record) {
        let screenshot = await page.screenshot({ omitBackground: true });
        await write(ffmpeg.stdin, screenshot);
    }
    ffmpeg.stdin.end();
    console.log("Recording stopped");
    await closed;
};
frun_record();
res.end( "starting recording" );
})

app.get('/stopRecord', function (req, res) {
 record = false;
 res.end( "stopped" );
})

const ffmpegArgs = fps => [
  '-y',
  '-f',
  'image2pipe',
  '-r',
  `${+fps}`,
  '-i',
  '-',
  '-c:v',
  'libvpx',
  '-auto-alt-ref',
  '0',
  '-pix_fmt',
  'yuva420p',
  '-metadata:s:v:0',
  'alpha_mode="1"'
];

const write = (stream, buffer) =>
    new Promise((resolve, reject) => {
        stream.write(buffer, error => {
            if (error) reject(error);
            else resolve();
        });
    });

var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})

But it always record only 1 second video, looks like stream is just overwritten. I tried just save screenshots on disk and it was more than 1 second of video. So the main question is how to put all the screenshots into the stream and then save it on disk? And another thing I'd like to know is what the frequency of taking screenshots from web page?

Answer 1

It can be done like this:

let recordVideo = (setup) => {
    return new Promise(async (resolve, reject) => {
        let frames = [];
        let session;

        let start = async () => {
            session = await page.target().createCDPSession();
            await session.send('Page.startScreencast');
            session.on('Page.screencastFrame', event => {
                event.data; // Base64 encoded frame
                frames.push(event.data);
            });
        }

        let stop = async () => {
            await session.send('Page.stopScreencast');
            resolve(frames);
        }

        await setup(start, stop);
    });
}

let setup = (start, stop) => {
    start();
    /** statements */
    stop();
}

let frames = await recordVideo(setup);

Inside "session.on" function all frames are going to be retrieved every time this function trigger a new frame. You must replace "/** statements */" by your logic.