HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（九）截取某帧获得视频缩略图

HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（九）截取某帧获得视频缩略图

上一节我们利用系统相机实现了录像功能，那么为了直观地浏览视频列表，就要给每个视频配上封面，这个封面图的来源之一便是视频里的某帧画面。接下来就介绍如何从视频文件中根据时间点提取帧图像，具体的提取过程分为以下四个步骤。

1、导入系统提供的媒体库

因为提取帧图像用到了来自媒体库的元数据提取器和图像生成器，所以要在ETS代码开头添加下面的导包语句，声明引入media媒体库。

import { media } from '@kit.MediaKit';

还要在代码开头添加元数据提取器和图像生成器的变量声明代码，以便在创建过程中赋值，变量声明代码如下所示：

let avMetadataExtractor: media.AVMetadataExtractor; // 音视频元数据提取器
let avImageGenerator: media.AVImageGenerator; // 音视频图像生成器

2、创建元数据提取器和图像生成器

由于元数据提取器和图像生成器的创建结果为异步返回，所以可在aboutToAppear方法中提前创建它们的实例。其中元数据提取器通过media库的createAVMetadataExtractor方法返回，图像生成器通过media库的createAVImageGenerator方法返回，详细地创建代码示例如下：

aboutToAppear() {
  // 创建音视频的元数据提取器
  media.createAVMetadataExtractor((error: BusinessError, extractor: media.AVMetadataExtractor) => {
    if (extractor != null) {
      avMetadataExtractor = extractor;
    } else {
      console.error(`Failed to create AVMetadataExtractor, error message:${error.message}`);
    }
  });

  // 创建音视频的图像生成器
  media.createAVImageGenerator((error: BusinessError, generator: media.AVImageGenerator) => {
    if (generator != null) {
      avImageGenerator = generator;
    } else {
      console.error(`Failed to creat AVImageGenerator, error message:${error.message}`);
    }
  });
}

3、从音视频文件中提取元数据

这里之所以要从视频文件提取元数据，是因为一个可以检查指定文件是否属于音视频格式，另一个能够获取视频文件的画面宽高。在调用元数据提取器的fetchMetadata方法之前，得先给提取器的fdSrc字段赋值，传入音视频文件的文件句柄和文件大小等信息。下面是从视频文件提取元数据的代码例子：

// 前面省略通过fileIo文件库获取文件句柄的代码，文件句柄放在file.fd
let avFileDescriptor: media.AVFileDescriptor =
  { fd: file.fd, offset: 0, length: stat.size };
avMetadataExtractor.fdSrc = avFileDescriptor

// 从fdSrc指定的音视频文件中提取元数据
avMetadataExtractor.fetchMetadata((error: BusinessError, metadata: media.AVMetadata) => {
  if (error) {
    console.error(`Failed to fetch Metadata, err = ${JSON.stringify(error)}`);
    return;
  }
  // 这里暂时省略获取视频帧的代码
});

4、根据时间点从视频文件获取帧图像

调用图像生成器的fetchFrameByTime方法，即可根据时间点从视频文件获取帧图像，注意在此之前得先给生成器的fdSrc字段赋值，传入视频文件的文件句柄和文件大小等信息。

fetchFrameByTime方法的前三个参数包含了待截取的图像帧规格，其中第一个参数为该帧所处的时间点，单位微秒；第二个参数指定了要返回哪种关键帧；第三个参数指定了图像按什么尺寸返回。那么最后截取的图像帧也是异步返回，且返回的图像数据为image.PixelMap类型，使用Image组件即可显示该缩略图。

下面是从视频文件获取图像帧的代码例子：

avImageGenerator.fdSrc = avFileDescriptor

let timeUs = 1000*1000 // 缩略图所处的时间点，单位微秒

// AV_IMAGE_QUERY_NEXT_SYNC表示取时间点之后的关键帧，AV_IMAGE_QUERY_PREVIOUS_SYNC表示取时间点之前的关键帧
let queryOption = media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC

let param: media.PixelMapParams = {
  width : 300, // 缩略图的宽度
  height : 300 // 缩略图的高度
}

// 从视频文件的指定时间点获取帧图像
avImageGenerator.fetchFrameByTime(timeUs, queryOption, param, (error: BusinessError, pixelMap) => {
  if (error) {
    console.error(`Failed to fetch FrameByTime, err = ${JSON.stringify(error)}`)
    return
  }
  this.pixelMap = pixelMap; // Image组件绑定this.pixelMap即可显示图像
});

下一篇文章会介绍如何给视频缩略图添加高亮边框。