react-timelapse-tool

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

• React Slick Slider

License

MIT © richardskinner