npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

puppeteer-screen-recorder

v3.0.6

Published

A puppeteer Plugin that uses the native chrome devtool protocol for capturing video frame by frame. Also supports an option to follow pages that are opened by the current page object

Downloads

470,284

Readme

puppeteer-screen-recorder

A puppeteer Plugin that uses the native chrome devtool protocol for capturing video frame by frame. Also supports an option to follow pages that are opened by the current page object. Check out API Docs.

Website Discord

NPM

GitHub GitHub Sponsors Open Collective backers and sponsors

GitHub package.json version GitHub top language npm GitHub Actions Workflow Status

GitHub forks GitHub Repo stars GitHub watchers Twitter Follow

Add Feature Request

Recording video/audio from video conferencing calls

If you’re looking to use this repo to retrieve video or audio streams from meeting platforms like Zoom, Google Meet, Microsoft Teams, consider checking out Recall.ai, an API for meeting recording.

Be a Sponsor

Puppeteer-screen-recorder isn't backed by a company, so the future of this project depends on you. Become a sponsor or a backer - help the open source community.

For Companies and Businesses

By becoming a Github Sponsor, your company and brand will be recognized as a one that gives back to the open source tools that run your business and one that respects your developers time and your customers' experience. For more details contact Author - Prasana Kannan

For Developers

By helping your company become a Github Sponsor, you will not only feel great about giving back to the open source tools that run your business run, If you believe your company could become a sponsor, then please reach out!

Getting Started

How to use

How to use

Installation Guide

Using Npm

npm install puppeteer-screen-recorder

Using Yarn

yarn add puppeteer-screen-recorder

API Description

1. Import the plugin using ES6 or commonjs.

// ES6
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';

// or commonjs
const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');

2. Setup the Configuration object.

const Config = {
  followNewTab: true,
  fps: 25,
  ffmpeg_Path: '<path of ffmpeg_path>' || null,
  videoFrame: {
    width: 1024,
    height: 768,
  },
  videoCrf: 18,
  videoCodec: 'libx264',
  videoPreset: 'ultrafast',
  videoBitrate: 1000,
  autopad: {
    color: 'black' | '#35A5FF',
  },
  aspectRatio: '4:3',
};
  • followNewTab : Boolean value which is indicate whether to follow the tab or not. Default value is true.
  • fps: Numeric value which denotes no.of Frames per second in which the video should be recorded. default value is 25.
  • ffmpeg_Path: String value pointing to the installation of FFMPEG. Default is null (Automatically install the FFMPEG and use it).
  • videoFrame: An object which is to specify the width and height of the capturing video frame. Default to browser viewport size.
  • aspectRatio: Specify the aspect ratio of the video. Default value is 4:3.
  • autopad: Specify whether autopad option is used and its color. Default to autopad deactivation mode.
  • recordDurationLimit: Numerical value specify duration (in seconds) to record the video. By default video is recorded till stop method is invoked`. (Note: It's mandatory to invoke Stop() method even if this value is set)

3. create a new instance of video recording

const recorder = new PuppeteerScreenRecorder(page, Config); // Config is optional

// or

const recorder = new PuppeteerScreenRecorder(page);
  • page: Puppeteer page object which needs to captured.
  • config: Config is an optional object. Default value is { followNewTab: true, fps: 25, ffmpeg_Path: null }

4. Start Video capturing

Option 1 - Start video capturing and save as file

const SavePath = './test/demo.mp4';
await recorder.start(savePath);

Option 2 - Start Video capturing using stream

const pipeStream = new PassThrough();
await recorder.startStream(pipeStream);

pass: Any writeable stream that will be an output for the stream recorder. Video is recorded and streamed with .mp4 extension.

savePath: string value indicating the directory on where to save the video. The path must also specify the name of the video with extension .mp4 (example - ./test/puppeteer-demo.mp4). Starting from v2, support added for extensions mp4, avi, mov and webm.

5. Stop the video capturing.

await recorder.stop();

Example

const puppeteer = require('puppeteer');
const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const recorder = new PuppeteerScreenRecorder(page);
  await recorder.start('./report/video/simple.mp4'); // supports extension - mp4, avi, webm and mov
  await page.goto('https://example.com');

  await page.goto('https://test.com');
  await recorder.stop();
  await browser.close();
})();

Key Feature

1. Follow Page Automatically

Automatically follows pages (multiple pages) which are opened at runtime, which will be part of video capturing. Also support options to disable the default flow.

2. No overhead over FF_MPEG library

FFMPEG library's installation and configuration are automatically managed by the library internally. Also offers options to configure with custom library path.

3. Native Implementation

This plugin works directly with native chrome devtool protocol to capture the video under the wood without any other thirdparty puppeteer plugins for screen capturing.

4. Adopted the Chromium principles

Adopted Chromium principles such as Speed, Security, Stability and Simplicity. It also ensures no frames are missed during video capturing and doesn't impact the performance, since its doesn't use any other puppeteer plugin internally.

5. Supports multiple video format and stream

Supports multiple video format like AVI, MP4, MOV and WEBM. Enable support for writable or duplex stream for process the output streaming .

FAQ

Some of the frequently asked question about puppeteer screen recording are

Q: Does it support Chrome in headless mode?


Yes, it supports Both headless and headFul mode.

It records full length video, frame by frame even when Chrome runs in headless mode.

Q: Does it support multiple extension?


Yes, Starting from version 2.0, support multiple extension like AVI, MP4, MOV and WEBM.

Q: Does it use the window object?


No, it's not tied to the window Object.

Q: Does it follows pages which are opened at runtime


Yes, it automatically follows pages which is created at runtime.

Q: is there an option to disable video recording for new page created and record video only for the page object passed


Yes, By setting the options.followNewTab to false, it record only video for the passed page object alone.

Q: Does it support to record video at 60 fps


Yes, video can be recorded at 60 fps. By setting options.fps to 60.

Q:Does it use the window object?


No, it doesn't use the window object.

Q: Does it use FFMPEG internally?


Yes, it uses FFMPEG with optimized options to speed up the video recording using stream from chrome devtool protocol.

Q: Does it support Webm?


Webm format is supported.

Q: Is it possible to output the stream for further processing/enhancing?


Yes. By passing writable stream/duplex stream to startStream method.

Q: Can I limit the time of recording, like to stop after 2 minutes?


By specifying the time to record (in seconds) using option.recordDurationLimit

Q: Does it support audio recording?


No, it doesn't audio recording.

Q: Does it support GIF format, any plan to support in fur?


No, it wont support GIF. since Gif is considered as a image format.