Flutter视频滤镜处理插件flutter_gpu_video_filters的使用

介绍

flutter_gpu_video_filters 是一个用于在 Flutter 应用中应用 OpenGL 滤镜到视频的插件。它支持多种滤镜效果，并且可以轻松地将这些效果应用于视频文件或实时视频流。

使用方法

如何生成和使用多个滤镜

详细说明请参阅 如何生成和使用多个滤镜。

如何添加自定义滤镜

详细说明请参阅 如何添加自定义滤镜。

导出和保存视频

以下是一个示例代码，展示了如何导出并保存带有滤镜效果的视频：

import 'package:flutter_gpu_video_filters/flutter_gpu_video_filters.dart';

Future<void> exportVideo() async {
  final inputSource = AssetInputSource('demo.mp4');
  final output = File('result.mp4');
  final configuration = GPUGrayScaleConfiguration();
  final processStream = configuration.exportVideoFile(VideoExportConfig(inputSource, output));

  await for (final progress in processStream) {
    debugPrint('Exporting file ${(progress * 100).toInt()}%');
  }
}

GPUVideoNativePreview 示例

以下是一个示例代码，展示了如何在 Flutter 应用中预览带有滤镜效果的视频：

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

class PreviewPage extends StatefulWidget {
  const PreviewPage({Key? key}) : super(key: key);

  @override
  State<PreviewPage> createState() => _PreviewPageState();
}

class _PreviewPageState extends State<PreviewPage> {
  late GPUVideoPreviewController configuration;
  late final GPUGrayScaleConfiguration controller;
  late final GPUVideoPreviewParams previewParams;
  bool paramsReady = false;
  static const _assetPath = 'videos/demo.mp4';

  @override
  void initState() {
    super.initState();
    _prepare().whenComplete(() {
      setState(() {});
    });
  }

  Future<void> _prepare() async {
    configuration = GPUGrayScaleConfiguration();
    previewParams = await GPUVideoPreviewParams.create(configuration);
    paramsReady = true;
  }

  @override
  void dispose() {
    controller.dispose();
    configuration.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return paramsReady
        ? GPUVideoNativePreview(
            params: previewParams,
            configuration: configuration,
            onViewCreated: (controller, outputSizeStream) async {
              this.controller = controller;
              await this.controller.setVideoAsset(_assetPath);
              await for (final size in outputSizeStream) {
                setState(() {});
              }
            },
          )
        : const Offstage();
  }
}

额外信息

GPUImage for Android 的支持状态

以下表格列出了 GPUImage for Android 中各种滤镜的支持状态：

示例

• 大 Flutter 滤镜演示 - 一个展示如何使用滤镜的大示例。

维护者

• Nikolay Dymura
• Egor Terekhov
• Nataliia Zabiiaka

完整示例代码

以下是 example/lib/main.dart 文件的完整示例代码：

import 'dart:io' show File;

import 'package:gallery_saver/gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart' hide Rect;
import 'package:flutter_gpu_video_filters/flutter_gpu_video_filters.dart';
import 'package:flutter_gpu_filters_interface/flutter_gpu_filters_interface.dart';

import 'approved_filters.dart';
import 'filters.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Filters Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const ListPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Filters'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomScrollView(
          slivers: [
            SliverFixedExtentList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  final item = kFailedFilters[index];
                  return Card(
                    child: ListTile(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return FilterPage2(
                                configuration: item.configuration,
                              );
                            },
                          ),
                        );
                      },
                      title: Text(item.name),
                      trailing: Icon(
                        Icons.arrow_forward,
                        color: Theme.of(context).colorScheme.error,
                      ),
                    ),
                  );
                },
                childCount: kFailedFilters.length,
              ),
              itemExtent: 64,
            ),
            SliverFixedExtentList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  final item = kFilters[index];
                  return Card(
                    child: ListTile(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return FilterPage2(
                                configuration: item.configuration,
                              );
                            },
                          ),
                        );
                      },
                      title: Text(item.name),
                      trailing: Icon(
                        Icons.arrow_forward,
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                  );
                },
                childCount: kFilters.length,
              ),
              itemExtent: 64,
            ),
          ],
        ),
      ),
    );
  }
}

class FilterPage extends StatefulWidget {
  final GPUFilterConfiguration configuration;

  const FilterPage({super.key, required this.configuration});

  @override
  State<FilterPage> createState() => _FilterPageState();
}

class _FilterPageState extends State<FilterPage> {
  late final VideoPreviewController controller;
  late final GPUVideoPreviewParams previewParams;
  bool previewParamsReady = false;
  static const _videoAsset = 'videos/demo.mp4';

  @override
  void initState() {
    super.initState();
    _prepare().whenComplete(() => setState(() {}));
  }

  @override
  void dispose() {
    controller.dispose();
    widget.configuration.dispose();
    super.dispose();
  }

  Future<void> _prepare() async {
    await widget.configuration.prepare();
    previewParams = await GPUVideoPreviewParams.create(widget.configuration);
    previewParamsReady = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Preview'),
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: null,
        onPressed: () {
          _exportVideo().catchError((e) => ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text(e.toString()))));
        },
        tooltip: 'Export video',
        child: const Icon(Icons.save),
      ),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              child: previewParamsReady
                  ? GPUVideoSurfacePreview(
                      configuration: widget.configuration,
                      onViewCreated: (controller, outputSizeStream) async {
                        this.controller = controller;
                        await controller
                            .setVideoSource(AssetInputSource(_videoAsset));
                        await widget.configuration.update();
                        await for (final _ in outputSizeStream) {
                          setState(() {});
                        }
                      },
                    )
                  : const Center(
                      child: CircularProgressIndicator(),
                    ),
            ),
          ),
          Row(
            children: [
              TextButton(
                  onPressed: () {
                    controller.pause();
                  },
                  child: const Text('Pause')),
              TextButton(
                  onPressed: () {
                    controller.play();
                  },
                  child: const Text('Play')),
            ],
          )
        ],
      ),
    );
  }

  File? latestFile;

  Future<void> _exportVideo() async {
    const asset = _videoAsset;
    final root = await getTemporaryDirectory();
    final output = File(
      '${root.path}/${DateTime.now().millisecondsSinceEpoch}.${asset.split('.').last}',
    );
    final watch = Stopwatch();
    watch.start();
    final processStream = widget.configuration.exportVideoFile(
      VideoExportConfig(
        latestFile == null
            ? AssetInputSource(asset)
            : FileInputSource(latestFile!),
        output,
      ),
    );
    await for (final progress in processStream) {
      debugPrint('_exportVideo: Exporting file ${(progress * 100).toInt()}%');
    }
    debugPrint(
        '_exportVideo: Exporting file took ${watch.elapsedMilliseconds} milliseconds');
    await GallerySaver.saveVideo(output.absolute.path);
    latestFile = output;
    debugPrint('_exportVideo: Exported: ${output.absolute}');
  }
}

class FilterPage2 extends StatefulWidget {
  final GPUFilterConfiguration configuration;

  const FilterPage2({super.key, required this.configuration});

  @override
  State<FilterPage2> createState() => _FilterPageState2();
}

class _FilterPageState2 extends State<FilterPage2> {
  late final VideoPreviewController controller;
  bool previewParamsReady = false;
  static const _videoAsset = 'videos/demo.mp4';

  @override
  void initState() {
    super.initState();
    _prepare().whenComplete(() => setState(() {}));
  }

  @override
  void dispose() {
    controller.dispose();
    widget.configuration.dispose();
    super.dispose();
  }

  Future<void> _prepare() async {
    await widget.configuration.prepare();
    controller = await GPUVideoPreviewController.initialize();
    await controller.connect(widget.configuration);
    await controller.setVideoSource(AssetInputSource(_videoAsset));
    previewParamsReady = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Preview'),
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: null,
        onPressed: () {
          _exportVideo().catchError((e) => ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text(e.toString()))));
        },
        tooltip: 'Export video',
        child: const Icon(Icons.save),
      ),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              child: previewParamsReady
                  ? VideoPreview(
                      controller: controller,
                    )
                  : const Center(
                      child: CircularProgressIndicator(),
                    ),
            ),
          ),
          Row(
            children: [
              TextButton(
                  onPressed: () {
                    controller.pause();
                  },
                  child: const Text('Pause')),
              TextButton(
                  onPressed: () {
                    controller.play();
                  },
                  child: const Text('Play')),
            ],
          )
        ],
      ),
    );
  }

  File? latestFile;

  Future<void> _exportVideo() async {
    const asset = _videoAsset;
    final root = await getTemporaryDirectory();
    final output = File(
      '${root.path}/${DateTime.now().millisecondsSinceEpoch}.${asset.split('.').last}',
    );
    final watch = Stopwatch();
    watch.start();
    final processStream = widget.configuration.exportVideoFile(
      VideoExportConfig(
        latestFile == null
            ? AssetInputSource(asset)
            : FileInputSource(latestFile!),
        output,
      ),
    );
    await for (final progress in processStream) {
      debugPrint('_exportVideo: Exporting file ${(progress * 100).toInt()}%');
    }
    debugPrint(
        '_exportVideo: Exporting file took ${watch.elapsedMilliseconds} milliseconds');
    await GallerySaver.saveVideo(output.absolute.path);
    latestFile = output;
    debugPrint('_exportVideo: Exported: ${output.absolute}');
  }
}

希望这些内容对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。