将文本和图像叠加到来自Flutter应用程序的YouTube实时流

Question

我正在考虑创建一个Flutter移动应用程序，使用YouTube Live Streaming API将流直播到YouTube。我检查了API，发现它不提供将文本和图像覆盖到实况流上的方法。我如何使用Flutter来实现这一点？

我想这涉及到使用Stack小部件在用户的视频提要上覆盖内容。但是，这可能需要以某种方式编码到要发送到YouTube的视频流中。

Answer 1

这种类型的工作通常是使用FFmpeg完成的。有关更多信息，请参阅此讨论：https://video.stackexchange.com/questions/12105/add-an-image-overlay-in-front-of-video-using-ffmpeg

用于移动设备的FFmpeg由以下项目提供：https://github.com/tanersener/mobile-ffmpeg

然后，像往常一样，我们有一个名为flutter_ffmpeg的flutter包，允许我们在flutter https://pub.dev/packages/flutter_ffmpeg上使用这些功能

Answer 2

TLDR:你可以在Flutter中使用CameraController (相机包)和Canvas来绘制文本。不幸的是，API docs中没有记录CameraController.startImageStream，它是一个1 year+的GitHub issue。

每次摄像头插件给你一个视频帧controller.startImageStream((CameraImage img) { /* your code */}，你就可以将图像绘制到画布上，绘制文本，捕获视频，并调用YouTube接口。您可以在此issue上查看Tensorflow Lite包here中使用视频缓冲区的示例或阅读更多信息。

在相同的画布上，您可以绘制任何您想要的内容，如drawArc、drawParagraph、drawPoints。它为您提供了终极的灵活性。

下面是捕获画布内容的一个简单示例，我之前在状态中保存了笔划。(您应该使用有关文本的详细信息，并从相机中提取最新的帧。)：

Future<img.Image> getDrawnImage() async {
  ui.PictureRecorder recorder = ui.PictureRecorder();
  Canvas canvas = Canvas(recorder);
  canvas.drawColor(Colors.white, BlendMode.src);
  StrokesPainter painter = StrokesPainter(
      strokes: InheritedStrokesHistory.of(context).strokes);
  painter.paint(canvas, deviceData.size);
  ui.Image screenImage = await (recorder.endRecording().toImage(
      deviceData.size.width.floor(), deviceData.size.height.floor()));

  ByteData imgBytes =
      await screenImage.toByteData(format: ui.ImageByteFormat.rawRgba);
  return img.Image.fromBytes(deviceData.size.width.floor(),
      deviceData.size.height.floor(), imgBytes.buffer.asUint8List());
}

我打算添加一个链接到我制作的一个app，它允许您在手机图库中绘制和截图(但也使用Tensorflow Lite)，但代码有点复杂。最好的方法可能是克隆它，看看如果您在捕获画布时遇到困难，它会做什么。

我最初找不到startImageStream上的文档，忘记了我曾在Tensorflow Lite上使用过它，并建议使用MethodChannel.invokeMethod并编写特定于iOS/ Android的代码。如果你在Flutter中发现了任何限制，请记住这一点，尽管我不认为Flutter会在这个问题上限制你。