将 Flutter 动画直接渲染到视频中

Posted 2023-02-23

【中文标题】将 Flutter 动画直接渲染到视频中

【英文标题】：Render Flutter animation directly to video

【发布时间】：2019-02-15 21:00:14

【问题描述】：

考虑到 Flutter 使用自己的图形引擎，有没有办法，或者以逐帧的方式创建屏幕截图？

一个用例是这样可以更轻松地向观众展示。

例如，一位作者想要创建一个 Flutter 动画教程，他们在其中构建一个演示应用程序并撰写一篇配套的博客文章，使用 Flutter 直接渲染的动画 GIF/视频。

另一个例子是 UI 团队之外的一位开发人员发现一个复杂的动画中存在微小的错误。无需真正学习动画代码，他们就可以将动画渲染成视频，并使用注释编辑该短片，然后将其发送给 UI 团队进行诊断。

【问题讨论】：

对于第二种情况，这可能会有所帮助：timeDilation，更多 here

为什么不直接从模拟器甚至真机录制视频？

@John 你找到解决方案了吗？

【参考方案1】：

我使用 Erik 的答案作为我自己实施的起点，并希望添加到他的原始答案中。

将所有png图像保存到目标位置后，我使用Flutter的ffmpeg包创建了所有图像的视频。由于花了一段时间才找到合适的设置来创建一个也可以由 QuickTime Player 播放的视频，所以我想与您分享：

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

如果您使用的是libx264，请确保遵循flutter_ffmpeg 软件包的说明：您必须使用full-gpl 版本，其中包括x264 库。

根据动画的长度、所需的帧速率、像素比和设备的内存，在写入文件之前保存所有帧可能会导致内存问题。因此，根据您的使用情况，您可能希望暂停/恢复动画并分批写入文件，以免超出可用内存的风险。

【参考方案2】：

它并不漂亮，但我已经设法让原型工作了。 首先，所有动画都需要由一个主动画控制器提供支持，以便我们可以单步执行我们想要的动画的任何部分。其次，我们要记录的小部件树必须用全局键包裹在 RepaintBoundary 中。 RepaintBoundary 及其键可以生成小部件树的快照，如下所示：

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;
  

然后可以在循环中使用上述方法，该循环将小部件树捕获到 pngBytes 中，并通过您想要的帧速率指定的 deltaT 将动画控制器向前步进：

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）

List<Future<File>> fileWriterFutures = [];

frames.forEach((key, value) 
  fileWriterFutures.add(_writeFile(bytes: value, location: r"D:\path\to\my\images\folder\" + "frame_$key.png"));
);

await Future.wait(fileWriterFutures);

_runFFmpeg();

这是我的文件编写器帮助功能：

Future<File> _writeFile(@required String location, @required Uint8List bytes) async 
  File file = File(location);
  return file.writeAsBytes(bytes);

这是我的 FFmpeg runner 函数：

void _runFFmpeg() async 
  // ffmpeg -y -r 60 -start_number 1 -i frame_%d.png -c:v libx264 -preset medium -tune animation -pix_fmt yuv420p test.mp4
  var process = await Process.start(
      "ffmpeg",
      [
        "-y", // replace output file if it already exists
        "-r", "60", // framrate
        "-start_number", "1",
        "-i", r"./test/frame_%d.png", // <- Change to location of images
        "-an", // don't expect audio
        "-c:v", "libx264rgb", // H.264 encoding
        "-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",
        r"./test/test.mp4" // <- Change to location of output
      ],
      mode: ProcessStartMode.inheritStdio // This mode causes some issues at times, so just remove it if it doesn't work. I use it mostly to debug the ffmpeg process' output
   );

  print("Done Rendering");

【讨论】：

我可以了解一下fileWriterFutures 是如何定义的吗？

@PurvikRana 这只是Future<File>、List<Future<File>> fileWriterFutures = []; 的列表。我认为List<Future<void>> fileWriterFutures = []; 也可以。

好的。让我试试这个。