Skip to content

CatalanCabbage/electron-vlog

Repository files navigation

WIP: Not release ready. Tested to work, but options have not been added yet.

Electron vLog

Tests repo GitHub license


The zero-effort way to take video recordings, screenshots and timelapse images of your Electron app.
Requires just two words of code: require('electron-vlog')
That's it. Swear by mine beard.*


What is Electron vLog?

A light-weight, zero-dependency package that (spoiler alert) visually logs your work!

  • Take videos of your Electron app - want to put together a quick demo? Or make it easier for users to share videos of your app?
  • Take perfect screenshots of your app window natively without having to edit and snip and crop
  • Make a time-lapse to visually document your app's journey from start to finish. See how your UI evolved from a plain window to a glorious app!
    (How does this work? Automatically take screenshots of your app at regular intervals; you can stitch them all together in the end to get a great video of your app's journey!)

Examples

Installing the package:

npm install --save electron-vlog

or if you want to use this package only during development:

npm install --save-dev electron-vlog

Code setup:

require the electron-vlog module in any Javascript file that has been included in the HTML page you want to record.

For example, if index.js is included in the index.html that you want to capture/record, like this:

...
<script src="./index.js"></script>
...

then add this one line to your index.js file:

require('electron-vlog');

That's all the code you need!

Usage:

You can now use keyboard shortcuts to perform actions.
(Note: You can customize behavior, as detailed in the options section.)

Crtl+Shift+M Captures a screenshot

Captures an image of the window in focus while pressing the shortcut.

Crtl+Shift+B - Toggles Timelapse

First press starts timelapse, second press stops timelapse.
Takes a screenshot every few seconds - only if there's a change in appearance.
That is, the screenshot is saved only if it differs from the previous screenshot, so that you don't end up with the same images!

Crtl+Shift+N - Toggles Screen Recording

First press starts recording, second press stops recording.

Programmatic usage(API):

Basic API's have been exposed to perform these actions with code.

Options

To be added



Rough draft

[WIP]electron-vlog

Objectives:

  • Port as npm package
  • Must work for multiple windows, with simple instructions
  • Zero-effort
    • Video recording
    • Screenshots
    • Timelapses
  • Comprehensive options
    • Path to save media
    • Media naming format
    • Debug option
    • Callback on image save - even prevent save
    • Timelapse
      • Time interval between screenshots
    • Screenshots
      • Window vs visible area
  • Self-explanatory debug logging option
  • Have tests for all cases

To-do:

Upcoming changes:

  • Add automated testing
  • More options:
    • Absolute path to save media
    • Media naming format
    • Callback on image save

Footnotes:

1 Swear by mine beard, paraphrased from the Bard - Shakespeare's As you like it, Act I Scene II.

About

Take video recordings, screenshots and time-lapses of your Electron app with ease

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published