Skip to content

Instantly share code, notes, and snippets.

@achuthhadnoor

achuthhadnoor/lapse.md

Last active April 18, 2023 07:31
Show Gist options
  • Save achuthhadnoor/a274488f87f650a1f0e485466e39a3ac to your computer and use it in GitHub Desktop.
Save achuthhadnoor/a274488f87f650a1f0e485466e39a3ac to your computer and use it in GitHub Desktop.
Download ZIP
Lapse - Timelapse screen recording app.
Raw
lapse.md

Lapse - Timelapse Video Recorder

Lapse is a web-based application that allows you to record your screen and generate timelapse videos directly in your browser using FFmpeg WASM.

Features

  • Record your screen in timelapse mode
  • Choose a time interval for capturing frames (e.g., every 1 minute)
  • Generate a timelapse video with FFmpeg WASM
  • Download the generated video as a Blob
  • No external FFmpeg installation required
  • Portable and convenient for web applications

Usage

  1. Open the website "https://lapse.achuth.dev" in a modern web browser that supports the necessary APIs (e.g., MediaRecorder, Blob, Web Workers).
  2. Click the "Start Recording" button to start recording your screen in timelapse mode.
  3. Choose the time interval for capturing frames using the "Frame Interval" dropdown menu (e.g., every 1 minute).
  4. Click the "Stop Recording" button to stop the recording and generate the timelapse video.
  5. The generated video will be displayed in the "Preview" section, and you can download it by clicking the "Download Video" button.
  6. You can also adjust the timelapse effect by modifying the vf parameter in the FFmpeg command, which is used to set the playback speed of the frames.

Requirements

  • A modern web browser that supports the necessary APIs (e.g., MediaRecorder, Blob, Web Workers).
  • Internet connection for loading the FFmpeg WASM library dynamically.

Development

If you want to run the application locally or contribute to the codebase, follow these steps:

  1. Clone the repository: git clone https://github.com/achuthnp/lapse.git
  2. Install dependencies: npm install
  3. Start the development server: npm run dev
  4. Open the website in your web browser at "http://localhost:3000"

Credits

  • FFmpeg WASM - FFmpeg library compiled to WebAssembly for video processing in the browser.
  • Next.js - A React framework for building server-rendered React applications.
  • React - A popular JavaScript library for building user interfaces.
  • Tailwind CSS - A modern CSS framework for building responsive and customizable UI components.

License

This project is open-source and available under the MIT License.

Contributing

If you'd like to contribute to this project, please feel free to submit issues, pull requests, or suggestions. Contributions are welcome and appreciated!

Enjoy recording and generating timelapse videos with Lapse! 🎥📈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment