Flutter视频编辑插件video_editor_sdk的使用

系统要求

• Flutter: 1.20.0
• Dart: 2.12.0
• iOS: 13
• Android: 5 (SDK 21)

入门指南

添加依赖

在项目的pubspec.yaml文件中添加插件包：

dependencies:
  video_editor_sdk: ^3.2.0

安装新依赖：

flutter pub get

Android配置

1. 修改android/build.gradle

打开android/build.gradle文件（不是android/app/build.gradle），并修改以下内容：

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.7.21'
    repositories {
        ...
        mavenCentral()
+       maven { url "https://artifactory.img.ly/artifactory/imgly" }
        ...
    }
    dependencies {
        ...
+       classpath 'com.google.devtools.ksp:com.google.devtools.ksp.gradle.plugin:1.7.21-1.0.8' // Depending on your `kotlin_version` version.
+       classpath 'ly.img.android.sdk:plugin:10.9.0'
        ...
    }
}

确保KSP版本与使用的Kotlin版本匹配，具体可以参考官方KSP发布页面。

为了更新VideoEditor SDK for Android，将版本字符串10.9.0替换为新的发布版本。

2. 添加仓库

在同一个android/build.gradle文件中添加以下代码：

allprojects {
    repositories {
        maven { url 'https://artifactory.img.ly/artifactory/imgly' }
    }
}

3. 修改android/app/build.gradle

在android/app/build.gradle文件中修改minSdkVersion至至少21，推荐同时更新buildToolsVersion至34.0.0以及compileSdkVersion至34：

android {
-   compileSdkVersion flutter.compileSdkVersion
+   compileSdkVersion 34
+   buildToolsVersion "34.0.0"
    ...
    defaultConfig {
        ...
-       minSdkVersion flutter.minSdkVersion
+       minSdkVersion 21
        ...
    }
    ...
}

根据你的稳定版Flutter SDK版本（<= 2.5.0），android/app/build.gradle文件可能略有不同，请相应修改。

4. 配置VideoEditor SDK for Android

在android/app/build.gradle文件中添加以下配置：

apply plugin: 'ly.img.android.sdk'
apply plugin: 'kotlin-android'

// Comment out the modules you don't need, to save size.
IMGLY.configure {
    modules {
        include 'ui:text'
        include 'ui:focus'
        include 'ui:frame'
        include 'ui:brush'
        include 'ui:filter'
        include 'ui:sticker'
        include 'ui:overlay'
        include 'ui:transform'
        include 'ui:adjustment'
        include 'ui:text-design'
        include 'ui:video-trim'
        include 'ui:video-library'
        include 'ui:video-composition'
        include 'ui:audio-composition'
        include 'ui:giphy-sticker'

        // This module is big, remove the serializer if you don't need that feature.
        include 'backend:serializer'

        // Remove the asset packs you don't need, these are also big in size.
        include 'assets:font-basic'
        include 'assets:frame-basic'
        include 'assets:filter-basic'
        include 'assets:overlay-basic'
        include 'assets:sticker-shapes'
        include 'assets:sticker-emoticons'
        include 'assets:sticker-animated'

        include 'backend:sticker-animated'
        include 'backend:sticker-smart'
        include 'backend:background-removal'
    }
}

使用示例

导入包

在main.dart文件中导入必要的包：

import 'package:video_editor_sdk/video_editor_sdk.dart';
import 'package:imgly_sdk/imgly_sdk.dart';

解锁VideoEditor SDK

每个平台需要单独的许可证文件。通过一行代码解锁VideoEditor SDK：

重命名许可证文件：

• Android许可证：vesdk_license.android
• iOS许可证：vesdk_license.ios

将许可证文件放在项目级别的assets/文件夹中，并使用以下代码解锁：

VESDK.unlockWithLicense("assets/vesdk_license");

打开编辑器

使用视频文件打开编辑器：

VESDK.openEditor(Video("assets/video.mp4"));

更多详细信息和自定义选项请参阅API文档。

示例项目

查看我们的示例项目，了解如何使用Flutter插件。

许可条款

确保你拥有VideoEditor SDK的商业许可证，以便在发布应用程序前合法使用。

支持和许可

如有问题或需要支持，请访问我们的服务台。购买商业许可证请访问许可证申请表单。

完整示例Demo

下面是一个完整的示例应用，展示了如何使用video_editor_sdk插件进行视频编辑：

import 'package:flutter/material.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

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

/// The example application for the video_editor_sdk plugin.
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Configuration createConfiguration() {
    final flutterSticker = Sticker(
        "example_sticker_logos_flutter", "Flutter", "assets/Flutter-logo.png");
    final imglySticker = Sticker(
        "example_sticker_logos_imgly", "img.ly", "assets/IgorSticker.png");

    /// A completely custom category.
    final logos = StickerCategory(
        "example_sticker_category_logos", "Logos", "assets/Flutter-logo.png",
        items: [flutterSticker, imglySticker]);

    /// A predefined category.
    final emoticons =
        StickerCategory.existing("imgly_sticker_category_emoticons");

    /// A customized predefined category.
    final shapes =
        StickerCategory.existing("imgly_sticker_category_shapes", items: [
      Sticker.existing("imgly_sticker_shapes_badge_01"),
      Sticker.existing("imgly_sticker_shapes_arrow_02")
    ]);

    /// A GIPHY sticker category.
    // final giphy = StickerCategory.giphy(
    //     GiphyStickerProvider("YOUR-GIPHY-API-KEY"));

    var categories = <StickerCategory>[logos, emoticons, shapes];
    final configuration = Configuration(
        sticker: StickerOptions(personalStickers: true, categories: categories));
    return configuration;
  }

  void presentEditor() async {
    final result = await VESDK.openEditor(Video("assets/Skater.mp4"),
        configuration: createConfiguration());
    print(result?.toJson());
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('VideoEditor SDK Example'),
          ),
          body: ListView.builder(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text("Open video editor"),
                subtitle: Text("Click to edit a sample video."),
                onTap: presentEditor,
              );
            },
            itemCount: 1,
          )),
    );
  }
}

这个示例展示了如何创建一个简单的Flutter应用，使用video_editor_sdk插件打开视频编辑器，并对视频进行编辑。你可以根据需要进一步扩展和自定义此示例。