Flutter视频帧提取插件video_frame_extractor的使用

Flutter视频帧提取插件video_frame_extractor的使用

Video Frame Extractor 可以从视频文件或视频网络URL中提取帧。

示例

示例

await VideoFrameExtractor.fromNetwork(
  videoUrl: 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
  imagesCount: 4,
  destinationDirectoryPath: '/storage/emulated/0/Download',
  onProgress: (progress) {},
);

完整示例代码

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:video_frame_extractor/video_frame_extractor.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Video Frame Extractor'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> frames = [];
  bool isLoading = false;
  TextEditingController textEditingController = TextEditingController(
    text: 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              controller: textEditingController,
            ),
            Expanded(
              child: isLoading
                  ? const Center(child: CircularProgressIndicator())
                  : frames.isEmpty
                      ? const SizedBox.shrink()
                      : ListView.separated(
                          shrinkWrap: true,
                          itemBuilder: (context, index) => Image.file(
                            File(frames[index]),
                            fit: BoxFit.fill,
                          ),
                          separatorBuilder: (context, index) => const SizedBox(height: 10),
                          itemCount: frames.length,
                        ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _generateFrames,
        tooltip: '生成帧',
        child: const Icon(Icons.arrow_forward_ios),
      ),
    );
  }

  Future<void> _generateFrames() async {
    setState(() {
      isLoading = true;
    });
    frames = await VideoFrameExtractor.fromNetwork(
      videoUrl: textEditingController.text,
      imagesCount: 4,
      destinationDirectoryPath: '/storage/emulated/0/Download',
      onProgress: (progress) {},
    );
    setState(() {
      isLoading = false;
    });
  }
}

更多关于Flutter视频帧提取插件video_frame_extractor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter视频帧提取插件video_frame_extractor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用video_frame_extractor插件来提取视频帧的示例代码。这个插件允许你从一个视频文件中提取帧并作为图像保存或处理。

首先，确保你已经在你的pubspec.yaml文件中添加了video_frame_extractor依赖：

dependencies:
  flutter:
    sdk: flutter
  video_frame_extractor: ^最新版本号  # 请替换为当前最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以使用以下代码来提取视频帧：

import 'package:flutter/material.dart';
import 'package:video_frame_extractor/video_frame_extractor.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoFrameExtractorDemo(),
    );
  }
}

class VideoFrameExtractorDemo extends StatefulWidget {
  @override
  _VideoFrameExtractorDemoState createState() => _VideoFrameExtractorDemoState();
}

class _VideoFrameExtractorDemoState extends State<VideoFrameExtractorDemo> {
  String _result = "";

  void _extractFrames() async {
    // 视频文件路径
    String videoPath = "path/to/your/video.mp4";

    // 创建VideoFrameExtractor实例
    final VideoFrameExtractor extractor = VideoFrameExtractor();

    // 提取帧并保存为图像文件
    try {
      List<File> frameFiles = await extractor.extractFrames(
        videoPath: videoPath,
        // 可选参数：设置提取的起始和结束时间（单位：毫秒）
        startTime: 0,
        endTime: 10000,  // 例如，提取前10秒的视频帧
        // 可选参数：设置每秒提取的帧数
        fps: 1,
        // 可选参数：设置输出图像的保存路径
        outputDirectory: Directory("path/to/save/frames").path,
      );

      // 输出提取的帧文件路径
      setState(() {
        _result = "Frames extracted to:\n" + frameFiles.join("\n");
      });
    } catch (e) {
      // 处理错误
      setState(() {
        _result = "Error: " + e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Video Frame Extractor Demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("Result:", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            Text(_result, style: TextStyle(fontSize: 16)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _extractFrames,
              child: Text("Extract Frames"),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个Flutter应用，其中包含一个按钮用于触发视频帧提取操作。
  2. 当你点击按钮时，_extractFrames函数会被调用。
  3. VideoFrameExtractor实例被创建，并使用extractFrames方法从指定路径的视频文件中提取帧。
  4. 提取的帧被保存到你指定的目录中，并输出帧文件的路径。

请注意：

  • 你需要替换videoPath和outputDirectory的值为实际的文件路径。
  • 确保你的应用有读写存储的权限（特别是在Android和iOS上）。
  • 提取帧是一个耗时的操作，所以你可能需要在UI上做一些优化，比如使用FutureBuilder或async/await来处理异步操作，以避免阻塞UI线程。

这个示例提供了一个基本的使用video_frame_extractor插件来提取视频帧的方法，你可以根据需要进行扩展和修改。

回到顶部