site-recorder

Why

site-recorder is a CLI tool for creating comparable image/video artefact. You can pass url and get GIF animation or video loading passed website from the first network request till time to interactive. It's not possible to write real video with for ex. WebRTC, because in that case we have to wait when our script will be loaded. Instead, we are using puppeteer and generated trace.json to get screenshots which demonstrate how site is loading.

Example: http://ronnyr34.wixsite.com/mysite-1

Example

npx site-recorder -gif https://google.com https://wix.com

The result is recorded video and gif-animation of loading passed url.

Custom script example:

npx site-recorder -gif --custom-script ../src/examples/long-wait-task.js

Tech

site-recorder uses a number of open source projects to work properly:

• puppeteer - Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
• Commander.js - The complete solution for node.js command-line interfaces.
• ffmpeg - A complete, cross-platform solution to record, convert and stream audio and video.
• fluent-ffmpeg - This library abstracts the complex command-line usage of ffmpeg into a fluent, easy to use node.js module.
• gif-encoder - Streaming GIF encoder

And of course site-recorder itself is open source with a public repository on GitHub.

Prerequisites

site-recorder requires:

• Node.js v8+;
• ffmpeg installed (for mac os: brew install ffmpeg).

Usage

Usage: site-recorder [options] <url1 ...> <url2 ...>

Options:

| Option | Description | |--------------------------------------|---------------------------------------------------------------------------------------------| | -v,--version | output the version number | | -d,--debug | see full error messages, mostly for debugging | | -gif,--generate-gif | generate gif as additional output | | -W, --resolution-width [width] | define the resolution width in the screen recording | | -H, --resolution-height [height] | define the resolution height in the screen recording | | -D, --device [device] | define the device that will run the screen recording (Override resolution param | | -N, --network [network] | define the throttler that will emulate network slowdown | | -t,--timeout [navigation-timeout] | navigation timeout for loading event in puppeteer (default: 30000) | | -cs, --custom-script [path-to-file] | add path to custom script that will execute once page is loaded (receives page as argument) | | -bw, --disable-colors | minimize color and styling usage in output | | -h,--help | output usage information |

Using of artifacts

Both output.mp4 and output.gif are extracted in the same folder as where command is executed.

Installation

Install the dependencies and devDependencies and start the server.

npm install site-recorder -g
npm run example:gif # generates both gif and video

Development

Want to contribute? Great! Please take a look at opened issues. Related TeamCity: http://tc.dev.wixpress.com/viewType.html?buildTypeId=SiteRecorder_SiteRecorder_O

Using site recorder as Library

Exposed several function to allow using site recorder as library for services.

• execute [Default module] - execute the site recorder on two urls
• devices - return array of devices
• networks - return array of networks

API

exexute (urls, options)
devices ()
networks ()

| Name | Description | |----------------------|---------------------| | urls | Array of two urls that will be recorder | | options | resolution-width: [number] | | | resolution-height: [number] | | | device: [string] - valid value from devices | | | network: [string] - valid value from networks | | | timeout: [number] in millisecond | | | disable-colors: [boolean] |

Installation

npm install site-recorder

License

MIT