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
npx site-recorder -gif https://google.com https://wix.comThe 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.jssite-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.
site-recorder requires:
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 |
Both output.mp4 and output.gif are extracted in the same folder as where command is executed.
Install the dependencies and devDependencies and start the server.
npm install site-recorder -g
npm run example:gif # generates both gif and videoWant to contribute? Great! Please take a look at opened issues. Related TeamCity: http://tc.dev.wixpress.com/viewType.html?buildTypeId=SiteRecorder_SiteRecorder_O
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
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] |
npm install site-recorder
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent