footage

Description:

footage

Use your Flutter knowledge to generate videos, animations and slideshows!
Automate your video production with server-side rendering.


Footage is still in early stage! Use it at your own risks, and API are subject to change.

Quickstart #
Install footage with pub.
dart pub global activate footage
copied to clipboard
Create a directory for your project, like my_video, and from this directory, run the footage init command.
mkdir my_video
cd my_video
footage init
copied to clipboard
This will initialize a flutter project, with footage default pre-configured template.
To start the preview mode, simply run the lib/main.dart like any regular Flutter app.
flutter run lib/main.dart -d macOS
copied to clipboard
Code your animations #
Composition #
The composition root object describes your video general properties.
Composition(
fps: 30,
duration: const Time.frames(90),
width: 1920,
height: 1080,
child: const MyScene(),
);
copied to clipboard
Current frame and configuration #
Any Composition descendant can then access the current frame and video properties through the context.video extension.
@override
Widget build(BuildContext context) {
final frame = context.video.currentFrame;
final fps = context.video.config.fps;
final videoWidth = context.video.config.width;
// ...
}
copied to clipboard
Sequence #
Sequences are small sections in finite time that make up your video clip. By using a sequence, you can time-shift the animations of your children.
Sequence(
name: 'Circle', // For preview editor
from: Time.frames(10),
duration: Time.frames(20),
child: Builder(
builder: (context) {
final frame = context.video.frame; // From 0 to 20 (since sequence starts at 10 and ends at 30)
// ...
},
),
);
copied to clipboard
Loop #
Repeats all children animations during the given duration.
Loop(
name: 'Repeated circles', // For preview editor
duration: Time.frames(20),
child: Builder(
builder: (context) {
final frame = context.video.frame; // From 0 to 20, every 20 frames
// ...
},
),
);
copied to clipboard
Render your video #
As png frames #
Form your project directory, run the
footage render
copied to clipboard
You will find the output frame images in your build/video/frames.

Under the hood, the rendering process uses flutter_test to render each frame as an individual image, thanks to golden tests. This allows rendering without the need to run the app.

As a video #

To render a video you first need to install ffmpeg command line tool.

Basic
Bring a -f format option to the render command.
They are simply shorcuts for ffmpeg commands :

webm : ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=<fps> build/video/out.webm

footage render -f webm
copied to clipboard
The resulting video is build/video/out.webm.
Advanced
Use the ffmpeg tool from your frame files.
footage render
ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=30 build/video/out.webm
copied to clipboard
Examples #
Basic

Hello Waves

Slidedeck

Roadmap #

❌ Asset management when rendering
❌ Asynchronous frame rendering
❌ More default ffmpeg video rendering options
❌ Embeddable player for Flutter apps
❌ Preview speed (x0.25, x0.5, x2)
❌ Slideshow preview mode for presentation
❌ More examples
❌ Website

Thanks #
Massive thanks to the Remotion project which inspired me a lot of concepts.