Site-recorder NPM

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

npm.io

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