timecut

timecut is a Node.js program that records smooth videos of web pages that use JavaScript animations. It uses timeweb, timesnap, and puppeteer to open a web page, overwrite its time-handling functions, take snapshots of the web page, and then passes the results to ffmpeg to encode those frames into a video. This allows for slower-than-realtime and/or virtual high-fps capture of frames, while the resulting video is smooth.

You can run timecut from the command line or as a Node.js library. It requires ffmpeg, Node v8.9.0 or higher, and npm.

To only record screenshots and save them as pictures, see timesnap. For using virtual time in browser, see timeweb.

<a name="limitations" href="#limitations">#</a> timeweb, timecut, and timesnap Limitations

timeweb (and timesnap and timecut by extension) only overwrites JavaScript functions and video playback, so pages where changes occur via other means (e.g. through transitions/animations from CSS rules) will likely not render as intended.

Read Me Contents

• From the Command Line
  • Global Install and Use
  • Local Install and Use
  • Command Line url
  • Command Line Examples
  • Command Line options
• From Node.js
  • Node Install
  • Node Examples
  • Node API
• timecut Modes
• How it works

<a name="from-cli" href="#from-cli">#</a> From the Command Line

<a name="cli-global-install" href="#cli-global-install">#</a> Global Install and Use

To install:

Due to an issue in puppeteer with permissions, timecut is not supported for global installation for root. You can configure npm to install global packages for a specific user following this guide: https://docs.npmjs.com/getting-started/fixing-npm-permissions#option-two-change-npms-default-directory

After configuring, run:

npm install -g timecut

To use:

timecut "url" [options]

<a name="cli-local-install" href="#cli-local-install">#</a> Local Install and Use

To install:

cd /path/to/installation/directory
npm install timecut

To use:

node /path/to/installation/directory/node_modules/timecut/cli.js "url" [options]

Alternatively:

To install:

cd /path/to/installation/directory
git clone https://github.com/tungs/timecut.git
cd timecut
npm install

To use:

node /path/to/installation/directory/timecut/cli.js "url" [options]

<a name="cli-url-use" href="#cli-url-use">#</a> Command Line url

The url can be a web url (e.g. https://github.com) or a file path, with relative paths resolving in the current working directory. If no url is specified, defaults to index.html. Remember to enclose urls that contain special characters (like # and &) with quotes.

<a name="cli-examples" href="#cli-examples">#</a> Command Line Examples

<a name="cli-example-default" href="#cli-example-default">#</a> Default behavior:

timecut

Opens index.html in the current working directory, sets the viewport to 800x600, captures at 60 frames per second for 5 virtual seconds (temporarily saving each frame), and saves video.mp4 with the yuv420p pixel format in the current working directory. The defaults may change in the future, so for long-term scripting, it's a good idea to explicitly pass these options, like in the following example.

<a name="cli-example-viewport-fps-duration-mode-output" href="#cli-example-viewport-fps-duration-mode-output">#</a> Setting viewport size, frames per second, duration, mode, and output:

timecut index.html --viewport="800,600" --fps=60 --duration=5 \
  --frame-cache --pix-fmt=yuv420p --output=video.mp4

Equivalent to the current default timecut invocation, but with explicit options. Opens index.html in the current working directory, sets the viewport to 800x600, captures at 60 frames per second for 5 virtual seconds (temporarily saving each frame), and saves the resulting video using the pixel format yuv420p as video.mp4.

<a name="cli-example-selector" href="#cli-example-selector">#</a> Using a selector:

timecut drawing.html -S "canvas,svg"

Opens drawing.html in the current working directory, crops each frame to the bounding box of the first canvas or svg element, and captures frames using default settings (5 seconds @ 60fps saving to video.mp4).

<a name="cli-example-offsets" href="#cli-example-offsets">#</a> Using offsets:

timecut "https://tungs.github.io/amuse/truchet-tiles/#autoplay=true&switchStyle=random" \ 
  -S "#container" \ 
  --left=20 --top=40 --right=6 --bottom=30 \
  --duration=20

Opens https://tungs.github.io/amuse/truchet-tiles/#autoplay=true&switchStyle=random (note the quotes in the url and selector are necessary because of the # and &). Crops each frame to the #container element, with an additional crop of 20px, 40px, 6px, and 30px for the left, top, right, and bottom, respectively. Captures frames for 20 virtual seconds at 60fps to video.mp4 in the current working directory.

<a name="cli-options" href="#cli-options">#</a> Command Line options

• <a name="cli-options-output" href="#cli-options-output">#</a> Output: -O, --output name
  • Tells ffmpeg to save the video as name. Its file extension determines encoding if not explicitly specified.
• <a name="cli-options-fps" href="#cli-options-fps">#</a> Frame Rate: -R, --fps frame rate
  • Frame rate (in frames per virtual second) of capture (default: 60).
• <a name="cli-options-duration" href="#cli-options-duration">#</a> Duration: -d, --duration seconds
  • Duration of capture, in seconds (default: 5).
• <a name="cli-options-frames" href="#cli-options-frames">#</a> Frames: --frames count
  • Number of frames to capture.
• <a name="cli-options-selector" href="#cli-options-selector">#</a> Selector: -S, --selector "selector"
  • Crops each frame to the bounding box of the first item found by the [CSS selector][CSS selector].
• <a name="cli-options-viewport" href="#cli-options-viewport">#</a> Viewport: -V, --viewport dimensions
  • Viewport dimensions, in pixels, followed by optional keys. For example, 800 (for width), or "800,600" (for width and height), or "800,600,deviceScaleFactor=2" for (width, height, and deviceScaleFactor). When running in Windows, quotes may be necessary for parsing commas. For a list of optional keys, see config.viewport.
• <a name="cli-options-frame-cache" href="#cli-options-frame-cache">#</a> Frame Cache: --frame-cache [directory]
  • Saves each frame temporarily to disk before ffmpeg processes it. If directory is not specified, temporarily creates one in the current working directory. Enabled by default. See cache frame mode.
• <a name="cli-options-pipe-mode" href="#cli-options-pipe-mode">#</a> Pipe Mode: --pipe-mode
  • Experimental. Pipes frames directly to ffmpeg, without saving to disk. See pipe mode.
• <a name="cli-options-canvas-capture-mode" href="#cli-options-canvas-capture-mode">#</a> Canvas Mode: --canvas-capture-mode [format]
  • Experimental. Captures images from canvas data instead of screenshots. See canvas capture mode. Can provide an optional image format (e.g. png), otherwise it uses the saved image's extension, or defaults to png if the format is not specified or supported. Can prefix the format with immediate: (e.g. immediate:png) to immediately capture pixel data after rendering, which is sometimes needed for some WebGL renderers. Specify the canvas using the --selector option, otherwise it defaults to the first canvas in the document.
• <a name="cli-options-start" href="#cli-options-start">#</a> Start: -s, --start n seconds
  • Runs code for n virtual seconds before saving any frames (default: 0).
• <a name="cli-options-x-offset" href="#cli-options-x-offset">#</a> X Offset: -x, --x-offset pixels
  • X offset of capture, in pixels (default: 0).
• <a name="cli-options-y-offset" href="#cli-options-y-offset">#</a> Y Offset: -y, --y-offset pixels
  • Y offset of capture, in pixels (default: 0).
• <a name="cli-options-width" href="#cli-options-width">#</a> Width: -W, --width pixels
  • Width of capture, in pixels.
• <a name="cli-options-height" href="#cli-options-height">#</a> Height: -H, --height pixels
  • Height of capture, in pixels.
• <a name="cli-options-no-round-to-even-width" href="#cli-options-no-round-to-even-width">#</a> No Even Width Rounding: --no-round-to-even-width
  • Disables automatic rounding of capture width up to the nearest even number.
• <a name="cli-options-no-round-to-even-height" href="#cli-options-no-round-to-even-height">#</a> No Even Height Rounding: --no-round-to-even-height
  • Disables automatic rounding of capture height up to the nearest even number.
• <a name="cli-options-transparent-background" href="#cli-options-transparent-background">#</a> Transparent Background: --transparent-background
  • Allows background to be transparent if there is no background styling. Only works if the output video format supports transparency.
• <a name="cli-options-left" href="#cli-options-left">#</a> Left: -l, --left pixels
  • Left edge of capture, in pixels. Equivalent to --x-offset.
• <a name="cli-options-right" href="#cli-options-right">#</a> Right: -r, --right pixels
  • Right edge of capture, in pixels. Ignored if width is specified.
• <a name="cli-options