mitchwadair/clip-n-ship

Convert video clips to different size formats easily

clip-n-ship

Convert video clips to different size formats easily

About

ClipNShip is a simple library for use in converting videos into a size format that is compatible with whatever you need (landscape to portrait by default). Entirely client-side, ClipNShip ensures there is no need to transfer any data between users and a server.

ClipNShip works in a system called "layers". The consumer uses the input media as a base and stacks layers on top of each other to create different effects and media sizes. This allows full control over how the result looks.

Install

Install through npm for use in ES modules

npm install clip-n-ship

import ClipConverter from "clip-n-ship";
const converter = new ClipConverter(videoURL);

Or through CDN

<script src="https://cdn.jsdelivr.net/gh/mitchwadair/[email protected]/dist/clipnship.min.js"></script>

Having that tag will expose the ClipConverter class to the global scope for your use:

const converter = new ClipConverter(videoURL);

Documentation

For more info on how to use ClipNShip, check out the docs in this repo.

Contribute

Want to contribute to ClipNShip? Check out the contribution guidelines to see how.

Support

If you would like to help support maintaining ClipNShip, consider sponsoring me on GitHub Sponsors. You can also give a one-time donation through PayPal.

        

clip-n-ship's Issues

Also publish to NPM

Making this available on NPM can make it easier for people building projects that way to utilize ClipNShip

Create Clip-n-Ship Module

This should be the clip-n-ship class/module that one should instantiate.

Some proposals:

/*
  @param video (required) - blob?? - the video file to convert
*/
const converter = new ClipConverter(video); // additional args?? should return the canvas element for consumer to do whatever with maybe?

ClipConverter API:

/*
  @param scale (required) - number - the scale of the video layer
  @param filter (optional) - string - the filter to apply to the layer. defaults to "none"
*/
converter.addLayer(0.5, "blur(20px")) // adds a new layer to the clip.  should it return an index or id??

converter.getLayers() // returns list of layers (their properties)

/*
  @param index (required) - number - the index of the layer to get
*/
converter.getLayer(0) // returns the layer properties for specified layer

/*
  @param index (required) - number - the index of the layer to update
  @param scale (required) - number - the scale value to change to
*/
converter.updateLayerScale(0, 0.75) // updates the layer's scale property

/*
  @param index (required) - number - the index of the layer to update
  @param filter (required) - string - the filter value to change to
*/
converter.updateLayerFilter(0, "none") // updates the layer's filter property

converter.render() // renders the clip using the specified layers, returns some kind of progress observer (which returns an object URL when complete)??

Allow New Source Layers

One should be able to add additional sources to a clip if desired. For example, being able to add an image (like a watermark) should be possible.

Investigate Ensuring Consistent FPS Recording

Being a browser-based module, ClipNShip is limited in performance by the user's computer. This means that slower PCs could have trouble with drawing/recording at a consistent framerate, especially with more complex layer setups.

I found a stackoverflow thread which outlines a way I could ensure consistent framerate when recording. This should provide a baseline for what is needed, but adaptation will be needed to support video sources. Audio could also be tricky with this method.

Allow Subsections of Video as Layer

A layer should be able to have a sub-area selected to sample from. For example, in a video where there is a face cam, one should be able to select the facecam area and place it as a layer.

const selectionRange = {
    rangeStart: [0, 0],
    rangeEnd: [200, 200]
}
converter.addLayer(1, "none", selectionRange) // data structure/function structure TBD

Add Type Definitions

It could be useful to add a type definitions file for people that want to use TypeScript