使用 puppeteer-recorder 录制浏览器的视频

Question

我正在尝试记录 puppeteer 以查看当我在服务器上运行它时会发生什么，因为我知道这个包可以满足我的需求。

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

所以这是我的代码的简化版本

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

但我收到这个错误

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

我什至npm i reinstall ffmpeg --with-libvpx 按照这里的建议跑了

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

但仍然没有工作......我需要做什么？

Answer 1

我知道这对于你的问题来说是一个很晚的答复，但尽管如此。

一年前，我访问了同一个堆栈溢出线程，并且遇到了类似的挑战，即找到一个屏幕录像机库，它可以很好地捕获视频，并提供手动启动和停止录制的选项。

最后我为自己写了一个并作为 NPM 库分发......!!

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

希望这有帮助...!!

Answer 2

在选项中添加两个名为prepare和 的空函数render。

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

基本上它缺少一些默认功能并且错误没有得到正确处理。