Question

我正在尝试使用类似于puppeteer-recorder的方式从网站录制视频，但是我想自己停止录制，然后将其保存到文件中（停止后）。为此，我编写了简单的Web服务：

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)
})

但是它总是只录制1秒的视频，好像流只是被覆盖。我尝试仅将屏幕截图保存在磁盘上，这是视频的1秒钟以上。因此，主要问题是如何将所有屏幕截图放入流中，然后将其保存在磁盘上？我想知道的另一件事是从网页获取屏幕截图的频率如何？

Answer 1

可以这样做：

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);

在“ session.on”函数中，每当该函数触发新帧时，将检索所有帧。您必须使用逻辑替换“ / **语句* /”。

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

1 个答案: