Here is a simple page showing how to use
electron-recorder to create a movie:
Suppose that this was saved to a file called
index.html. Then we could run this using electron with the following command:
And once it is done, we should get the follow
First, you need to install electron. Instructions for this can be found on the electron web page, or you can install via npm using the
npm i electron-prebuild
Then you need to install ffmpeg on your system and put it on your path. Instructions can be found on the ffmpeg homepage, or if you are on a debian Linux system you can use apt:
apt-get install ffmpeg
Finally, after all that is done you can install the module:
npm i electron-recorder
And that's it!
var recorder = require('electron-recorder')(window[, options])
This creates a new recorder instance. It takes two arguments:
windowwhich is a reference to the window object in which we are recording
optionswhich is a dictionary of optional configuration parameters.
ffmpega string representing the path to the ffmpeg executable (default
fpsthe frame rate of the video (default
outputthe name of the file to write the output to. If not specified, then output is streamed (note that some movie formats like AVI and MP4 do not support streaming output)
formatThe type of the output format (default
Returns A new video recorder instance
Takes a snapshot of the current browser window and appends it to the movie.
next(err)is a callback which is executed once the frame is successfully recorded.
Ends the video recording and saves the results
A streaming text log of the output of
ffmpeg as it is encoding.
If no output was specified, then the
.stream property of the recorder is a readable stream object containing the encoded movie.
Can this be run headless?
Sort of. On linux, you can use xvfb to redirect the display to an offscreen buffer. You can also try using
electron-spawn. Better options right now are limited because electron does not yet support headless rendering natively, but this may change in the future.
Why use this instead of
electron-recorder records your whole display and is streaming. It is geared to recording longer animations and requires specially instrumenting your code.
ccapture.js runs in your browser and has no dependencies, but also shims a bunch of functions to emulate timing and globs all your frames at once in your tab's memory which can cause slow downs or crashes on very long movies. Also it only supports export to a limited number of formats, while
electron-recorder can export to anything ffmpeg supports.
What happens if I touch my window during the animation?
Stuff will probably break. Don't do that!
(c) 2016 Mikola Lysenko. MIT License