{"id":16583839,"url":"https://github.com/aloisdeniel/footage","last_synced_at":"2025-03-16T21:30:24.200Z","repository":{"id":62458929,"uuid":"493565980","full_name":"aloisdeniel/footage","owner":"aloisdeniel","description":"Write videos in Flutter.","archived":false,"fork":false,"pushed_at":"2022-05-27T21:15:34.000Z","size":2744,"stargazers_count":154,"open_issues_count":2,"forks_count":16,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-02-27T13:41:09.888Z","etag":null,"topics":["flutter","video"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aloisdeniel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-18T08:00:48.000Z","updated_at":"2024-09-11T22:47:07.000Z","dependencies_parsed_at":"2022-11-02T00:45:18.624Z","dependency_job_id":null,"html_url":"https://github.com/aloisdeniel/footage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Ffootage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Ffootage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Ffootage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Ffootage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aloisdeniel","download_url":"https://codeload.github.com/aloisdeniel/footage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830922,"owners_count":20354850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","video"],"created_at":"2024-10-11T22:43:21.322Z","updated_at":"2025-03-16T21:30:23.755Z","avatar_url":"https://github.com/aloisdeniel.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo](doc/banner.png)\n\nUse your Flutter knowledge to generate videos, animations and slideshows!\n\nAutomate your video production with server-side rendering.\n\n![preview editor](doc/editor.png)\n\n\u003e Footage is still in early stage! Use it at your own risks, and APIs are subject to change.\n\n## Quickstart\n\nInstall `footage` with pub.\n\n```\ndart pub global activate footage\n```\n\nCreate a directory for your project, like `my_video`, and from this directory, run the footage `init` command.\n\n```bash\nmkdir my_video\ncd my_video\nfootage init\n```\n\nThis will initialize a flutter project, with footage default pre-configured template.\n\nTo start the preview mode, simply run the `lib/main.dart` like any regular Flutter app.\n\n```bash\nflutter run lib/main.dart -d macOS\n```\n\n## Code your animations\n\n### Composition\n\nThe composition root object describes your video general properties.\n\n```dart\nComposition(\n    fps: 30,\n    duration: const Time.frames(90),\n    width: 1920,\n    height: 1080,\n    child: const MyScene(),\n);\n```\n\n### Current frame and configuration\n\nAny `Composition` descendant can then access the current frame and video properties through the `context.video` extension.\n\n```dart\n@override\nWidget build(BuildContext context) {\n    final frame = context.video.currentFrame;\n    final fps = context.video.config.fps;\n    final videoWidth = context.video.config.width;\n    // ...\n}\n```\n\n### Sequence\n\nSequences 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.\n\n```dart\nSequence(\n    name: 'Circle', // For preview editor\n    from: Time.frames(10),\n    duration: Time.frames(20),\n    child: Builder(\n        builder: (context) {\n            final frame = context.video.frame; // From 0 to 20 (since sequence starts at 10 and ends at 30)\n            // ...\n        },\n    ),\n);\n```\n\n### Loop\n\nRepeats all children animations during the given duration.\n\n```dart\nLoop(\n    name: 'Repeated circles', // For preview editor\n    duration: Time.frames(20),\n    child: Builder(\n        builder: (context) {\n            final frame = context.video.frame; // From 0 to 20, every 20 frames\n            // ...\n        },\n    ),\n);\n```\n\n## Render your video\n\n### As png frames\n\nForm your project directory, run the \n\n```bash\nfootage render\n```\n\nYou will find the output frame images in your `build/video/frames`.\n\n\u003e 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.\n\n### As a video\n\n\u003e To render a video you first need to install [ffmpeg](https://ffmpeg.org/) command line tool.\n\n#### Basic\n\nBring a `-f` format option to the `render` command.\n\nThey are simply shorcuts for `ffmpeg` commands :\n\n* `webm` : `ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=\u003cfps\u003e build/video/out.webm`\n\n```bash\nfootage render -f webm\n```\n\nThe resulting video is `build/video/out.webm`.\n\n\n#### Advanced\n\nUse the `ffmpeg` tool from your frame files.\n\n```bash\nfootage render\nffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=30 build/video/out.webm\n```\n\n## Examples\n\n#### [Basic](example/lib/scenes/basic.dart)\n\n![screenshot](doc/basic.gif)\n\n#### [Hello Waves](example/lib/scenes/hello_waves.dart)\n\n![screenshot](doc/hello_waves.gif)\n\n#### [Slidedeck](example/lib/scenes/hello_waves.dart)\n\n![screenshot](doc/slidedeck.gif)\n\n## Roadmap\n\n- [ ] Asset management when rendering\n- [ ] Asynchronous frame rendering\n- [ ] More default ffmpeg video rendering options\n- [ ] Embeddable player for Flutter apps\n- [ ] Audio support\n- [ ] Preview speed (x0.25, x0.5, x2)\n- [ ] Slideshow preview mode for presentation\n- [ ] More examples\n- [ ] Website\n\n## Thanks \n\nMassive thanks to the [Remotion](https://www.remotion.dev/) project which inspired me a lot of concepts. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloisdeniel%2Ffootage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faloisdeniel%2Ffootage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloisdeniel%2Ffootage/lists"}