如何从 Flutter Web 中的 Uint8List 获取视频缩略图？

Question

我正在开发的应用程序允许用户创建带有文本、图像和视频的社交帖子，例如 Facebook。我正在研究 PWA 部分，但遇到了这个问题。为了从存储中选择视频，我需要创建要在 UI 中显示的视频缩略图。

我能够选择视频，Uint8List因为它在所有平台上都受支持，但我无法从中获取缩略图。我尝试了很多库，但都File用作输入。

有什么办法可以完成这件事吗？

我正在使用以下代码来获取视频文件的 Uint8List ...

使用的库：file_picker_cross

final filePicker = FilePickerCross(type: FileTypeCross.video);
await filePicker.pick();
final imageBytes = filePicker.toUint8List();
// TODO: get video thumbnail from [imageBytes]

Answer 1

1. 查看这个包（也适用于网络）：它的插件从视频文件或 URL 生成缩略图：get_thumbnail_video

2. 使用专为视频处理设计的外部服务或 API，它们可以接受视频 URL 或视频文件作为输入并返回生成的缩略图。为了实现这一点，您的 Flutter Web 应用程序将向这些服务发出 HTTP 请求，并且它们将返回缩略图。

3. 实施服务器端处理：为此，您可以使用 Node.js、Python 或任何后端框架。服务器可以处理视频缩略图生成，因为您可以更好地控制 FFmpeg 或 OpenCV 等服务器端库。

4. 利用 JavaScript 库：使用 flutter web，您可以使用dart:js包与 JavaScript 进行通信。video.js这提供了利用 JavaScript 库（例如或 ）来显示视频和提取缩略图的选项flv.js。这本质上意味着您正在 Dart 代码和 JavaScript 之间创建连接，以处理更高级的视频相关任务。（我想您可以在这里找到更多信息：使用 HTML canvas 渲染视频缩略图）

这只是使用 JavaScript 和元素捕获视频帧作为缩略图的代码示例HTML5 canvas：

import 'dart:html';
import 'dart:js' as js;

void captureThumbnail(VideoElement videoElement) {
  CanvasElement canvas = CanvasElement(width: videoElement.videoWidth, height: videoElement.videoHeight);
  var context = canvas.context2D;
  context.drawImage(videoElement, 0, 0);
  Blob thumbnailBlob = canvas.toBlob('image/jpeg', 0.7);
}
// then you can work with the thumbnailBlob

祝你好运！