如何在Flutter Web中从Uint8List获取视频缩略图?

bfhwhh0e  于 2023-10-22  发布在  Flutter
关注(0)|答案(2)|浏览(218)

我正在开发的应用程序允许用户创建像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]
3vpjnl9f

3vpjnl9f1#

1.看看这个软件包(也适用于网络):它的插件从视频文件或URL生成缩略图:get_thumbnail_video
1.使用为视频处理设计的外部服务或API,可以接受视频URL或视频文件作为输入并返回生成的缩略图。为了实现这一点,您的Flutter Web应用程序将向这些服务发出HTTP请求,然后它们将返回缩略图。
1.实现服务器端处理:为此,您可以使用Node.js,Python或任何后端框架。服务器可以处理视频缩略图生成,因为您可以更多地控制服务器端库,如FFmpeg或OpenCV。
1.利用JavaScript库:使用flutter web,您可以使用dart:js包与JavaScript通信。这打开了使用JavaScript库(如video.jsflv.js)来显示视频和提取缩略图的选项。这实质上意味着您正在创建Dart代码和JavaScript之间的连接,以处理更高级的视频相关任务。(你可以在这里找到更多:Render video thumbnails using HTML canvas
这只是使用JavaScript和HTML5canvas元素捕获视频帧作为缩略图的代码中的示例:

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

祝你好运!

hgtggwj0

hgtggwj02#

你可能会在你的flutter项目中使用video_thumbnail 0.2.5+1插件

final uint8list = await VideoThumbnail.thumbnailData(
 video: videofile.path,
 imageFormat: ImageFormat.JPEG,
 maxWidth: 128,
// specify the width of the thumbnail, let the height auto-scaled to keep the source aspect ratio
quality: 25,
);

);

相关问题