react-timelapse-tool

1.5.0 • Public • Published

react-timelapse-tool

NPM JavaScript Style Guide MIT

Overview

This is a GUI to display a users images, select and save a timelapse video. It uses a slick slider for displaying images in a carousel and HTML5 video to play the timelapse video.

This is a frontend tool only.

Creating the timelapse video

FFMPEG is A complete, cross-platform solution to record, convert and stream audio and video. This tool can create such videos but is server side command line tool. You can fire such a command by calling a url to a server which can fire this command.

Further FFMPEG Reading

FFMPEG Docs

Install

npm install --save react-timelapse-tool

Usage

import React, { Component } from 'react'
import TimelapseTool from 'react-timelapse-tool'
 
class App extends Component {
 
    config = {
        fpsSlider: {
          min: 0,
          max: 100
        },
        carousel: {
          settings: {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 8,
            slidesToScroll: 1
          },
          tiles: [
            {
              id: '1',
              src: '/image1.jpg',
              name: 'image01.0'
            },
            {
              id: '2',
              src: '/image2.jpg',
              name: 'image01.1'
            }
          ]
        }
    }
 
  render () {
    return (
      <TimelapseTool config={this.state.config}onCreate={() => console.log('Create Video')} onSave={() => console.log('Save Video')} />
    )
  }
}

Props

  • config
    • carousel
      • id
      • src
      • name

Callbacks

  • onCreate
  • onSave

Built With

License

MIT © richardskinner

Readme

Keywords

none

Package Sidebar

Install

npm i react-timelapse-tool

Weekly Downloads

1

Version

1.5.0

License

MIT

Unpacked Size

2.67 MB

Total Files

6

Last publish

Collaborators

  • rcskinner