npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webelapse

v1.0.2

Published

Generate time-lapse video for a web page

Downloads

6

Readme

webelapse: Generate time-lapse video for a website

webelapse is a Node.js program that can be used to generate time-lapse video of a website. Possible use cases are helping to review/test/demo web application functionality before releasing to production or building screencasts of frequently updated websites.

webelapse has the following features:

  • Generate time-lapse video for a given website/URL
  • Account for duplicate/near duplicate frames and remove them from the output
  • Exponentially back off the next scheduled execution time if the content is not changing up to a max timeout interval
  • Generate video after times of frequent change and a return to static content

Installation

webelapse can be installed via npm

npm install -g webelapse

This package assumes ffmpeg is installed and available on the user's PATH. ffmpeg is required to generate videos.

Examples

Take a screenshot of a website on localhost, store files in directory named output and exit.

webelapse -u http://localhost:8080 -o output

Take a screenshot of a website on localhost every minute (60 seconds). Duplicate frames discarded. No video built.

webelapse -u http://localhost:8080 -o output -s 60

Record a stream of a website on localhost, taking screenshots every minute (60 seconds). Build video every 30 frames.

webelapse -u http://localhost:8080 -o output -s 60 -f 30

Record a stream of a website on localhost, taking screenshots every minute (60 seconds). Exponentially back off static content, increasing the interval for static content up to 1800 seconds (30 minutes) between frames. Video built dynamically once max backoff time reached.

webelapse -u http://localhost:8080 -o output -s 60 -m 1800

Same as previous but will consider frames a duplicate if its hash is within an edit distance of 2. Default is to require an exact image hash, which will resolve to the same hash for near duplicate images.

webelapse -u http://localhost:8080 -o output/desktop -d 2 -s 60 -m 1800

Show all options.

webelapse --help

Other installation methods

If you do not want to install the package globally, it can be installed in a local directory and executed as (instead of webelapse):

npm install webelapse
node node_modules/webelapse/record.js

Alternatively, you can use Git to clone the repository from GitHub:

git clone https://github.com/davidmezzetti/webelapse.git
cd webelapse
npm update
node record.js

Background

Screenshots and screencasts of a website are common and there are a number of packages out there built on either Selenium or Puppeteer. This package adds duplicate and near duplicate detection, to only record dynamic activity. This package is designed to work with websites that frequently update without user action, such as a live dashboard. Duplicate detection eliminates extremely long videos with nothing changing, while allowing you to see what is changing fast.

webelapse uses Puppeteer for web automation and perceptual hashing via imghash for near duplicate detection. Block mean perceptual hashing is designed to generate similar hashes for similar images. If a webpage has a single line of text updated, such as a timestamp, those frames can ignored. ffmpeg is used for encoding output videos and it is required to be installed on the user's PATH.

Security

webelapse is built on Puppeteer, which is built on the Chromium web stack. While Chromium has many security measures built in, you should still trust the source of URLs browsed as they will be loaded on your machine locally to render screenshots.

webelapse has features such as exponential backoff to increase the scheduled run frequency when content is static. Common sense should be used to only schedule the run frequency to what is necessary.

License

MIT