Mikael Finstad
6 years ago
25 changed files with 1769 additions and 0 deletions
-
15.eslintrc
-
107cli.js
-
199colors.js
-
36examples/commonFeatures.json5
-
32examples/customCanvas.js
-
35examples/customFabric.js
-
16examples/gl.json5
-
7examples/image.json5
-
36examples/losslesscut.json5
-
13examples/resizeHorizontal.json5
-
14examples/resizeVertical.json5
-
15examples/speedTest.json5
-
13examples/transitionEasing.json5
-
7examples/transparentGradient.json5
-
71glTransitions.js
-
388index.js
-
42package.json
-
16shaders/rainbow-colors.frag
-
331sources/fabricFrameSource.js
-
61sources/frameSource.js
-
65sources/glFrameSource.js
-
21sources/shared.js
-
124sources/videoFrameSource.js
-
71transitions.js
-
34util.js
@ -0,0 +1,15 @@ |
|||
{ |
|||
"extends": "airbnb-base", |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"parserOptions": { |
|||
"sourceType": "script" |
|||
}, |
|||
"rules": { |
|||
"max-len": 0, |
|||
"no-console": 0, |
|||
"object-curly-newline": 0, |
|||
"no-await-in-loop": 0, |
|||
} |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
#!/usr/bin/env node
|
|||
const meow = require('meow'); |
|||
const fs = require('fs'); |
|||
const FileType = require('file-type'); |
|||
const pMap = require('p-map'); |
|||
const JSON5 = require('json5'); |
|||
const assert = require('assert'); |
|||
|
|||
const editly = require('.'); |
|||
|
|||
|
|||
const cli = meow(`
|
|||
Usage |
|||
$ editly CLIP1 [CLIP2 [CLIP3 ...]] |
|||
where each CLIP can be one of the following: |
|||
- A path to a video file |
|||
- A path to an image |
|||
- A quoted text to show in a title screen, prefixed by "title:" |
|||
|
|||
Or alternatively: |
|||
$ editly --json JSON_PATH |
|||
where JSON_PATH is the path to an edit spec JSON file, can be a normal JSON or JSON5 |
|||
|
|||
Options |
|||
--out Out video path (defaults to ./editly-out.mp4) - can also be a .gif |
|||
--json Use JSON config, all other options will be ignored |
|||
--transition-name Name of default transition to use |
|||
--transition-duration Default transition duration in milliseconds |
|||
--width Width which all videos will be converted to |
|||
--height Height which all videos will be converted to |
|||
--fps FPS which all videos will be converted to |
|||
--font-path Set default font to a .ttf |
|||
--audio-file-path Add an audio track |
|||
|
|||
--fast, -f Fast mode (low resolution and FPS, useful for getting a quick preview) |
|||
--verbose |
|||
|
|||
Examples |
|||
$ editly title:'My video' clip1.mov clip2.mov title:'My slideshow' img1.jpg img2.jpg title:'THE END' --audio-file-path /path/to/music.mp3 --font-path /path/to/my-favorite-font.ttf |
|||
$ editly --json my-editly.json --out output.gif |
|||
`, {
|
|||
flags: { |
|||
fast: { type: 'boolean', alias: 'f' }, |
|||
transitionDuration: { type: 'number' }, |
|||
width: { type: 'number' }, |
|||
height: { type: 'number' }, |
|||
fps: { type: 'number' }, |
|||
}, |
|||
}); |
|||
|
|||
(async () => { |
|||
let params = { |
|||
defaults: {}, |
|||
}; |
|||
if (cli.flags.json) { |
|||
params = JSON5.parse(fs.readFileSync(cli.flags.json, 'utf-8')); |
|||
} else { |
|||
const clipsIn = cli.input; |
|||
if (clipsIn.length < 1) cli.showHelp(); |
|||
|
|||
const clips = await pMap(clipsIn, async (clip) => { |
|||
const match = clip.match(/^title:(.+)$/); |
|||
if (match) return { type: 'title-background', text: match[1] }; |
|||
|
|||
const { mime } = await FileType.fromFile(clip); |
|||
|
|||
if (mime.startsWith('video')) return { type: 'video', path: clip }; |
|||
if (mime.startsWith('image')) return { type: 'image', path: clip }; |
|||
|
|||
throw new Error(`Unrecognized clip or file type "${clip}"`); |
|||
}, { concurrency: 1 }); |
|||
|
|||
assert(clips.length > 0, 'No clips specified'); |
|||
|
|||
params.clips = clips.map((clip) => ({ layers: [clip] })); |
|||
} |
|||
|
|||
const { verbose, transitionName, transitionDuration, width, height, fps, audioFilePath, fontPath, fast, out: outPath } = cli.flags; |
|||
|
|||
if (transitionName || transitionDuration) { |
|||
params.defaults.transition = { |
|||
name: transitionName, |
|||
duration: transitionDuration, |
|||
}; |
|||
} |
|||
|
|||
if (fontPath) { |
|||
params.defaults.layer = { |
|||
fontPath, |
|||
}; |
|||
} |
|||
|
|||
if (outPath) params.outPath = outPath; |
|||
if (audioFilePath) params.audioFilePath = audioFilePath; |
|||
if (width) params.width = width; |
|||
if (height) params.height = height; |
|||
if (fps) params.fps = fps; |
|||
|
|||
if (fast) params.fast = fast; |
|||
if (verbose) params.verbose = verbose; |
|||
|
|||
if (params.verbose) console.log(JSON5.stringify(params, null, 2)); |
|||
|
|||
if (!params.outPath) params.outPath = './editly-out.mp4'; |
|||
|
|||
await editly(params); |
|||
})().catch(console.error); |
|||
@ -0,0 +1,199 @@ |
|||
// TODO make separate npm module
|
|||
|
|||
// https://stackoverflow.com/a/4382138/6519037
|
|||
const allColors = [ |
|||
'hsl(42, 100%, 50%)', |
|||
'hsl(310, 34%, 37%)', |
|||
'hsl(24, 100%, 50%)', |
|||
'hsl(211, 38%, 74%)', |
|||
'hsl(350, 100%, 37%)', |
|||
'hsl(35, 52%, 59%)', |
|||
'hsl(22, 11%, 45%)', |
|||
'hsl(145, 100%, 24%)', |
|||
'hsl(348, 87%, 71%)', |
|||
'hsl(203, 100%, 27%)', |
|||
'hsl(11, 100%, 68%)', |
|||
'hsl(265, 37%, 34%)', |
|||
'hsl(33, 100%, 50%)', |
|||
'hsl(342, 63%, 42%)', |
|||
'hsl(49, 100%, 47%)', |
|||
'hsl(5, 81%, 27%)', |
|||
'hsl(68, 100%, 33%)', |
|||
'hsl(26, 61%, 21%)', |
|||
'hsl(10, 88%, 51%)', |
|||
'hsl(84, 33%, 12%)', |
|||
]; |
|||
|
|||
// https://digitalsynopsis.com/design/beautiful-color-ui-gradients-backgrounds/
|
|||
const gradientColors = [ |
|||
[ |
|||
'#ff9aac', |
|||
'#ffa875', |
|||
], |
|||
[ |
|||
'#cc2b5e', |
|||
'#753a88', |
|||
], |
|||
[ |
|||
'#42275a', |
|||
'#734b6d', |
|||
], |
|||
[ |
|||
'#bdc3c7', |
|||
'#2c3e50', |
|||
], |
|||
[ |
|||
'#de6262', |
|||
'#ffb88c', |
|||
], |
|||
[ |
|||
'#eb3349', |
|||
'#f45c43', |
|||
], |
|||
[ |
|||
'#dd5e89', |
|||
'#f7bb97', |
|||
], |
|||
[ |
|||
'#56ab2f', |
|||
'#a8e063', |
|||
], |
|||
[ |
|||
'#614385', |
|||
'#516395', |
|||
], |
|||
[ |
|||
'#eecda3', |
|||
'#ef629f', |
|||
], |
|||
[ |
|||
'#eacda3', |
|||
'#d6ae7b', |
|||
], |
|||
[ |
|||
'#02aab0', |
|||
'#00cdac', |
|||
], |
|||
[ |
|||
'#d66d75', |
|||
'#e29587', |
|||
], |
|||
[ |
|||
'#000428', |
|||
'#004e92', |
|||
], |
|||
[ |
|||
'#ddd6f3', |
|||
'#faaca8', |
|||
], |
|||
[ |
|||
'#7b4397', |
|||
'#dc2430', |
|||
], |
|||
[ |
|||
'#43cea2', |
|||
'#185a9d', |
|||
], |
|||
[ |
|||
'#ba5370', |
|||
'#f4e2d8', |
|||
], |
|||
[ |
|||
'#ff512f', |
|||
'#dd2476', |
|||
], |
|||
[ |
|||
'#4568dc', |
|||
'#b06ab3', |
|||
], |
|||
[ |
|||
'#ec6f66', |
|||
'#f3a183', |
|||
], |
|||
[ |
|||
'#ffd89b', |
|||
'#19547b', |
|||
], |
|||
[ |
|||
'#3a1c71', |
|||
'#d76d77', |
|||
], |
|||
[ |
|||
'#4ca1af', |
|||
'#c4e0e5', |
|||
], |
|||
[ |
|||
'#ff5f6d', |
|||
'#ffc371', |
|||
], |
|||
[ |
|||
'#36d1dc', |
|||
'#5b86e5', |
|||
], |
|||
[ |
|||
'#c33764', |
|||
'#1d2671', |
|||
], |
|||
[ |
|||
'#141e30', |
|||
'#243b55', |
|||
], |
|||
[ |
|||
'#ff7e5f', |
|||
'#feb47b', |
|||
], |
|||
[ |
|||
'#ed4264', |
|||
'#ffedbc', |
|||
], |
|||
[ |
|||
'#2b5876', |
|||
'#4e4376', |
|||
], |
|||
[ |
|||
'#ff9966', |
|||
'#ff5e62', |
|||
], |
|||
[ |
|||
'#aa076b', |
|||
'#61045f', |
|||
], |
|||
]; |
|||
|
|||
/* const lightGradients = [ |
|||
[ |
|||
'#ee9ca7', |
|||
'#ffdde1', |
|||
], |
|||
[ |
|||
'#2193b0', |
|||
'#6dd5ed', |
|||
], |
|||
]; */ |
|||
|
|||
function getRandomColor(colors = allColors) { |
|||
const index = Math.floor(Math.random() * colors.length); |
|||
const remainingColors = [...colors]; |
|||
remainingColors.splice(index, 1); |
|||
return { remainingColors, color: colors[index] || allColors[0] }; |
|||
} |
|||
|
|||
function getRandomColors(num) { |
|||
let colors = allColors; |
|||
const out = []; |
|||
for (let i = 0; i < Math.min(num, allColors.length); i += 1) { |
|||
const { remainingColors, color } = getRandomColor(colors); |
|||
out.push(color); |
|||
colors = remainingColors; |
|||
} |
|||
return out; |
|||
} |
|||
|
|||
function getRandomGradient() { |
|||
return gradientColors[Math.floor(Math.random() * gradientColors.length)]; |
|||
} |
|||
|
|||
module.exports = { |
|||
getRandomColors, |
|||
getRandomGradient, |
|||
}; |
|||
@ -0,0 +1,36 @@ |
|||
{ |
|||
// fast: true, |
|||
// width: 2166, height: 1650, fps: 30, |
|||
outPath: './out.mp4', |
|||
// outPath: './out.gif', |
|||
// verbose: true, |
|||
// enableFfmpegLog: true, |
|||
audioFilePath: './High [NCS Release] - JPB (No Copyright Music)-R8ZRCXy5vhA.m4a', |
|||
defaults: { |
|||
transition: { name: 'random' }, |
|||
layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' }, |
|||
}, |
|||
clips: [ |
|||
{ duration: 3, transition: { name: 'directional-left' }, layers: [{ type: 'title-background', text: 'EDITLY\nVideo editing framework', background: { type: 'linear-gradient', colors: ['#02aab0', '#00cdac'] } }] }, |
|||
{ duration: 4, transition: { name: 'dreamyzoom' }, layers: [{ type: 'title-background', text: 'Multi-line text with animated linear or radial gradients', background: { type: 'radial-gradient' } }] }, |
|||
{ duration: 3, transition: { name: 'directional-right' }, layers: [{ type: 'rainbow-colors' }, { type: 'title', text: 'Colorful backgrounds' }] }, |
|||
{ duration: 3, layers: [{ type: 'pause' }, { type: 'title', text: 'and separators' }] }, |
|||
|
|||
{ duration: 3, transition: { name: 'fadegrayscale' }, layers: [{ type: 'title-background', text: 'Image slideshows with Ken Burns effect', background: { type: 'linear-gradient' } }] }, |
|||
{ duration: 2.5, transition: { name: 'directionalWarp' }, layers: [{ type: 'image', path: './vertical.jpg', zoomDirection: 'out' }] }, |
|||
{ duration: 3, transition: { name: 'dreamyzoom' }, layers: [{ type: 'image', path: './img1.jpg', duration: 2.5, zoomDirection: 'in' }, { type: 'subtitle', text: 'Indonesia has many spectacular locations. Here is the volcano Kelimutu, which has three lakes in its core, some days with three different colors!' }, { type: 'title', position: 'top', text: 'With text' }] }, |
|||
{ duration: 3, transition: { name: 'colorphase' }, layers: [{ type: 'image', path: './img2.jpg', zoomDirection: 'out' }, { type: 'subtitle', text: 'Komodo national park is the only home of the endangered Komodo dragons' }] }, |
|||
{ duration: 2.5, transition: { name: 'simplezoom' }, layers: [{ type: 'image', path: './img3.jpg', zoomDirection: 'in' }] }, |
|||
|
|||
{ duration: 1.5, transition: { name: 'crosszoom', duration: 0.3 }, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0402.MOV', cutTo: 58 }, { type: 'title', text: 'Videos' }] }, |
|||
{ duration: 3, transition: { name: 'fade' }, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0402.MOV', cutFrom: 58 }] }, |
|||
{ transition: { name: 'fade' }, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0403.MOV', cutTo: 2.5 }] }, |
|||
{ duration: 1.5, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0401.MOV', cutFrom: 3, cutTo: 30 }] }, |
|||
|
|||
{ duration: 3, transition: { name: 'crosszoom' }, layers: [{ type: 'gl', fragmentPath: './shaders/3l23Rh.frag' }, { type: 'title', text: 'OpenGL\nshaders' }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/MdXyzX.frag' }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/30daysofshade_010.frag' }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/wd2yDm.frag', speed: 5 }] }, |
|||
{ duration: 3, layers: [{ type: 'editly-banner' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
const editly = require('..'); |
|||
|
|||
async function func({ width, height, canvas }) { |
|||
async function onRender(progress) { |
|||
const context = canvas.getContext('2d'); |
|||
const centerX = canvas.width / 2; |
|||
const centerY = canvas.height / 2; |
|||
const radius = 40 * (1 + progress * 0.5); |
|||
|
|||
context.beginPath(); |
|||
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); |
|||
context.fillStyle = 'hsl(350, 100%, 37%)'; |
|||
context.fill(); |
|||
context.lineWidth = 5; |
|||
context.strokeStyle = '#ffffff'; |
|||
context.stroke(); |
|||
} |
|||
|
|||
function onClose() { |
|||
// Cleanup if you initialized anything
|
|||
} |
|||
|
|||
return { onRender, onClose }; |
|||
} |
|||
|
|||
editly({ |
|||
fast: true, |
|||
outPath: './canvas.mp4', |
|||
clips: [ |
|||
{ duration: 2, layers: [{ type: 'canvas', func }] }, |
|||
], |
|||
}).catch(console.error); |
|||
@ -0,0 +1,35 @@ |
|||
const editly = require('..'); |
|||
|
|||
/* eslint-disable spaced-comment,no-param-reassign */ |
|||
|
|||
async function func({ width, height, fabric, canvas }) { |
|||
async function onRender(progress) { |
|||
canvas.backgroundColor = 'hsl(33, 100%, 50%)'; |
|||
|
|||
const text = new fabric.Text(`PROGRESS\n${Math.floor(progress * 100)}%`, { |
|||
originX: 'center', |
|||
originY: 'center', |
|||
left: width / 2, |
|||
top: (height / 2) * (1 + (progress * 0.1 - 0.05)), |
|||
fontSize: 20, |
|||
textAlign: 'center', |
|||
fill: 'white', |
|||
}); |
|||
|
|||
canvas.add(text); |
|||
} |
|||
|
|||
function onClose() { |
|||
// Cleanup if you initialized anything
|
|||
} |
|||
|
|||
return { onRender, onClose }; |
|||
} |
|||
|
|||
editly({ |
|||
fast: true, |
|||
outPath: './fabric.mp4', |
|||
clips: [ |
|||
{ duration: 2, layers: [{ type: 'fabric', func }] }, |
|||
], |
|||
}).catch(console.error); |
|||
@ -0,0 +1,16 @@ |
|||
{ |
|||
fast: true, |
|||
// verbose: true, |
|||
outPath: './gl.mp4', |
|||
defaults: { |
|||
transition: { name: 'random' }, |
|||
layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' }, |
|||
}, |
|||
clips: [ |
|||
{ transition: null, duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/3l23Rh.frag' }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/MdXyzX.frag' }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/30daysofshade_010.frag', speed: 1 }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/rainbow-background.frag' }] }, |
|||
{ duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/wd2yDm.frag', speed: 5 }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
fast: true, |
|||
outPath: './image.mp4', |
|||
clips: [ |
|||
{ layers: [{ type: 'image', path: './vertical.jpg', zoomDirection: 'out' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
{ |
|||
// fast: false, |
|||
outPath: './losslesscut.mp4', |
|||
// verbose: true, |
|||
// enableFfmpegLog: true, |
|||
fps: 30, |
|||
audioFilePath: './Believe - Roa [Vlog No Copyright Music]-qldyHxWPFUY.m4a', |
|||
defaults: { |
|||
transition: { name: 'crossZoom', duration: 1 }, |
|||
layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' }, |
|||
}, |
|||
clips: [ |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'LosslessCut', background: { type: 'linear-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/intro.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Capture full resolution screenshots', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/capture screenshots.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Extract tracks as individual files', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/extract tracks as individual files.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Keyframes and zoom', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/keyframes and zoom.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Label segments', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/label segments.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Lossless rotation', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/lossless rotation.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Thumbnails', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/thumbnails.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Audio waveforms', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/audio waveform.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Track information', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/track information.mov' }] }, |
|||
{ duration: 3, layers: [{ type: 'title-background', text: 'Tracks editor and audio swap', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: '/Users/mifi/Desktop/losslesscut-usage/tracks editor and replace audio.mov' }] }, |
|||
{ duration: 4, layers: [{ type: 'title-background', text: 'Get it from\nMac App Store\nWindows Store', background: { type: 'color', color: 'black' } }] }, |
|||
{ duration: 2, layers: [{ type: 'editly-banner' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
fast: true, |
|||
outPath: './resizeHorizontal.mp4', |
|||
defaults: { |
|||
transition: { duration: 0 }, |
|||
layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf', backgroundColor: 'white' }, |
|||
}, |
|||
clips: [ |
|||
{ layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0.4, cutTo: 2 }] }, |
|||
{ layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0.4, cutTo: 2, resizeMode: 'contain' }] }, |
|||
{ layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0.4, cutTo: 2, resizeMode: 'stretch' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
{ |
|||
width: 240, height: 320, fps: 15, |
|||
outPath: './resizeVertical.mp4', |
|||
defaults: { |
|||
transition: { duration: 0 }, |
|||
layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' }, |
|||
}, |
|||
clips: [ |
|||
{ duration: 2, layers: [{ type: 'title-background', text: 'Editly can handle all formats and sizes with different fits', background: { type: 'radial-gradient' } }] }, |
|||
{ layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 2, resizeMode: 'contain' }, { type: 'title-background', text: 'Contain' }] }, |
|||
{ layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 2, resizeMode: 'stretch' }, { type: 'title-background', text: 'Stretch' }] }, |
|||
{ layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 2 }, { type: 'title-background', text: 'Cover' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
{ |
|||
fast: true, |
|||
// verbose: true, |
|||
outPath: './speedTest.mp4', |
|||
defaults: { |
|||
transition: null, |
|||
layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' }, |
|||
}, |
|||
clips: [ |
|||
{ duration: 2, layers: [{ type: 'title-background', text: 'Speed up or slow down video', background: { type: 'radial-gradient' } }] }, |
|||
{ duration: 2, layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 2 }, { type: 'title-background', text: 'Same speed' }] }, |
|||
{ duration: 1, layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 4 }, { type: 'title-background', text: '4x' }] }, |
|||
{ duration: 2, layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 1 }, { type: 'title-background', text: '1/2x' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
fast: true, |
|||
outPath: './transitionEasing.mp4', |
|||
defaults: { |
|||
duration: 2, |
|||
}, |
|||
clips: [ |
|||
{ transition: { name: 'directional', duration: 0.5 }, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0402.MOV', cutTo: 2 }] }, |
|||
{ transition: { name: 'directional', duration: 0.5, params: { direction: [1, 0] } }, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0403.MOV', cutTo: 2 }] }, |
|||
// { transition: { name: 'directional', duration: 0.5, easing: null }, layers: [{ type: 'video', path: '/Users/mifi/Desktop/photos/drone koh lipe/DJI_0403.MOV', cutTo: 2 }] }, |
|||
{ layers: [{ type: 'pause' }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
// fast: true, |
|||
outPath: './transparentGradient.mp4', |
|||
clips: [ |
|||
{ duration: 0.1, layers: [{ type: 'fill-color', color: 'green' }, { type: 'linear-gradient', colors: ['#ffffffff', '#ffffff00'] }] }, |
|||
], |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
const GL = require('gl'); |
|||
const ndarray = require('ndarray'); |
|||
const createBuffer = require('gl-buffer'); |
|||
const transitions = require('gl-transitions'); |
|||
const createTransition = require('gl-transition').default; |
|||
const createTexture = require('gl-texture2d'); |
|||
|
|||
module.exports = ({ width, height, channels }) => { |
|||
const gl = GL(width, height); |
|||
|
|||
function runTransitionOnFrame({ fromFrame, toFrame, progress, transitionName, transitionParams = {} }) { |
|||
function convertFrame(buf) { |
|||
// @see https://github.com/stackgl/gl-texture2d/issues/16
|
|||
return ndarray(buf, [width, height, channels], [channels, width * channels, 1]); |
|||
} |
|||
|
|||
const buffer = createBuffer(gl, |
|||
[-1, -1, -1, 4, 4, -1], |
|||
gl.ARRAY_BUFFER, |
|||
gl.STATIC_DRAW); |
|||
|
|||
let transition; |
|||
|
|||
try { |
|||
const resizeMode = 'stretch'; |
|||
|
|||
const transitionSource = transitions.find((t) => t.name.toLowerCase() === transitionName.toLowerCase()); |
|||
|
|||
transition = createTransition(gl, transitionSource, { resizeMode }); |
|||
|
|||
gl.clear(gl.COLOR_BUFFER_BIT); |
|||
|
|||
// console.time('runTransitionOnFrame internal');
|
|||
const fromFrameNdArray = convertFrame(fromFrame); |
|||
const textureFrom = createTexture(gl, fromFrameNdArray); |
|||
textureFrom.minFilter = gl.LINEAR; |
|||
textureFrom.magFilter = gl.LINEAR; |
|||
|
|||
// console.timeLog('runTransitionOnFrame internal');
|
|||
const toFrameNdArray = convertFrame(toFrame); |
|||
const textureTo = createTexture(gl, toFrameNdArray); |
|||
textureTo.minFilter = gl.LINEAR; |
|||
textureTo.magFilter = gl.LINEAR; |
|||
|
|||
buffer.bind(); |
|||
transition.draw(progress, textureFrom, textureTo, gl.drawingBufferWidth, gl.drawingBufferHeight, transitionParams); |
|||
|
|||
textureFrom.dispose(); |
|||
textureTo.dispose(); |
|||
|
|||
// console.timeLog('runTransitionOnFrame internal');
|
|||
|
|||
const outArray = Buffer.allocUnsafe(width * height * 4); |
|||
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, outArray); |
|||
|
|||
// console.timeEnd('runTransitionOnFrame internal');
|
|||
|
|||
return outArray; |
|||
|
|||
// require('fs').writeFileSync(`${new Date().getTime()}.raw`, outArray);
|
|||
// Testing: ffmpeg -f rawvideo -vcodec rawvideo -pix_fmt rgba -s 2166x1650 -i 1586619627191.raw -vf format=yuv420p -vcodec libx264 -y out.mp4
|
|||
} finally { |
|||
buffer.dispose(); |
|||
if (transition) transition.dispose(); |
|||
} |
|||
} |
|||
|
|||
return { |
|||
runTransitionOnFrame, |
|||
}; |
|||
}; |
|||
@ -0,0 +1,388 @@ |
|||
const execa = require('execa'); |
|||
const assert = require('assert'); |
|||
const pMap = require('p-map'); |
|||
const { basename, join } = require('path'); |
|||
const flatMap = require('lodash/flatMap'); |
|||
const JSON5 = require('json5'); |
|||
|
|||
const { parseFps, readFileInfo, multipleOf2 } = require('./util'); |
|||
const { registerFont } = require('./sources/fabricFrameSource'); |
|||
const { createFrameSource } = require('./sources/frameSource'); |
|||
const { calcTransition } = require('./transitions'); |
|||
|
|||
const GlTransitions = require('./glTransitions'); |
|||
|
|||
// Cache
|
|||
const loadedFonts = []; |
|||
|
|||
|
|||
module.exports = async (config = {}) => { |
|||
const { |
|||
// Testing options:
|
|||
enableFfmpegLog = false, |
|||
verbose = false, |
|||
fast, |
|||
|
|||
outPath, |
|||
clips: clipsIn, |
|||
width: requestedWidth, |
|||
height: requestedHeight, |
|||
fps: requestedFps, |
|||
defaults: defaultsIn = {}, |
|||
audioFilePath: audioFilePathIn, |
|||
} = config; |
|||
|
|||
const isGif = outPath.toLowerCase().endsWith('.gif'); |
|||
|
|||
const audioFilePath = isGif ? undefined : audioFilePathIn; |
|||
|
|||
const defaults = { |
|||
duration: 4, |
|||
...defaultsIn, |
|||
transition: defaultsIn.transition === null ? null : { |
|||
duration: 0.5, |
|||
name: 'random', |
|||
...defaultsIn.transition, |
|||
}, |
|||
}; |
|||
|
|||
if (verbose) console.log(JSON5.stringify(config, null, 2)); |
|||
|
|||
assert(outPath, 'Please provide an output path'); |
|||
assert(clipsIn.length > 0, 'Please provide at least 1 clip'); |
|||
|
|||
async function handleLayer(layer) { |
|||
const { type, ...restLayer } = layer; |
|||
|
|||
if (['fabric', 'canvas'].includes(type)) assert(typeof layer.func === 'function', '"func" must be a function'); |
|||
|
|||
if (['image', 'fabric', 'canvas', 'gl', 'radial-gradient', 'linear-gradient', 'fill-color'].includes(type)) return layer; |
|||
|
|||
// TODO if random-background radial-gradient linear etc
|
|||
if (type === 'pause') return handleLayer({ ...restLayer, type: 'fill-color' }); |
|||
|
|||
if (type === 'rainbow-colors') return handleLayer({ type: 'gl', fragmentPath: join(__dirname, 'shaders/rainbow-colors.frag') }); |
|||
|
|||
if (type === 'editly-banner') { |
|||
const { fontPath } = layer; |
|||
return [ |
|||
await handleLayer({ type: 'linear-gradient' }), |
|||
await handleLayer({ fontPath, type: 'title', text: 'Made with\nEDITLY\nmifi.no' }), |
|||
]; |
|||
} |
|||
|
|||
// For convenience
|
|||
if (type === 'title-background') { |
|||
const { text, textColor, background, fontFamily, fontPath } = layer; |
|||
const outLayers = []; |
|||
if (background) { |
|||
if (background.type === 'radial-gradient') outLayers.push(await handleLayer({ type: 'radial-gradient', colors: background.colors })); |
|||
else if (background.type === 'linear-gradient') outLayers.push(await handleLayer({ type: 'linear-gradient', colors: background.colors })); |
|||
else if (background.color) outLayers.push(await handleLayer({ type: 'fill-color', color: background.color })); |
|||
} else { |
|||
const backgroundTypes = ['radial-gradient', 'linear-gradient', 'fill-color']; |
|||
const randomType = backgroundTypes[Math.floor(Math.random() * backgroundTypes.length)]; |
|||
outLayers.push(await handleLayer({ type: randomType })); |
|||
} |
|||
outLayers.push(await handleLayer({ type: 'title', fontFamily, fontPath, text, textColor })); |
|||
return outLayers; |
|||
} |
|||
|
|||
if (type === 'title' || type === 'subtitle') { |
|||
assert(layer.text, 'Please specify a text'); |
|||
|
|||
let { fontFamily } = layer; |
|||
const { fontPath, ...rest } = layer; |
|||
if (fontPath) { |
|||
fontFamily = Buffer.from(basename(fontPath)).toString('base64'); |
|||
if (!loadedFonts.includes(fontFamily)) { |
|||
registerFont(fontPath, { family: fontFamily, weight: 'regular', style: 'normal' }); |
|||
loadedFonts.push(fontFamily); |
|||
} |
|||
} |
|||
return { ...rest, fontFamily }; |
|||
} |
|||
|
|||
throw new Error(`Invalid layer type ${type}`); |
|||
} |
|||
|
|||
const clips = await pMap(clipsIn, async (clip, clipIndex) => { |
|||
const { transition: userTransition, duration: userDuration, layers } = { ...clip }; |
|||
|
|||
const videoLayers = layers.filter((layer) => layer.type === 'video'); |
|||
assert(videoLayers.length <= 1, 'Max 1 video per layer'); |
|||
|
|||
const userOrDefaultDuration = userDuration || defaults.duration; |
|||
if (videoLayers.length === 0) assert(userOrDefaultDuration, `Duration is required for clip ${clipIndex}`); |
|||
|
|||
let duration = userOrDefaultDuration; |
|||
|
|||
const layersOut = flatMap(await pMap(layers, async (layerIn) => { |
|||
const layer = { ...defaults.layer, ...layerIn }; |
|||
const { type } = layer; |
|||
|
|||
if (type === 'video') { |
|||
const { cutFrom: cutFromIn, cutTo: cutToIn, path } = layer; |
|||
const fileInfo = await readFileInfo(path); |
|||
const { duration: fileDuration, width, height, framerateStr } = fileInfo; |
|||
let cutFrom; |
|||
let cutTo; |
|||
let trimmedSourceDuration = fileDuration; |
|||
if (cutFromIn != null || cutToIn != null) { |
|||
cutFrom = Math.min(Math.max(0, cutFromIn || 0), fileDuration); |
|||
cutTo = Math.min(Math.max(cutFrom, cutToIn || fileDuration), fileDuration); |
|||
assert(cutFrom < cutTo, 'cutFrom must be lower than cutTo'); |
|||
|
|||
trimmedSourceDuration = cutTo - cutFrom; |
|||
} |
|||
|
|||
// If user specified duration, means that should be the output duration
|
|||
let framePtsFactor; |
|||
if (userDuration) { |
|||
duration = userDuration; |
|||
framePtsFactor = userDuration / trimmedSourceDuration; |
|||
} else { |
|||
duration = trimmedSourceDuration; |
|||
framePtsFactor = 1; |
|||
} |
|||
|
|||
return { ...layer, cutFrom, cutTo, width, height, framerateStr, framePtsFactor }; |
|||
} |
|||
|
|||
return handleLayer(layer); |
|||
}, { concurrency: 1 })); |
|||
|
|||
const transition = calcTransition(defaults, userTransition); |
|||
|
|||
return { |
|||
transition, |
|||
duration, |
|||
layers: layersOut, |
|||
}; |
|||
}, { concurrency: 1 }); |
|||
|
|||
if (verbose) console.log(JSON5.stringify(clips, null, 2)); |
|||
|
|||
// Try to detect parameters from first video
|
|||
let detectedWidth; |
|||
let detectedHeight; |
|||
let firstVideoFramerateStr; |
|||
|
|||
clips.find((clip) => clip && clip.layers.find((layer) => { |
|||
if (layer.type === 'video') { |
|||
detectedWidth = layer.width; |
|||
detectedHeight = layer.height; |
|||
firstVideoFramerateStr = layer.framerateStr; |
|||
|
|||
return true; |
|||
} |
|||
return false; |
|||
})); |
|||
|
|||
let width; |
|||
let height; |
|||
|
|||
let desiredWidth; |
|||
if (requestedWidth) desiredWidth = requestedWidth; |
|||
else if (fast) desiredWidth = 320; |
|||
else if (isGif) desiredWidth = 320; |
|||
else desiredWidth = 640; |
|||
|
|||
if (detectedWidth && detectedHeight) { |
|||
const calculatedHeight = Math.round((detectedHeight / detectedWidth) * desiredWidth); |
|||
height = isGif ? calculatedHeight : multipleOf2(calculatedHeight); // x264 requires multiple of 2
|
|||
width = desiredWidth; |
|||
} else { |
|||
// Cannot detect width/height from video, set defaults
|
|||
width = desiredWidth; |
|||
height = desiredWidth; |
|||
} |
|||
|
|||
// User override?
|
|||
if (requestedWidth && requestedHeight) { |
|||
width = requestedWidth; |
|||
height = requestedHeight; |
|||
} |
|||
|
|||
assert(width, 'Width not specified or detected'); |
|||
assert(height, 'Height not specified or detected'); |
|||
|
|||
let fps; |
|||
let framerateStr; |
|||
|
|||
if (requestedFps && typeof requestedFps === 'number') { |
|||
fps = requestedFps; |
|||
framerateStr = String(requestedFps); |
|||
} else if (fast) { |
|||
fps = 15; |
|||
framerateStr = String(fps); |
|||
} else if (isGif) { |
|||
fps = 10; |
|||
framerateStr = String(fps); |
|||
} else if (firstVideoFramerateStr) { |
|||
fps = parseFps(firstVideoFramerateStr); |
|||
framerateStr = firstVideoFramerateStr; |
|||
} else { |
|||
fps = 25; |
|||
framerateStr = String(fps); |
|||
} |
|||
|
|||
assert(fps, 'FPS not specified or detected'); |
|||
|
|||
console.log(`${width}x${height} ${fps}fps`); |
|||
|
|||
const channels = 4; |
|||
|
|||
const { runTransitionOnFrame } = GlTransitions({ width, height, channels }); |
|||
|
|||
function startFfmpegWriterProcess() { |
|||
// https://superuser.com/questions/556029/how-do-i-convert-a-video-to-gif-using-ffmpeg-with-reasonable-quality
|
|||
const outputArgs = isGif ? [ |
|||
'-vf', |
|||
`fps=${fps},scale=${width}:${height}:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse`, |
|||
'-loop', 0, |
|||
'-y', outPath, |
|||
] : [ |
|||
'-vf', 'format=yuv420p', |
|||
'-vcodec', 'libx264', |
|||
'-profile:v', 'high', |
|||
...(fast ? ['-preset:v', 'ultrafast'] : ['-preset:v', 'medium']), |
|||
'-crf', '18', |
|||
|
|||
'-movflags', 'faststart', |
|||
'-y', outPath, |
|||
]; |
|||
const args = [ |
|||
...(enableFfmpegLog ? [] : ['-hide_banner', '-loglevel', 'panic']), |
|||
|
|||
'-f', 'rawvideo', |
|||
'-vcodec', 'rawvideo', |
|||
'-pix_fmt', 'rgba', |
|||
'-s', `${width}x${height}`, |
|||
'-r', framerateStr, |
|||
'-i', '-', |
|||
|
|||
...(audioFilePath ? ['-i', audioFilePath, '-shortest'] : []), |
|||
...(audioFilePath ? ['-acodec', 'aac', '-b:a', '128k'] : []), |
|||
|
|||
...outputArgs, |
|||
]; |
|||
if (verbose) console.log('ffmpeg', args.join(' ')); |
|||
return execa('ffmpeg', args, { encoding: null, buffer: false, stdin: 'pipe', stdout: process.stdout, stderr: process.stderr }); |
|||
} |
|||
|
|||
let outProcess; |
|||
let frameSource1; |
|||
let frameSource2; |
|||
|
|||
try { |
|||
outProcess = startFfmpegWriterProcess(); |
|||
|
|||
let totalFrameCount = 0; |
|||
let fromClipFrameCount = 0; |
|||
let toClipFrameCount = 0; |
|||
|
|||
let transitionFromClipId = 0; |
|||
|
|||
const getTransitionToClipId = () => transitionFromClipId + 1; |
|||
const getTransitionFromClip = () => clips[transitionFromClipId]; |
|||
const getTransitionToClip = () => clips[getTransitionToClipId()]; |
|||
|
|||
const getSource = (clip, clipIndex) => createFrameSource({ clip, clipIndex, width, height, channels, verbose, enableFfmpegLog, framerateStr }); |
|||
|
|||
const getTransitionToSource = async () => (getTransitionToClip() && getSource(getTransitionToClip(), getTransitionToClipId())); |
|||
frameSource1 = await getSource(getTransitionFromClip(), transitionFromClipId); |
|||
frameSource2 = await getTransitionToSource(); |
|||
|
|||
// eslint-disable-next-line no-constant-condition
|
|||
while (true) { |
|||
const fromClipNumFrames = Math.round(getTransitionFromClip().duration * fps); |
|||
const toClipNumFrames = getTransitionToClip() && Math.round(getTransitionToClip().duration * fps); |
|||
const fromClipProgress = fromClipFrameCount / fromClipNumFrames; |
|||
const toClipProgress = getTransitionToClip() && toClipFrameCount / toClipNumFrames; |
|||
const frameData1 = await frameSource1.readNextFrame(fromClipProgress); |
|||
|
|||
const clipTransition = getTransitionFromClip().transition; |
|||
|
|||
const transitionNumFrames = Math.round((clipTransition.duration || 0) * fps); |
|||
|
|||
// Each clip has two transitions, make sure we leave enough room:
|
|||
const transitionNumFramesSafe = Math.floor(Math.min(Math.min(fromClipNumFrames, toClipNumFrames != null ? toClipNumFrames : Number.MAX_SAFE_INTEGER) / 2, transitionNumFrames)); |
|||
// How many frames into the transition are we? negative means not yet started
|
|||
const transitionFrameAt = fromClipFrameCount - (fromClipNumFrames - transitionNumFramesSafe); |
|||
|
|||
if (verbose) console.log('Frame', totalFrameCount, 'from', fromClipFrameCount, `(clip ${transitionFromClipId})`, 'to', toClipFrameCount, `(clip ${getTransitionToClipId()})`); |
|||
|
|||
if (!frameData1 || transitionFrameAt >= transitionNumFramesSafe - 1) { |
|||
// if (!frameData1 || transitionFrameAt >= transitionNumFramesSafe) {
|
|||
console.log('Done with transition, switching to next clip'); |
|||
transitionFromClipId += 1; |
|||
|
|||
if (!getTransitionFromClip()) { |
|||
console.log('No more transitionFromClip, done'); |
|||
break; |
|||
} |
|||
|
|||
// Cleanup old, swap and load next
|
|||
await frameSource1.close(); |
|||
frameSource1 = frameSource2; |
|||
frameSource2 = await getTransitionToSource(); |
|||
|
|||
fromClipFrameCount = transitionNumFramesSafe; |
|||
toClipFrameCount = 0; |
|||
} else { |
|||
let outFrameData; |
|||
if (frameSource2 && transitionFrameAt >= 0) { |
|||
if (verbose) console.log('Transition', 'frame', transitionFrameAt, '/', transitionNumFramesSafe, clipTransition.name, `${clipTransition.duration}s`); |
|||
|
|||
const frameData2 = await frameSource2.readNextFrame(toClipProgress); |
|||
toClipFrameCount += 1; |
|||
|
|||
if (frameData2) { |
|||
const progress = transitionFrameAt / transitionNumFramesSafe; |
|||
const easedProgress = clipTransition.easingFunction(progress); |
|||
|
|||
if (verbose) console.time('runTransitionOnFrame'); |
|||
outFrameData = runTransitionOnFrame({ fromFrame: frameData1, toFrame: frameData2, progress: easedProgress, transitionName: clipTransition.name, transitionParams: clipTransition.params }); |
|||
if (verbose) console.timeEnd('runTransitionOnFrame'); |
|||
} else { |
|||
console.warn('Got no frame data from clip 2!'); |
|||
// We have reached end of clip2 but transition is not complete
|
|||
// Pass thru
|
|||
// TODO improve, maybe cut it short
|
|||
outFrameData = frameData1; |
|||
} |
|||
} else { |
|||
outFrameData = frameData1; |
|||
} |
|||
|
|||
// If we don't await we get EINVAL when dealing with high resolution files (big writes)
|
|||
await new Promise((r) => outProcess.stdin.write(outFrameData, () => r())); |
|||
// outProcess.stdin.write(outFrameData);
|
|||
|
|||
fromClipFrameCount += 1; |
|||
} |
|||
|
|||
totalFrameCount += 1; |
|||
} |
|||
|
|||
outProcess.stdin.end(); |
|||
|
|||
console.log('Done. Output file can be found at:'); |
|||
console.log(outPath); |
|||
} catch (err) { |
|||
console.error('Loop failed', err); |
|||
if (outProcess) { |
|||
outProcess.kill(); |
|||
} |
|||
} finally { |
|||
if (frameSource1) await frameSource1.close(); |
|||
if (frameSource2) await frameSource2.close(); |
|||
} |
|||
|
|||
try { |
|||
await outProcess; |
|||
} catch (err) { |
|||
if (!err.killed) throw err; |
|||
} |
|||
}; |
|||
@ -0,0 +1,42 @@ |
|||
{ |
|||
"name": "editly", |
|||
"description": "Simple, sexy, declarative video editing", |
|||
"version": "0.1.0", |
|||
"main": "index.js", |
|||
"author": "Mikael Finstad <finstaden@gmail.com>", |
|||
"license": "MIT", |
|||
"dependencies": { |
|||
"canvas": "^2.6.1", |
|||
"execa": "^4.0.0", |
|||
"fabric": "^3.6.3", |
|||
"file-type": "^14.1.4", |
|||
"file-url": "^3.0.0", |
|||
"fs-extra": "^9.0.0", |
|||
"gl": "^4.5.0", |
|||
"gl-buffer": "^2.1.2", |
|||
"gl-shader": "^4.2.1", |
|||
"gl-texture2d": "^2.1.0", |
|||
"gl-transition": "^1.13.0", |
|||
"gl-transitions": "^1.43.0", |
|||
"json5": "^2.1.3", |
|||
"lodash": "^4.17.15", |
|||
"meow": "^6.1.0", |
|||
"ndarray": "^1.0.19", |
|||
"p-map": "^4.0.0" |
|||
}, |
|||
"scripts": { |
|||
"test": "exit 0" |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/mifi/editly.git" |
|||
}, |
|||
"bin": { |
|||
"editly": "cli.js" |
|||
}, |
|||
"devDependencies": { |
|||
"eslint": "^5.16.0 || ^6.8.0", |
|||
"eslint-config-airbnb-base": "^14.1.0", |
|||
"eslint-plugin-import": "^2.20.1" |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
#ifdef GL_ES |
|||
precision mediump float; |
|||
#endif |
|||
|
|||
uniform float time; |
|||
uniform vec2 resolution; |
|||
|
|||
void main() { |
|||
vec2 st = gl_FragCoord.xy/resolution.xy; |
|||
st.x *= resolution.x/resolution.y; |
|||
|
|||
vec3 color = vec3(0.); |
|||
color = vec3(st.x,st.y,abs(sin(time))); |
|||
|
|||
gl_FragColor = vec4(color,1.0); |
|||
} |
|||
@ -0,0 +1,331 @@ |
|||
const { fabric } = require('fabric'); |
|||
const fileUrl = require('file-url'); |
|||
const nodeCanvas = require('canvas'); |
|||
|
|||
const { createCanvas } = nodeCanvas; |
|||
|
|||
const { canvasToRgba } = require('./shared'); |
|||
const { getRandomGradient, getRandomColors } = require('../colors'); |
|||
const { easeOutExpo } = require('../transitions'); |
|||
|
|||
// http://fabricjs.com/kitchensink
|
|||
|
|||
|
|||
function fabricCanvasToRgba(canvas) { |
|||
// https://github.com/fabricjs/fabric.js/blob/26e1a5b55cbeeffb59845337ced3f3f91d533d7d/src/static_canvas.class.js
|
|||
// https://github.com/fabricjs/fabric.js/issues/3885
|
|||
const internalCanvas = fabric.util.getNodeCanvas(canvas.lowerCanvasEl); |
|||
const ctx = internalCanvas.getContext('2d'); |
|||
|
|||
// require('fs').writeFileSync(`${Math.floor(Math.random() * 1e12)}.png`, internalCanvas.toBuffer('image/png'));
|
|||
// throw new Error('abort');
|
|||
|
|||
return canvasToRgba(ctx); |
|||
} |
|||
|
|||
async function mergeFrames({ width, height, framesRaw }) { |
|||
if (framesRaw.length === 1) return framesRaw[0]; |
|||
|
|||
// Node canvas needs no cleanup https://github.com/Automattic/node-canvas/issues/1216#issuecomment-412390668
|
|||
const canvas = createCanvas(width, height); |
|||
const ctx = canvas.getContext('2d'); |
|||
|
|||
framesRaw.forEach((frameRaw) => { |
|||
const canvas2 = createCanvas(width, height); |
|||
const ctx2 = canvas2.getContext('2d'); |
|||
// https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData
|
|||
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
|
|||
ctx2.putImageData(new nodeCanvas.ImageData(Uint8ClampedArray.from(frameRaw), width, height), 0, 0); |
|||
// require('fs').writeFileSync(`${Math.floor(Math.random() * 1e12)}.png`, canvas2.toBuffer('image/png'));
|
|||
|
|||
ctx.drawImage(canvas2, 0, 0); |
|||
}); |
|||
|
|||
return canvasToRgba(ctx); |
|||
} |
|||
|
|||
async function createFabricFrameSource(func, { width, height, ...rest }) { |
|||
const onInit = async ({ canvas }) => func(({ width, height, fabric, canvas, ...rest })); |
|||
|
|||
let canvas = new fabric.StaticCanvas(null, { width, height }); |
|||
|
|||
const { onRender = () => {}, onClose = () => {} } = await onInit({ canvas }) || {}; |
|||
|
|||
async function readNextFrame(progress) { |
|||
await onRender(progress); |
|||
|
|||
canvas.renderAll(); |
|||
|
|||
const rgba = fabricCanvasToRgba(canvas); |
|||
|
|||
canvas.clear(); |
|||
// canvas.dispose();
|
|||
return rgba; |
|||
} |
|||
|
|||
return { |
|||
readNextFrame, |
|||
close: () => { |
|||
// https://stackoverflow.com/questions/19030174/how-to-manage-memory-in-case-of-multiple-fabric-js-canvas
|
|||
canvas.dispose(); |
|||
canvas = undefined; |
|||
onClose(); |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
async function imageFrameSource({ verbose, params, width, height, canvas }) { |
|||
if (verbose) console.log('Loading', params.path); |
|||
|
|||
const imgData = await new Promise((resolve) => fabric.util.loadImage(fileUrl(params.path), resolve)); |
|||
|
|||
const getImg = () => new fabric.Image(imgData, { |
|||
originX: 'center', |
|||
originY: 'center', |
|||
left: width / 2, |
|||
top: height / 2, |
|||
}); |
|||
|
|||
// Blurred version
|
|||
const blurredImg = getImg(); |
|||
blurredImg.filters = [new fabric.Image.filters.Resize({ scaleX: 0.01, scaleY: 0.01 })]; |
|||
blurredImg.applyFilters(); |
|||
|
|||
if (blurredImg.height > blurredImg.width) blurredImg.scaleToWidth(width); |
|||
else blurredImg.scaleToHeight(height); |
|||
|
|||
|
|||
async function onRender(progress) { |
|||
const { zoomDirection = 'in', zoomAmount = 0.1 } = params; |
|||
|
|||
const img = getImg(); |
|||
|
|||
const scaleFactor = zoomDirection === 'in' ? (1 + progress * zoomAmount) : (1 + zoomAmount * (1 - progress)); |
|||
if (img.height > img.width) img.scaleToHeight(height * scaleFactor); |
|||
else img.scaleToWidth(width * scaleFactor); |
|||
|
|||
canvas.add(blurredImg); |
|||
canvas.add(img); |
|||
} |
|||
|
|||
function onClose() { |
|||
blurredImg.dispose(); |
|||
// imgData.dispose();
|
|||
} |
|||
|
|||
return { onRender, onClose }; |
|||
} |
|||
|
|||
async function fillColorFrameSource({ canvas, params }) { |
|||
const { color } = params; |
|||
|
|||
const randomColor = getRandomColors(1)[0]; |
|||
|
|||
async function onRender() { |
|||
// eslint-disable-next-line no-param-reassign
|
|||
canvas.backgroundColor = color || randomColor; |
|||
} |
|||
|
|||
return { onRender }; |
|||
} |
|||
|
|||
function getRekt(width, height) { |
|||
// width and height with room to rotate
|
|||
return new fabric.Rect({ originX: 'center', originY: 'center', left: width / 2, top: height / 2, width: width * 2, height: height * 2 }); |
|||
} |
|||
|
|||
async function radialGradientFrameSource({ canvas, width, height, params }) { |
|||
const { colors: inColors } = params; |
|||
|
|||
const randomColors = getRandomGradient(); |
|||
|
|||
async function onRender(progress) { |
|||
// console.log('progress', progress);
|
|||
|
|||
const max = Math.max(width, height); |
|||
|
|||
const colors = inColors && inColors.length === 2 ? inColors : randomColors; |
|||
|
|||
const r1 = 0; |
|||
const r2 = max * (1 + progress) * 0.6; |
|||
|
|||
const rect = getRekt(width, height); |
|||
|
|||
const cx = 0.5 * rect.width; |
|||
const cy = 0.5 * rect.height; |
|||
|
|||
rect.setGradient('fill', { |
|||
type: 'radial', |
|||
r1, |
|||
r2, |
|||
x1: cx, |
|||
y1: cy, |
|||
x2: cx, |
|||
y2: cy, |
|||
colorStops: { |
|||
0: colors[0], |
|||
1: colors[1], |
|||
}, |
|||
}); |
|||
|
|||
canvas.add(rect); |
|||
} |
|||
|
|||
return { onRender }; |
|||
} |
|||
|
|||
async function linearGradientFrameSource({ canvas, width, height, params }) { |
|||
const { colors: inColors } = params; |
|||
|
|||
const randomColors = getRandomGradient(); |
|||
const colors = inColors && inColors.length === 2 ? inColors : randomColors; |
|||
|
|||
async function onRender(progress) { |
|||
const rect = getRekt(width, height); |
|||
|
|||
rect.setGradient('fill', { |
|||
x1: 0, |
|||
y1: 0, |
|||
x2: width, |
|||
y2: height, |
|||
colorStops: { |
|||
0: colors[0], |
|||
1: colors[1], |
|||
}, |
|||
}); |
|||
|
|||
rect.rotate(progress * 30); |
|||
canvas.add(rect); |
|||
} |
|||
|
|||
return { onRender }; |
|||
} |
|||
|
|||
async function subtitleFrameSource({ canvas, width, height, params }) { |
|||
const { text, textColor = '#ffffff', fontFamily = 'sans-serif' } = params; |
|||
|
|||
async function onRender(progress) { |
|||
const easedProgress = easeOutExpo(Math.min(progress, 1)); |
|||
|
|||
const min = Math.min(width, height); |
|||
const padding = 0.05 * min; |
|||
|
|||
const textBox = new fabric.Textbox(text, { |
|||
fill: textColor, |
|||
fontFamily, |
|||
|
|||
fontSize: min / 20, |
|||
textAlign: 'left', |
|||
width: width - padding * 2, |
|||
originX: 'center', |
|||
originY: 'bottom', |
|||
left: (width / 2) + (-1 + easedProgress) * padding, |
|||
top: height - padding, |
|||
opacity: easedProgress, |
|||
}); |
|||
|
|||
const rect = new fabric.Rect({ |
|||
left: 0, |
|||
width, |
|||
height: textBox.height + padding * 2, |
|||
top: height, |
|||
originY: 'bottom', |
|||
fill: 'rgba(0,0,0,0.2)', |
|||
opacity: easedProgress, |
|||
}); |
|||
|
|||
canvas.add(rect); |
|||
canvas.add(textBox); |
|||
} |
|||
|
|||
return { onRender }; |
|||
} |
|||
|
|||
async function titleFrameSource({ canvas, width, height, params }) { |
|||
const { text, textColor = '#ffffff', fontFamily = 'sans-serif', position = 'center' } = params; |
|||
|
|||
async function onRender(progress) { |
|||
// console.log('progress', progress);
|
|||
|
|||
const min = Math.min(width, height); |
|||
|
|||
const fontSize = Math.round(min * 0.1); |
|||
|
|||
const scale = (1 + progress * 0.2).toFixed(4); |
|||
|
|||
const textBox = new fabric.Textbox(text, { |
|||
fill: textColor, |
|||
fontFamily, |
|||
fontSize, |
|||
textAlign: 'center', |
|||
width: width * 0.8, |
|||
}); |
|||
|
|||
const textImage = await new Promise((r) => textBox.cloneAsImage(r)); |
|||
|
|||
let originY = 'center'; |
|||
let top = height / 2; |
|||
if (position === 'top') { |
|||
originY = 'top'; |
|||
top = height * 0.05; |
|||
} else if (position === 'bottom') { |
|||
originY = 'bottom'; |
|||
top = height; |
|||
} |
|||
|
|||
textImage.set({ |
|||
originX: 'center', |
|||
originY, |
|||
left: width / 2, |
|||
top, |
|||
scaleX: scale, |
|||
scaleY: scale, |
|||
}); |
|||
canvas.add(textImage); |
|||
} |
|||
|
|||
return { onRender }; |
|||
} |
|||
|
|||
async function createCustomCanvasFrameSource({ width, height, params }) { |
|||
const canvas = createCanvas(width, height); |
|||
const context = canvas.getContext('2d'); |
|||
|
|||
const { onClose, onRender } = await params.func(({ width, height, canvas })); |
|||
|
|||
async function readNextFrame(progress) { |
|||
context.clearRect(0, 0, canvas.width, canvas.height); |
|||
await onRender(progress); |
|||
// require('fs').writeFileSync(`${new Date().getTime()}.png`, canvas.toBuffer('image/png'));
|
|||
return canvasToRgba(context); |
|||
} |
|||
|
|||
return { |
|||
readNextFrame, |
|||
// Node canvas needs no cleanup https://github.com/Automattic/node-canvas/issues/1216#issuecomment-412390668
|
|||
close: onClose, |
|||
}; |
|||
} |
|||
|
|||
async function customFabricFrameSource({ canvas, width, height, params }) { |
|||
return params.func(({ width, height, fabric, canvas })); |
|||
} |
|||
|
|||
function registerFont(...args) { |
|||
fabric.nodeCanvas.registerFont(...args); |
|||
} |
|||
|
|||
module.exports = { |
|||
mergeFrames, |
|||
registerFont, |
|||
createFabricFrameSource, |
|||
createCustomCanvasFrameSource, |
|||
|
|||
customFabricFrameSource, |
|||
subtitleFrameSource, |
|||
titleFrameSource, |
|||
fillColorFrameSource, |
|||
radialGradientFrameSource, |
|||
linearGradientFrameSource, |
|||
imageFrameSource, |
|||
}; |
|||
@ -0,0 +1,61 @@ |
|||
const assert = require('assert'); |
|||
const pMap = require('p-map'); |
|||
|
|||
const { mergeFrames, customFabricFrameSource, createCustomCanvasFrameSource, titleFrameSource, subtitleFrameSource, imageFrameSource, linearGradientFrameSource, radialGradientFrameSource, fillColorFrameSource, createFabricFrameSource } = require('./fabricFrameSource'); |
|||
const createVideoFrameSource = require('./videoFrameSource'); |
|||
const { createGlFrameSource } = require('./glFrameSource'); |
|||
|
|||
|
|||
async function createFrameSource({ clip, clipIndex, width, height, channels, verbose, enableFfmpegLog, framerateStr }) { |
|||
const { layers, duration } = clip; |
|||
|
|||
const frameSources = await pMap(layers, async (layer, layerIndex) => { |
|||
const { type, ...params } = layer; |
|||
console.log('createFrameSource', type, 'clip', clipIndex, 'layer', layerIndex); |
|||
|
|||
const frameSourceFuncs = { |
|||
video: createVideoFrameSource, |
|||
gl: createGlFrameSource, |
|||
canvas: createCustomCanvasFrameSource, |
|||
fabric: async (opts) => createFabricFrameSource(customFabricFrameSource, opts), |
|||
image: async (opts) => createFabricFrameSource(imageFrameSource, opts), |
|||
title: async (opts) => createFabricFrameSource(titleFrameSource, opts), |
|||
subtitle: async (opts) => createFabricFrameSource(subtitleFrameSource, opts), |
|||
'linear-gradient': async (opts) => createFabricFrameSource(linearGradientFrameSource, opts), |
|||
'radial-gradient': async (opts) => createFabricFrameSource(radialGradientFrameSource, opts), |
|||
'fill-color': async (opts) => createFabricFrameSource(fillColorFrameSource, opts), |
|||
}; |
|||
assert(frameSourceFuncs[type], `Invalid type ${type}`); |
|||
|
|||
const createFrameSourceFunc = frameSourceFuncs[type]; |
|||
|
|||
return createFrameSourceFunc({ width, height, duration, channels, verbose, enableFfmpegLog, framerateStr, params }); |
|||
}, { concurrency: 1 }); |
|||
|
|||
async function readNextFrame(...args) { |
|||
const framesRaw = await pMap(frameSources, async (frameSource) => frameSource.readNextFrame(...args)); |
|||
// if (verbose) console.time('Merge frames');
|
|||
|
|||
const framesRawFiltered = framesRaw.filter((frameRaw) => { |
|||
if (frameRaw) return true; |
|||
console.warn('Frame source returned empty result'); |
|||
return false; |
|||
}); |
|||
const merged = mergeFrames({ width, height, framesRaw: framesRawFiltered }); |
|||
// if (verbose) console.timeEnd('Merge frames');
|
|||
return merged; |
|||
} |
|||
|
|||
async function close() { |
|||
await pMap(frameSources, async (frameSource) => frameSource.close()); |
|||
} |
|||
|
|||
return { |
|||
readNextFrame, |
|||
close, |
|||
}; |
|||
} |
|||
|
|||
module.exports = { |
|||
createFrameSource, |
|||
}; |
|||
@ -0,0 +1,65 @@ |
|||
const GL = require('gl'); |
|||
const createShader = require('gl-shader'); |
|||
const fs = require('fs-extra'); |
|||
|
|||
// I have no idea what I'm doing but it works ¯\_(ツ)_/¯
|
|||
|
|||
async function createGlFrameSource({ width, height, channels, params }) { |
|||
const gl = GL(width, height); |
|||
|
|||
const defaultVertexSrc = `
|
|||
attribute vec2 position; |
|||
void main(void) { |
|||
gl_Position = vec4(position, 0.0, 1.0 ); |
|||
} |
|||
`;
|
|||
const { vertexPath, fragmentPath, vertexSrc: vertexSrcIn, fragmentSrc: fragmentSrcIn, speed = 1 } = params; |
|||
|
|||
let fragmentSrc = fragmentSrcIn; |
|||
let vertexSrc = vertexSrcIn; |
|||
|
|||
if (fragmentPath) fragmentSrc = await fs.readFile(fragmentPath); |
|||
if (vertexPath) vertexSrc = await fs.readFile(vertexPath); |
|||
|
|||
if (!vertexSrc) vertexSrc = defaultVertexSrc; |
|||
|
|||
const shader = createShader(gl, vertexSrc, fragmentSrc); |
|||
const buffer = gl.createBuffer(); |
|||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
|||
// https://blog.mayflower.de/4584-Playing-around-with-pixel-shaders-in-WebGL.html
|
|||
|
|||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1]), gl.STATIC_DRAW); |
|||
|
|||
async function readNextFrame(progress) { |
|||
shader.bind(); |
|||
|
|||
shader.attributes.position.pointer(); |
|||
|
|||
shader.uniforms.resolution = [width, height]; |
|||
shader.uniforms.time = progress * speed; |
|||
|
|||
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); |
|||
|
|||
const upsideDownArray = Buffer.allocUnsafe(width * height * channels); |
|||
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, upsideDownArray); |
|||
const outArray = Buffer.allocUnsafe(width * height * channels); |
|||
|
|||
// Comes out upside down, flip it
|
|||
for (let i = 0; i < outArray.length; i += 4) { |
|||
outArray[i + 0] = upsideDownArray[outArray.length - i + 0]; |
|||
outArray[i + 1] = upsideDownArray[outArray.length - i + 1]; |
|||
outArray[i + 2] = upsideDownArray[outArray.length - i + 2]; |
|||
outArray[i + 3] = upsideDownArray[outArray.length - i + 3]; |
|||
} |
|||
return outArray; |
|||
} |
|||
|
|||
return { |
|||
readNextFrame, |
|||
close: () => {}, |
|||
}; |
|||
} |
|||
|
|||
module.exports = { |
|||
createGlFrameSource, |
|||
}; |
|||
@ -0,0 +1,21 @@ |
|||
function canvasToRgba(ctx) { |
|||
// const bgra = canvas.toBuffer('raw');
|
|||
|
|||
/* const rgba = Buffer.allocUnsafe(bgra.length); |
|||
for (let i = 0; i < bgra.length; i += 4) { |
|||
rgba[i + 0] = bgra[i + 2]; |
|||
rgba[i + 1] = bgra[i + 1]; |
|||
rgba[i + 2] = bgra[i + 0]; |
|||
rgba[i + 3] = bgra[i + 3]; |
|||
} */ |
|||
|
|||
// We cannot use toBuffer('raw') because it returns pre-multiplied alpha data (a different format)
|
|||
// https://gamedev.stackexchange.com/questions/138813/whats-the-difference-between-alpha-and-premulalpha
|
|||
// https://github.com/Automattic/node-canvas#image-pixel-formats-experimental
|
|||
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); |
|||
return Buffer.from(imageData.data); |
|||
} |
|||
|
|||
module.exports = { |
|||
canvasToRgba, |
|||
}; |
|||
@ -0,0 +1,124 @@ |
|||
const execa = require('execa'); |
|||
const assert = require('assert'); |
|||
|
|||
module.exports = async ({ width, height, channels, framerateStr, verbose, enableFfmpegLog, params }) => { |
|||
const targetSize = width * height * channels; |
|||
|
|||
// TODO assert that we have read the correct amount of frames
|
|||
|
|||
const { path, cutFrom, cutTo, resizeMode = 'cover', backgroundColor = '#000000', framePtsFactor } = params; |
|||
|
|||
const buf = Buffer.allocUnsafe(targetSize); |
|||
let length = 0; |
|||
// let inFrameCount = 0;
|
|||
|
|||
let ptsFilter = ''; |
|||
if (framePtsFactor !== 1) { |
|||
if (verbose) console.log('framePtsFactor', framePtsFactor); |
|||
ptsFilter = `setpts=${framePtsFactor}*PTS,`; |
|||
} |
|||
|
|||
let scaleFilter; |
|||
if (resizeMode === 'stretch') scaleFilter = `scale=${width}:${height}`; |
|||
// https://superuser.com/questions/891145/ffmpeg-upscale-and-letterbox-a-video/891478
|
|||
else if (resizeMode === 'contain') scaleFilter = `scale=(iw*sar)*min(${width}/(iw*sar)\\,${height}/ih):ih*min(${width}/(iw*sar)\\,${height}/ih), pad=${width}:${height}:(${width}-iw*min(${width}/iw\\,${height}/ih))/2:(${height}-ih*min(${width}/iw\\,${height}/ih))/2:${backgroundColor}`; |
|||
// Cover: https://unix.stackexchange.com/a/192123
|
|||
else scaleFilter = `scale=(iw*sar)*max(${width}/(iw*sar)\\,${height}/ih):ih*max(${width}/(iw*sar)\\,${height}/ih),crop=${width}:${height}`; |
|||
|
|||
// http://zulko.github.io/blog/2013/09/27/read-and-write-video-frames-in-python-using-ffmpeg/
|
|||
// Testing: ffmpeg -i 'vid.mov' -t 1 -vcodec rawvideo -pix_fmt rgba -f image2pipe - | ffmpeg -f rawvideo -vcodec rawvideo -pix_fmt rgba -s 2166x1650 -i - -vf format=yuv420p -vcodec libx264 -y out.mp4
|
|||
// https://trac.ffmpeg.org/wiki/ChangingFrameRate
|
|||
const args = [ |
|||
...(enableFfmpegLog ? [] : ['-hide_banner', '-loglevel', 'panic']), |
|||
...(cutFrom ? ['-ss', cutFrom] : []), |
|||
'-i', path, |
|||
...(cutTo ? ['-t', (cutTo - cutFrom) * framePtsFactor] : []), |
|||
'-vf', `${ptsFilter}fps=${framerateStr},${scaleFilter}`, |
|||
'-map', 'v:0', |
|||
'-vcodec', 'rawvideo', |
|||
'-pix_fmt', 'rgba', |
|||
'-f', 'image2pipe', |
|||
'-', |
|||
]; |
|||
if (verbose) console.log(args.join(' ')); |
|||
|
|||
const ps = execa('ffmpeg', args, { encoding: null, buffer: false, stdin: 'ignore', stdout: 'pipe', stderr: process.stderr }); |
|||
|
|||
const stream = ps.stdout; |
|||
|
|||
let timeout; |
|||
let ended = false; |
|||
|
|||
const readNextFrame = () => new Promise((resolve, reject) => { |
|||
if (ended) { |
|||
resolve(); |
|||
return; |
|||
} |
|||
// console.log('Reading new frame', path);
|
|||
|
|||
function onEnd() { |
|||
if (verbose) console.log(path, 'ffmpeg stream ended'); |
|||
ended = true; |
|||
resolve(); |
|||
} |
|||
|
|||
function handleChunk(chunk) { |
|||
// console.log('chunk', chunk.length);
|
|||
const nCopied = length + chunk.length > targetSize ? targetSize - length : chunk.length; |
|||
chunk.copy(buf, length, 0, nCopied); |
|||
length += nCopied; |
|||
|
|||
if (length > targetSize) console.error('OOPS! Overflow', length); |
|||
|
|||
if (length >= targetSize) { |
|||
// console.log('Finished reading frame', inFrameCount, path);
|
|||
const out = Buffer.from(buf); |
|||
|
|||
const restLength = chunk.length - nCopied; |
|||
if (restLength > 0) { |
|||
if (verbose) console.log('Left over data', nCopied, chunk.length, restLength); |
|||
chunk.slice(nCopied).copy(buf, 0); |
|||
length = restLength; |
|||
} else { |
|||
length = 0; |
|||
} |
|||
|
|||
// inFrameCount += 1;
|
|||
|
|||
clearTimeout(timeout); |
|||
stream.pause(); |
|||
stream.removeListener('data', handleChunk); |
|||
stream.removeListener('end', onEnd); |
|||
stream.removeListener('error', reject); |
|||
resolve(out); |
|||
} |
|||
} |
|||
|
|||
timeout = setTimeout(() => { |
|||
console.warn('Timeout on read video frame'); |
|||
stream.pause(); |
|||
stream.removeListener('data', handleChunk); |
|||
stream.removeListener('end', onEnd); |
|||
stream.removeListener('error', reject); |
|||
resolve(); |
|||
}, 10000); |
|||
|
|||
stream.on('data', handleChunk); |
|||
stream.on('end', onEnd); |
|||
stream.on('error', reject); |
|||
stream.resume(); |
|||
}).then((data) => { |
|||
if (data) assert(data.length === targetSize); |
|||
return data; |
|||
}); |
|||
|
|||
const close = () => { |
|||
console.log('Close', path); |
|||
ps.cancel(); |
|||
}; |
|||
|
|||
return { |
|||
readNextFrame, |
|||
close, |
|||
}; |
|||
}; |
|||
@ -0,0 +1,71 @@ |
|||
const assert = require('assert'); |
|||
|
|||
const randomTransitionsSet = ['fade', 'fadegrayscale', 'directionalwarp', 'crosswarp', 'dreamyzoom', 'burn', 'crosszoom', 'simplezoom', 'linearblur', 'directional-left', 'directional-right', 'directional-up', 'directional-down']; |
|||
|
|||
function getRandomTransition() { |
|||
return randomTransitionsSet[Math.floor(Math.random() * randomTransitionsSet.length)]; |
|||
} |
|||
|
|||
|
|||
// https://easings.net/
|
|||
|
|||
function easeOutExpo(x) { |
|||
return x === 1 ? 1 : 1 - (2 ** (-10 * x)); |
|||
} |
|||
|
|||
function easeInOutCubic(x) { |
|||
return x < 0.5 ? 4 * x * x * x : 1 - ((-2 * x + 2) ** 3) / 2; |
|||
} |
|||
|
|||
|
|||
function getTransitionEasingFunction(easing, transitionName) { |
|||
if (easing !== null) { |
|||
if (easing) return { easeOutExpo }[easing]; |
|||
if (transitionName === 'directional') return easeOutExpo; |
|||
} |
|||
return (progress) => progress; |
|||
} |
|||
|
|||
function calcTransition(defaults, transition) { |
|||
if (transition === null) return { duration: 0 }; |
|||
|
|||
let transitionOrDefault = { |
|||
name: (transition && transition.name) || (defaults.transition && defaults.transition.name), |
|||
duration: (transition && transition.duration != null) ? transition.duration : (defaults.transition && defaults.transition.duration), |
|||
params: (transition && transition.params) || (defaults.transition && defaults.transition.params), |
|||
easing: (transition && transition.easing !== undefined) ? transition.easing : (defaults.transition && defaults.transition.easing), |
|||
}; |
|||
|
|||
assert(!transitionOrDefault.duration || transitionOrDefault.name, 'Please specify transition name or set duration to 0'); |
|||
|
|||
if (transitionOrDefault.name === 'random') { |
|||
transitionOrDefault = { easing: transitionOrDefault.easing, name: getRandomTransition(), duration: 0.5 }; |
|||
} |
|||
|
|||
const getTransitionByAlias = () => { |
|||
const aliasedTransition = { |
|||
'directional-left': { name: 'directional', params: { direction: [1, 0] } }, |
|||
'directional-right': { name: 'directional', params: { direction: [-1, 0] } }, |
|||
'directional-down': { name: 'directional', params: { direction: [0, 1] } }, |
|||
'directional-up': { name: 'directional', params: { direction: [0, -1] } }, |
|||
}[transitionOrDefault.name]; |
|||
if (aliasedTransition) return { ...transitionOrDefault, ...aliasedTransition }; |
|||
return transitionOrDefault; |
|||
}; |
|||
|
|||
const outTransition = getTransitionByAlias(); |
|||
|
|||
return { |
|||
name: outTransition.name, |
|||
duration: outTransition.duration, |
|||
params: outTransition.params, |
|||
easingFunction: getTransitionEasingFunction(outTransition.easing, outTransition.name), |
|||
}; |
|||
} |
|||
|
|||
|
|||
module.exports = { |
|||
calcTransition, |
|||
easeInOutCubic, |
|||
easeOutExpo, |
|||
}; |
|||
@ -0,0 +1,34 @@ |
|||
const execa = require('execa'); |
|||
|
|||
function parseFps(fps) { |
|||
const match = typeof fps === 'string' && fps.match(/^([0-9]+)\/([0-9]+)$/); |
|||
if (match) { |
|||
const num = parseInt(match[1], 10); |
|||
const den = parseInt(match[2], 10); |
|||
if (den > 0) return num / den; |
|||
} |
|||
return undefined; |
|||
} |
|||
|
|||
async function readFileInfo(p) { |
|||
const { stdout } = await execa('ffprobe', [ |
|||
'-select_streams', 'v:0', '-show_entries', 'stream', '-of', 'json', p, |
|||
]); |
|||
const json = JSON.parse(stdout); |
|||
const stream = json.streams[0]; |
|||
return { |
|||
// numFrames: parseInt(stream.nb_frames, 10),
|
|||
duration: parseFloat(stream.duration, 10), |
|||
width: stream.width, // TODO coded_width?
|
|||
height: stream.height, |
|||
framerateStr: stream.r_frame_rate, |
|||
}; |
|||
} |
|||
|
|||
const multipleOf2 = (x) => (x + (x % 2)); |
|||
|
|||
module.exports = { |
|||
parseFps, |
|||
readFileInfo, |
|||
multipleOf2, |
|||
}; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue