# record-page

> Library for recording web page as high resolution video with specified frame rate using Headless Chrome.

Latest version **1.0.1** (published 2020-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install record-page
pnpm add record-page
yarn add record-page
bun add record-page
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-03-17 |
| First published | 2020-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 8 |
| Dependencies | 3 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Łukasz Nawrot |
| Maintainers | wookasheq |
| Keywords | chrome, video, render, capture, headless, page, website, animation, mp4, url |

## Links

- npm: https://www.npmjs.com/package/record-page
- Repository: https://github.com/lnawrot/record-page
- Homepage: https://github.com/lnawrot/record-page#readme
- Issues: https://github.com/lnawrot/record-page/issues
- npm.io page: https://npm.io/package/record-page

## Dependencies (3)

- [rimraf](https://npm.io/package/rimraf.md) ^3.0.0
- [chrome-launcher](https://npm.io/package/chrome-launcher.md) ^0.13.0
- [chrome-remote-interface](https://npm.io/package/chrome-remote-interface.md) ^0.28.0

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-03-17
- 1.0.0 — 2020-03-16

## README

# record-page

Library for recording web page as high resolution video with specified frame rate using Headless Chrome.

Uses virtual time budgeting under the hood. Produces smooth video as each frame, before capture, is given enough time to flush all changes to the screen.

**Note:** Library uses *HeadlessExperimental* domain of Chrome DevTools Protocol, as the name indicates it's experimental, so it may stop working with future Chrome updates. Confirmed to work correctly on Chrome 80.

<img src="https://github.com/lnawrot/record-page/raw/master/assets/demo.gif" alt="record-page demo">

## Install

```
$ npm install record-page
```

## Requirements

* [Chrome launcher](https://www.npmjs.com/package/chrome-launcher) needs to be able to start Chrome instance.

* [ffmpeg](https://www.ffmpeg.org/download.html) is required to be installed in order to render video files (also available as a command `ffmpeg`).


## Usage

```js
const record = require('record-page');

(async () => {
  await record({
    url: 'https://animejs.com/',
    maxFramesCount: 150,
  });
  console.log('Finished, video.mp4 generated!');
})();
```

Frames recording can be stopped by defining `maxFramesCount` parameter or calling `window.RECORDING_STOP()` function in page context.

## Docs

### Config

#### url

Type: `string`
*Required*

URL of page to be recorded.

##### filename

Type: `string`
Default: `'video'`

Result file filename.

##### framesDir

Type: `string`
Default: `'frames'`

Name of directory where video frames will be saved.

##### framesPerSecond

Type: `number`
Default: `30`

Frame rate at which frames will be saved and then video generated.

##### maxFramesCount

Type: `number`

Defines after how many frames should recording stop.

##### width

Type: `number`
Default: `1920`

Window width.

##### height

Type: `number`
Default: `1080`

Window height;

##### delay

Type: `number`
Default: `0`

Delay recording by given *ms* duration. Applied right after page load.

##### shouldWaitForRecordStart

Type: `boolean`
Default: `false`

If `false` then recording will start immediately, otherwise only after **`window.RECORDING_START()`** will be called in page context.


##### shouldApplyReflow

Type: `boolean`
Default: `true`

In order for frame changes to be flushed and visible on screenshot in most cases forced reflow should be applied. If set to `true` then page is forced to reflow in `requestAnimationFrame` callback (it doesn't hurt performance as virtual time is used here).


##### expression

Type: `string`

Expression to be evaluated in page context. Useful for interactions with page.

##### audio

Type: `object`

Defines audio configuration applied when rendering video.
```ts
{
  path: string,
  loop: boolean,
  // in seconds
  fadeInDuration: number,
  fadeOutDuration: number,
}
```

##### chrome

Type: `object`

Chrome launch options.
```ts
{
  headless?: boolean,
  port?: number,
  debug?: boolean,
  flags?: string[],
}
```

##### onInit

Type: `callback`

Callback executed after client is initialized. [chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface#class-cdp) client is passed as an argument.

## Roadmap

* easier interactions with page (maybe with Puppeteer?)
* more precise handling when recording stops
* allow modifying params passed to **ffmpeg**
* testing

---
_Source: https://npm.io/package/record-page · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._