Flutter视频帧导出插件export_video_frame的使用

export_video_frame是一个用于iOS和Android平台从视频文件中导出图片的Flutter插件。本文将介绍如何安装、配置以及使用这个插件，并提供一个完整的示例Demo。

安装

首先，在你的pubspec.yaml文件中添加export_video_frame作为依赖项：

dependencies:
  export_video_frame: ^latest_version

请确保将^latest_version替换为实际的最新版本号。

使用

导入包

在开始之前，你需要导入必要的包：

import 'package:export_video_frame/export_video_frame.dart';
import 'package:image_picker/image_picker.dart';

示例代码

下面是一个完整的示例Demo，展示了如何使用export_video_frame来导出视频帧并显示在UI上。

import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:export_video_frame/export_video_frame.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Plugin Example App",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(images: <Image>[]),
    );
  }
}

class ImageItem extends StatelessWidget {
  ImageItem({required this.image}) : super(key: ObjectKey(image));
  final Image image;

  @override
  Widget build(BuildContext context) {
    return Container(child: image);
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.images}) : super(key: key);

  final List<Image> images;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _isClean = false;
  final ImagePicker _picker = ImagePicker();
  Stream<File>? _imagesStream;

  Future _getImagesByTime() async {
    final PickedFile? file = await _picker.getVideo(
        source: ImageSource.gallery, maxDuration: const Duration(seconds: 10));
    _imagesStream = ExportVideoFrame.exportImagesFromFile(
      File(file!.path),
      const Duration(milliseconds: 500),
      pi / 2,
    );

    setState(() {
      _isClean = true;
    });

    _imagesStream!.listen((image) {
      setState(() {
        widget.images.add(Image.file(image));
      });
    });
  }

  Future _getImages() async {
    final PickedFile? file = await _picker.getVideo(
        source: ImageSource.gallery, maxDuration: const Duration(seconds: 10));
    var images = await ExportVideoFrame.exportImage(file!.path, 10, 0);
    var result = images.map((file) => Image.file(file)).toList();
    setState(() {
      widget.images.addAll(result);
      _isClean = true;
    });
  }

  Future _getGifImages() async {
    final PickedFile? file =
        await _picker.getImage(source: ImageSource.gallery);

    var images = await ExportVideoFrame.exportGifImage(file!.path, 0);
    var result = images.map((file) => Image.file(file)).toList();
    setState(() {
      widget.images.addAll(result);
      _isClean = true;
    });
  }

  Future _getImagesByDuration() async {
    final PickedFile? pickedFile =
        await _picker.getImage(source: ImageSource.gallery);
    final File file = File(pickedFile!.path);
    var duration = Duration(seconds: 1);
    var image =
        await ExportVideoFrame.exportImageBySeconds(file, duration, pi / 2);
    setState(() {
      widget.images.add(Image.file(image));
      _isClean = true;
    });
    await ExportVideoFrame.saveImage(image, "Video Export Demo",
        waterMark: "images/water_mark.png",
        alignment: Alignment.bottomLeft,
        scale: 2.0);
  }

  Future _cleanCache() async {
    var result = await ExportVideoFrame.cleanImageCache();
    print(result);
    setState(() {
      widget.images.clear();
      _isClean = false;
    });
  }

  Future _handleClickFirst() async {
    if (_isClean) {
      await _cleanCache();
    } else {
      await _getImages();
    }
  }

  Future _handleClickSecond() async {
    if (_isClean) {
      await _cleanCache();
    } else {
      await _getImagesByDuration();
    }
  }

  Future _handleClickThird() async {
    if (_isClean) {
      await _cleanCache();
    } else {
      await _getGifImages();
    }
  }

  Future _handleClickFourth() async {
    if (_isClean) {
      await _cleanCache();
    } else {
      await _getImagesByTime();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Export Image"),
      ),
      body: Container(
        padding: EdgeInsets.zero,
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: GridView.extent(
                  maxCrossAxisExtent: 400,
                  childAspectRatio: 1.0,
                  padding: const EdgeInsets.all(4),
                  mainAxisSpacing: 4,
                  crossAxisSpacing: 4,
                  children: widget.images.length > 0
                      ? widget.images
                          .map((image) => ImageItem(image: image))
                          .toList()
                      : [Container()]),
            ),
            Expanded(
              flex: 0,
              child: Center(
                child: MaterialButton(
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                  height: 40,
                  minWidth: 100,
                  onPressed: () {
                    _handleClickFirst();
                  },
                  color: Colors.orange,
                  child: Text(_isClean ? "Clean" : "Export image list"),
                ),
              ),
            ),
            Expanded(
              flex: 0,
              child: Center(
                child: MaterialButton(
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                  height: 40,
                  minWidth: 150,
                  onPressed: () {
                    _handleClickSecond();
                  },
                  color: Colors.orange,
                  child: Text(_isClean ? "Clean" : "Export one image and save"),
                ),
              ),
            ),
            Expanded(
              flex: 0,
              child: Center(
                child: MaterialButton(
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                  height: 40,
                  minWidth: 150,
                  onPressed: () {
                    _handleClickThird();
                  },
                  color: Colors.orange,
                  child: Text(_isClean ? "Clean" : "Export gif image"),
                ),
              ),
            ),
            Expanded(
              flex: 0,
              child: Center(
                child: MaterialButton(
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                  height: 40,
                  minWidth: 150,
                  onPressed: () {
                    _handleClickFourth();
                  },
                  color: Colors.orange,
                  child: Text(_isClean ? "Clean" : "Export images by interval"),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

iOS配置

如果你在编译iOS应用时遇到错误，请编辑ios/Podfile文件如下：

target 'Runner' do
  use_frameworks! # <-- add this
  ...
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['ENABLE_BITCODE'] = 'NO'
      config.build_settings['SWIFT_VERSION'] = '4.2' # <-- add this
    end
  end
end

如果你使用了保存相册的功能，还需要在ios/Runner/Info.plist中添加以下键值：

<key>NSPhotoLibraryUsageDescription</key>
<string>Use Ablum For your purpose</string>

Android配置

确保你在AndroidManifest.xml中添加了所需的权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />