Future<Uint8List> _capturePngToUint8List() async {
// renderBoxKey is the global key of my RepaintBoundary
RenderRepaintBoundary boundary = renderBoxKey.currentContext.findRenderObject();
// pixelratio allows you to render it at a higher resolution than the actual widget in the application.
ui.Image image = await boundary.toImage(pixelRatio: 2.0);
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
return pngBytes;
}
double t = 0;
int i = 1;
setState(() {
animationController.value = 0.0;
});
Map<int, Uint8List> frames = {};
double dt = (1 / 60) / animationController.duration.inSeconds.toDouble();
while (t <= 1.0) {
print("Rendering... ${t * 100}%");
var bytes = await _capturePngToUint8List();
frames[i] = bytes;
t += dt;
setState(() {
animationController.value = t;
});
i++;
}
最后,所有这些png帧都可以通过管道传输到ffmpeg子进程中以写入视频。我还没有设法让这部分工作得很好(* 更新 *:向下滚动查看此问题的解决方案),因此我所做的是将所有png帧写入实际的png文件,然后在写入它们的文件夹中手动运行ffmpeg。(注意:我使用flutter desktop来访问我安装的ffmpeg,但是有a package on pub.dev to get ffmpeg on mobile too)
final FlutterFFmpeg _flutterFFmpeg =
new FlutterFFmpeg(); // Create new ffmpeg instance somewhere in your code
// Function to create the video. All png files must be available in your target location prior to calling this function.
Future<String> _createVideoFromPngFiles(String location, int framerate) async {
final dateAsString = DateFormat('ddMMyyyy_hhmmss').format(DateTime.now());
final filePath =
"$location/video_$dateAsString.mov"; // had to use mov to be able to play the video on QuickTime
var arguments = [
"-y", // Replace output file if it already exists
"-r", "$framerate", // Your target framerate
"-start_number", "1",
"-i",
"$location/frame_%d.png", // The location where you saved all your png files
"-an", // Don't expect audio
"-c:v",
"libx264", // H.264 encoding, make sure to use the full-gpl ffmpeg package version
"-preset", "medium",
"-crf",
"10", // Ranges 0-51 indicates lossless compression to worst compression. Sane options are 0-30
"-tune", "animation",
"-preset", "medium",
"-pix_fmt",
"yuv420p", // Set the pixel format to make it compatible for QuickTime
"-vf",
"pad=ceil(iw/2)*2:ceil(ih/2)*2", // Make sure that height and width are divisible by 2
filePath
];
final result = await _flutterFFmpeg.executeWithArguments(arguments);
return result == 0
? filePath
: ''; // Result == 0 indicates that video creation was successful
}
3条答案
按热度按时间h7wcgrx31#
这并不漂亮,但我已经设法让一个原型工作。首先,所有的动画都需要一个主动画控制器,以便我们可以通过步进到任何部分的动画,我们想要的。其次,我们要记录的小部件树必须 Package 在一个
RepaintBoundary
与一个全局键。RepaintBoundary和它的键可以产生快照的小部件树如下:然后,可以在一个循环中使用上述方法,该循环将小部件树捕获到pngBytes中,并将animationController向前移动一个deltaT,该deltaT由您想要的帧率指定,如下所示:
最后,所有这些png帧都可以通过管道传输到ffmpeg子进程中以写入视频。我还没有设法让这部分工作得很好(* 更新 *:向下滚动查看此问题的解决方案),因此我所做的是将所有png帧写入实际的png文件,然后在写入它们的文件夹中手动运行ffmpeg。(注意:我使用flutter desktop来访问我安装的ffmpeg,但是有a package on pub.dev to get ffmpeg on mobile too)
下面是我的文件编写器帮助函数:
这是我的FFmpeg runner函数:
更新:
自从这个答案发布后,我已经知道了如何将图像直接传输到ffmpeg,而不需要先写出所有的文件。下面是我从我的一个小部件中更新的render函数。一些变量存在于小部件的上下文中,但我希望它们的值可以从上下文中推断出来:
wfveoks02#
我使用Erik的答案作为我自己实现的起点,并希望对他的原始答案进行补充。
在将所有的png图像保存到目标位置之后,我使用了Flutter的ffmpeg包来创建所有图像的视频。由于花了一段时间才找到合适的设置来创建一个也可以由QuickTime Player播放的视频,所以我想与您分享它们:
如果您使用的是
libx264
,请确保遵循flutter_ffmpeg软件包的说明:您必须使用full-gpl
版本,该版本包含x264库。根据动画的长度、所需的帧速率、像素比率和设备内存,在写入文件之前保存所有帧可能会导致内存问题。因此,根据您的使用情况,您可能需要暂停/恢复动画并分多批写入文件,以免超出可用内存。
eivnm1vs3#
更新2023
我现在已经开发了一个高级的render package,它极大地优化了重画边界捕捉的方法和@Erik W.
使用
Render
小部件 Package 小部件:然后用控制器捕捉运动: