Flutter插件tapioca的介绍与使用_Tapioca 是一个用于视频编辑的 Flutter 插件

Flutter插件tapioca的介绍与使用_Tapioca 是一个用于视频编辑的 Flutter 插件

Tapioca 是一个用于视频编辑的 Flutter 插件。它支持在 Android 和 iOS 平台上进行视频编辑。

Flutter插件tapioca特性

• 支持从单一代码库开发 iOS 和 Android 应用。
• 可以对视频进行编辑，包括应用滤镜、叠加文字和图片。

Flutter插件tapioca安装

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

iOS

在 <项目根目录>/ios/Runner/Info.plist 文件中添加以下条目：

<key>NSPhotoLibraryUsageDescription</key>
<string>请允许访问您的照片库以编辑视频。</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>请允许写入您的照片库。</string>

Android

1. 确保在 <项目根目录>/android/app/src/main/AndroidManifest.xml 文件中包含以下权限：

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

1. 在 <项目根目录>/android/build.gradle 文件中添加 JitPack 仓库：

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

使用

以下是一个使用 Tapioca 进行视频编辑的示例代码：

import 'package:tapioca/tapioca.dart';
import 'package:path_provider/path_provider.dart';

// 定义要应用到视频上的效果
final tapiocaBalls = [
  TapiocaBall.filter(Filters.pink),
  TapiocaBall.imageOverlay(imageBitmap, 300, 300),
  TapiocaBall.textOverlay("text", 100, 10, 100, Color(0xffffc0cb)),
];

// 获取临时文件夹路径
var tempDir = await getTemporaryDirectory();
final path = '${tempDir.path}/result.mp4';

// 创建一个包含视频内容和效果列表的对象
final cup = Cup(Content(videoPath), tapiocaBalls);

// 开始处理视频
cup.suckUp(path).then((_) {
  print("完成处理");
});

TapiocaBall

TapiocaBall 是一种应用于视频的效果。以下是可用的效果类型：

内容

Content 类用于包装视频文件。

杯子

Cup 类用于包装 Content 对象和 List<TapiocaBall> 对象。你可以通过执行 .suckUp() 方法来编辑视频。

支持的格式

• iOS: 背后的视频编辑器是 AVFoundation，请参阅 这里 查看支持的视频格式。
• Android: 背后的视频编辑器是 Mp4Composer-android，仅支持 MP4 格式。

示例代码

以下是完整的示例代码，展示了如何使用 Tapioca 插件进行视频编辑：

import 'dart:async';

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:tapioca/tapioca.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
import 'package:gallery_saver/gallery_saver.dart';
import 'package:video_player/video_player.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final navigatorKey = GlobalKey<NavigatorState>();
  late XFile _video;
  bool isLoading = false;
  static const EventChannel _channel = const EventChannel('video_editor_progress');
  late StreamSubscription _streamSubscription;
  int processPercentage = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    _enableEventReceiver();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _disableEventReceiver();
  }

  void _enableEventReceiver() {
    _streamSubscription = _channel.receiveBroadcastStream().listen(
      (dynamic event) {
        setState(() {
          processPercentage = (event.toDouble() * 100).round();
        });
      },
      onError: (dynamic error) {
        print('Received error: ${error.message}');
      },
      cancelOnError: true,
    );
  }

  void _disableEventReceiver() {
    _streamSubscription.cancel();
  }

  _pickVideo() async {
    try {
      final ImagePicker _picker = ImagePicker();
      XFile? video = await _picker.pickVideo(source: ImageSource.gallery);
      if (video != null) {
        setState(() {
          _video = video;
          isLoading = true;
        });
      }
    } catch (error) {
      print(error);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: isLoading
              ? Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    CircularProgressIndicator(),
                    SizedBox(height: 10),
                    Text(processPercentage.toString() + "%", style: TextStyle(fontSize: 20)),
                  ],
                )
              : ElevatedButton(
                  child: Text("选择一个视频并编辑它"),
                  onPressed: () async {
                    print("点击了！");
                    await _pickVideo();
                    var tempDir = await getTemporaryDirectory();
                    final path = '${tempDir.path}/${DateTime.now().millisecondsSinceEpoch}result.mp4';
                    print(tempDir);
                    final imageBitmap = (await rootBundle.load("assets/tapioca_drink.png")).buffer.asUint8List();
                    try {
                      final tapiocaBalls = [
                        TapiocaBall.filter(Filters.pink, 0.2),
                        TapiocaBall.imageOverlay(imageBitmap, 300, 300),
                        TapiocaBall.textOverlay("text", 100, 10, 100, Color(0xffffc0cb)),
                      ];
                      print("即将开始");
                      final cup = Cup(Content(_video.path), tapiocaBalls);
                      cup.suckUp(path).then((_) async {
                        print("完成");
                        setState(() {
                          processPercentage = 0;
                        });
                        print(path);
                        GallerySaver.saveVideo(path).then((bool? success) {
                          print(success.toString());
                        });
                        final currentState = navigatorKey.currentState;
                        if (currentState != null) {
                          currentState.push(
                            MaterialPageRoute(builder: (context) => VideoScreen(path)),
                          );
                        }
                        setState(() {
                          isLoading = false;
                        });
                      }).catchError((e) {
                        print('获取错误: $e');
                      });
                    } on PlatformException {
                      print("错误!!!!");
                    }
                  },
                ),
        ),
      ),
    );
  }
}

class VideoScreen extends StatefulWidget {
  final String path;

  VideoScreen(this.path);

  [@override](/user/override)
  _VideoAppState createState() => _VideoAppState(path);
}

class _VideoAppState extends State<VideoScreen> {
  final String path;

  _VideoAppState(this.path);

  late VideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.file(File(path))
      ..initialize().then((_) {
        // 确保在视频初始化后显示第一帧，即使播放按钮尚未按下。
        setState(() {});
      });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (!_controller.value.isPlaying && _controller.value.isInitialized && (_controller.value.duration == _controller.value.position)) {
              _controller.initialize();
              _controller.play();
            } else {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}