Giter VIP home page Giter VIP logo

timelapse's Introduction

Hubsy Timelapse

Use AWS infrastructure for timelapse videos and presentations.

Overview

  1. Images are submitted to an S3 bucket.
  2. A Lambda function is triggered on new image upload 2.2. The image is processed (cropped, resized, exif cleaned up, etc) 2.3. The image is added to the timelapse video
  3. A rules-based workflow is triggered for further processing
  4. A lambda funtion can be called via HTTP to retrive a list of file names for a slideshow given a date/time range

Setup

npm install

Set your AWS configuration in .env file.

To test run locally:

npm start

To deploy on AWS:

npm run deploy

Implementation details

S3 storage

Cameras upload the original full size images to an S3 bucket. Every camera has its own path within a bucket. The path inside the bucket (object prefix) is configurable.

    -bucket
        config.txt
        -cam1
            config.txt
            -full
            -exif
            -resized
                -[size name 1]
                    -idx
                        last.txt
                        last100.txt
                        today.txt
                        24hr.txt
                        7days.txt
                        30days.txt
                -[size name 2]
                    -idx
                -[size name 3]
        -cam2
        ...
  • bucket name: can be any name. A λ-function assigned to the bucket will extract the bucket name and the cam prefix from the object name it was given.
  • config.txt: a config file, which can be nested. The deeper level config file overwrites the higher level one.
  • file names: uploaded file names must follow ISO 8601 + the file type in this format (YYYYMMDDThhmmss.ssss.jpg, e.g. 20160815T170001.050.jpg). The date/time is recorded by the camera at the moment of the image capture. It may be different from the exif data.
  • object properties: mimetype=image/jpg, http caching=forever
  • full: the folder for original files. This is where the cameras upload them in the first place.
  • idx: a folder with indexes maintained by the λ-function as simple list of URLs, one per line. Set http caching to expire immediately.
  • exif: a folder with with exif data files extracted from the originals. The file names must match those of the original file, except the extension (.txt) and the mime type is text/text, http caching=forever
  • resized: a folder with resized images with the same file names as the original. The images are grouped in subfolders as per the config file. Set http caching=forever

The camera app knows the bucket name, AWS credentials and its name. It will construct the object name in the format: [bucketname]/[cameraname]/full/[filename].jpg and send it to S3. The λ-function will be triggered by the upload and will process the file.

Theoretically, there is no need to pre-create the camera folder if the AWS credentials allow for bucket-wide uploads.

The λ-function creates the folders it needs on the fly. There is no need to pre-create them, unless it is required for access control purposes.

Bucket policies

The goal is to grant public access to all objects in resized folder.

{
	"Id": "Hubsy-Public-Access-Policy",
	"Version": "2012-10-17",
	"Statement": [
		{
			"Action": "s3:GetObject",
			"Effect": "Allow",
			"Resource": "arn:aws:s3:::BUCKET-NAME/*/resized/*",
			"Principal": "*"
		}
	]
}

The λ-function has its own set of policies. It should be able to read the entire contents of the bucket, but write only into resized folder. This policy has to be set in IAM and attached to the role used for the function.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::BUCKET-NAME/*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::BUCKET-NAME/*/resized/*"
        }
    ]
}

Image resizing

Images are resized to multiple smaller sizes as per this section of the config file:

{
  "resize": [
    {"folder": "resized/fhd", "width": 1920, "height": 1080, "compression": 50}
    {"folder": "resized/hd", "width": 1080, "height": 720, "compression": 50}
    {"folder": "resized/small", "width": 500, "height": 500, "compression": 50}
  ],
  "crop": {"top": 100, "left": 100,	"width": 300, "height": 300}
}
  • folder: folder name for the resized image to be put in, relative to the camera root. It's just an object prefix in the context of S3.
  • width, height: the maximum size in pixels for the image. It may not be proportional to the image which has to fit into this bounding box without cropping.
  • compression - JPEG compression / quality level, 1 - 100, where 1 is the lowest and 100 is uncompressed.
  • crop - describes the box that has to be cropped from the original image before resizing.

When a new file is placed into the bucket the λ-function should check if it's a valid jpeg file, parse the name, extract paths, read the config files, crop, resize and save the results.

Video

Every new image is added to the end of the timelapse video. Frame duration, video size and other parameters are specified in the config file.

Getting a list of images for a slideshow

The most commonly requested image sets are stored in [cam-name]/idx folder as absolute image URLs, one per line.

An HTTP request can be made to a lambda function to get a list of files for a date/time range. The HTTP REST API is configured via Amazon API Gateway.

Parameters: dateBefore, dateAfter, count.

timelapse's People

Contributors

rimutaka avatar eafzali avatar

Watchers

 avatar

Forkers

velro mm0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.