Flutter 3.47 鸿蒙三方库适配实战：从 0 到 1 处理 flutter_video_thumbnail

子春一

18人浏览 · 2026-10-17 20:52:09

子春一 · 2026-10-17 20:52:09 发布

Flutter 3.47 鸿蒙三方库适配实战：从 0 到 1 处理 flutter_video_thumbnail

视频封面是媒体类应用的门面：列表里每个视频都需要一帧缩略图。flutter_video_thumbnail 从视频文件抽取指定质量的封面帧。把它带到鸿蒙时，视频解码能力是适配的核心。

本文以 flutter_video_thumbnail 0.0.2 为例，记录我如何保留原有 Dart API、补齐 Flutter OH 插件入口、在鸿蒙端接入真实系统能力，并在 HarmonyOS API 26 真机上完成构建、安装、启动和按钮调用验证。

适配仓库： oh-flutter/flutter_video_thumbnail

适配分支： feat/ohos_flutter_video_thumbnail_0.0.2

适配 TAG： 0.0.2-ohos.2

一、先看最终效果

图 1：HarmonyOS API 26 真机启动 Demo。页面显示 flutter_video_thumbnail 0.0.2。

图 2：点击“抽取视频缩略图”后返回 缩略图字节数：7417，帧由 AVImageGenerator.fetchFrameByTime 解码并编码为 JPEG。

验证点	实测结果	证据
Flutter OH 3.47 工程构建	通过	`entry-default-signed.hap`
安装、启动	通过	图 1
`getThumbnail`	返回 7417 字节 JPEG	图 2
抽帧	`AVImageGenerator.fetchFrameByTime`	图 2

二、这个库原来是怎么工作的

flutter_video_thumbnail 的接口单点：

Dart FlutterVideoThumbnail
  -> MethodChannel('flutter_video_thumbnail')
  -> Android MediaMetadataRetriever / iOS AVAssetImageGenerator
  -> getThumbnail(path) 返回图像字节

getThumbnail 支持质量参数（quality），远程地址走缓存路径，本地文件直接解码。

三、实际环境

Flutter 鸿蒙环境搭建不在本文重复展开，直接参考 Flutter OH 环境搭建指南。

组件	版本
Flutter OH	`3.47.4-ohos-1.0.4`
Dart	`3.13.3`
DevEco Studio	`26.0.0 Release`
HarmonyOS SDK	API 26
测试设备	华为畅享 90 Pro Max，HarmonyOS `7.0.0.105`（API 26）
目标库	`flutter_video_thumbnail 0.0.2`

flutter --version
hdc list targets

四、确认上游版本并同步到 AtomGit

上游包地址是 https://github.com/MarcosAngelCalvo/flutter_video_thumbnail，版本 0.0.2 使用 Apache-2.0 License。适配前我在 AtomGit 目标组织中搜索了同名库，没有找到可以直接使用的 OHOS 实现。

仓库适配提交为 bfeb098，分支与 TAG 0.0.2-ohos.2 均指向该提交。

git clone https://atomgit.com/oh-flutter/flutter_video_thumbnail.git
cd flutter_video_thumbnail
git switch feat/ohos_flutter_video_thumbnail_0.0.2
git log --oneline -5

五、创建适配分支并检查工程结构

git switch -c feat/ohos_flutter_video_thumbnail_0.0.2

关键目录如下：

flutter_video_thumbnail/
├── lib/                                        # 原有 Dart API 和 MethodChannel
├── ohos/
│   ├── index.ets                               # OHOS 插件导出入口
│   └── src/main/ets/components/plugin/
│       └── FlutterVideoThumbnailPlugin.ets                           # 通道实现
├── example/lib/main.dart                        # 真机验证 Demo
├── example/ohos/                                # Flutter OH 宿主工程
├── pubspec.yaml                                # 声明 ohos 平台
└── README.OpenHarmony_CN.md                    # 鸿蒙适配说明

pubspec.yaml 中的关键声明是：

flutter:
  plugin:
    platforms:
      ohos:
        pluginClass: FlutterVideoThumbnailPlugin

pluginClass 必须和 ohos/index.ets 导出的类名一致，否则 Dart 端能编译，运行时却不会注册插件。

六、适配过程：注册通道并对齐语义

const generator = await media.createAVImageGenerator();
generator.fdSrc = { fd: file.fd };
const pixelMap = await generator.fetchFrameByTime(
  1_000_000,                                     // 第 1 秒
  media.AVImageQueryOptions.AV_IMAGE_QUERY_CLOSEST_SYNC,
  { width: 640, height: 480 });
const data = await image.createImagePacker()
  .packToData(pixelMap, { format: 'image/jpeg', quality });
return new Uint8Array(data);   // 必须转 Uint8Array

方法	OpenHarmony 实现
`getThumbnail(path, quality)`	`AVImageGenerator` 抽帧 + `ImagePacker` 编码 JPEG

七、构建配置与签名

示例工程的目标 SDK 对齐到 26，与 @ohos/flutter_ohos 的最低要求一致：

{
  "name": "default",
  "compatibleSdkVersion": "26.0.0",
  "targetSdkVersion": "26.0.0",
  "runtimeOS": "HarmonyOS"
}

Demo 的 AppScope/app.json5 统一成 com.example.flutter_oh_demo，与 DevEco 调试签名对应。证书、p12、p7b 和密码没有提交到仓库，读者应在自己的 DevEco Studio 中生成调试签名。

八、通过 AtomGit 引入适配版

在另一个 Flutter OH 应用中使用时，建议锁定 TAG：

dependencies:
  flutter_video_thumbnail:
    git:
      url: https://atomgit.com/oh-flutter/flutter_video_thumbnail.git
      ref: 0.0.2-ohos.2

flutter pub get

然后在 pubspec.lock 检查 source: git、AtomGit 地址和 resolved-ref，确认没有解析到 pub.dev 的同名版本。

九、构建、安装和真机验证

cd example
flutter pub get
flutter analyze
flutter build hap --debug
hdc install -r build/ohos/hap/entry-default-signed.hap
hdc shell aa start -a EntryAbility -b com.example.flutter_oh_demo

构建输出为 ✓ Built build/ohos/hap/entry-default-signed.hap.，随后 hdc 报告安装成功并启动 Ability。真机上按本文的截图顺序逐一点击按钮完成验证。

十、适配结果和当前边界

抽帧已完整接入。返回类型必须转成 Uint8Array：packToData 返回 ArrayBuffer，直接返回会被编解码器打成 Map，Dart 侧收到 _Map 并报 “type ‘_Map<Object?, Object?>’ is not a subtype of type ‘FutureOr<Uint8List?>’”。

转成 Uint8Array 后编码为 UINT8_ARRAY，Dart 收到 Uint8List，类型才对得上。