将文本和图像从 Flutter 应用程序叠加到 YouTube 直播流

Question

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

我想这涉及使用堆栈小部件将内容叠加在用户的视频源之上。但是，这需要以某种方式编码到要发送到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 的颤振包，允许我们在颤振上提供这些功能。 https://pub.dev/packages/flutter_ffmpeg

Answer 2

TLDR：您可以使用 CameraController (Camera 软件包( 和 Canvas in Flutter 来绘制文本。不幸的是，CameraController.startImageStream 没有记录在 API 文档中，并且是一个 1 年 + GitHub 的问题。

---

每次相机插件为您提供视频帧controller.startImageStream((CameraImage img) { /* your code */}时，您都可以将图像绘制到画布上，绘制文本，捕获视频并调用YouTube API。您可以在此处查看在 Tensorflow Lite 包中使用视频缓冲区的示例，或阅读此问题的更多信息。

在同一块画布上，您可以绘制任何您想要的内容，例如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());
}

我

---

打算添加一个指向我制作的应用程序的链接，该应用程序允许您将绘图绘制并截图到手机图库中(但也使用 Tensorflow Lite(，但代码有点复杂。最好克隆它，看看如果你正在努力捕捉画布，它会做什么。

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