Document

You can use the AVImageGenerator to obtain the thumbnail of a video at the specified time from the raw media asset.

The full process of obtaining the video thumbnail includes creating an AVImageGenerator instance, setting resources, obtaining the thumbnail, and releasing the instance.

How to Develop

For details about the APIs, see AVImageGenerator.

Use createAVImageGenerator() to create an instance.

Collapse
Word wrap
Dark theme
Copy code
import { media } from '@kit.MediaKit';
let avImageGenerator: media.AVImageGenerator = await media.createAVImageGenerator();

Set resources. Specifically, set the fdSrc property (indicating the file descriptor).
NOTE
Verify resource validity and set fdSrc based on the actual situation:
- You can use ResourceManager.getRawFd to open a HAP resource file descriptor. For usage, refer to getRawFd in the ResourceManager API.
- You can also use the app sandbox path to access the corresponding resource (ensure that the resource file is available). For details, see Obtaining Application File Paths. For an introduction to the app sandbox and how to push files to it, see Application Sandbox.
- If different AVImageGenerator or AVMetadataExtractor instances need to operate on the same resource, you must open the file descriptor multiple times. Do not share the same file descriptor.
Collapse
Word wrap
Dark theme
Copy code
```
import { common } from '@kit.AbilityKit';
// Obtain the context of the ability to which the current component belongs and obtain the application file path through the context.
let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
// Set fdSrc. H264_AAC.mp4 is a preset resource in the rawfile directory. Replace it with the actual one.
avImageGenerator.fdSrc = await context.resourceManager.getRawFd('H264_AAC.mp4');
```

Obtain the thumbnail at the specified time. Specifically, call fetchFrameByTime() to obtain a PixelMap object, which can be used for image display.

Collapse
Word wrap
Dark theme
Copy code
import { image } from '@kit.ImageKit';

// Declare a pixelMap object, which is used for image display.
@State pixelMap: image.PixelMap | undefined = undefined;

// Initialize input parameters.
let timeUs = 0; // Timestamp in the video where the thumbnail should be captured.
let queryOption = media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC; // AV_IMAGE_QUERY_NEXT_SYNC means that the key frame at or after the specified timestamp is selected.
// Parameters for the output thumbnail format.
let param: media.PixelMapParams = {
  width : 300, // Width of the output thumbnail.
  height : 300 // Height of the output thumbnail.
};

// Obtain the thumbnail (promise mode).
this.pixelMap = await avImageGenerator.fetchFrameByTime(timeUs, queryOption, param);

Call release() to release the AVImageGenerator instance.

Collapse
Word wrap
Dark theme
Copy code
// Release the instance (promise mode).
await avImageGenerator.release().catch((err: BusinessError) => {
   console.error(`release failed, error code: ${err.code}, error message: ${err.message}`);
});

Running the Sample Project

Refer to the sample project to obtain the video thumbnail at a specified time.

Create a project, download the sample project, and copy its resources to the corresponding directories.

Collapse
Word wrap
Dark theme
Copy code
AVImageGeneratorArkTS
entry/src/main/ets/
└── pages
    └── Index.ets (Thumbnail retrieval UI)
entry/src/main/resources/
├── base
│   ├── element
│   │   ├── color.json
│   │   ├── float.json
│   │   └── string.json
│   └── media
│
└── rawfile
    └── H264_AAC.mp4 (Video resource)

Compile and run the project.

Using AVImageGenerator to Extract Video Images at a Specified Time (ArkTS)

How to Develop

Running the Sample Project