@capgo/capacitor-video-thumbnails

Generate video thumbnails from local or remote video files.

Why Capacitor Video Thumbnails?

Extract thumbnail images from videos at specific time positions:

• Local & Remote Videos - Works with both file:// paths and http(s):// URLs
• Custom Time Position - Extract frame at any millisecond timestamp
• Quality Control - Adjustable JPEG compression quality
• HTTP Headers Support - Custom headers for authenticated video sources
• Cross-platform - Consistent API across iOS, Android, and Web

Perfect for video galleries, media players, video editors, and any app that needs video preview images.

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/video-thumbnails/

Install

npm install @capgo/capacitor-video-thumbnails
npx cap sync

Requirements

• iOS: iOS 15.0+
• Android: API 24+ (Android 7.0+)
• Web: Modern browsers with HTML5 video support

API

• getThumbnail(...)
• getPluginVersion()
• Interfaces
• Type Aliases

Capacitor Video Thumbnails Plugin interface for generating video thumbnails.

getThumbnail(...)

getThumbnail(options: VideoThumbnailsOptions) => Promise<VideoThumbnailsResult>

Generate a thumbnail image from a video file at a specific time position.

| Param | Type | Description | | ------------- | ------------------------------------------------------------------------- | -------------------------------------- | | options | VideoThumbnailsOptions | - Options for generating the thumbnail |

Returns: Promise<VideoThumbnailsResult>

Since: 8.0.0

getPluginVersion()

getPluginVersion() => Promise<{ version: string; }>

Get the native Capacitor plugin version.

Returns: Promise<{ version: string; }>

Since: 8.0.0

Interfaces

VideoThumbnailsResult

Result of thumbnail generation.

| Prop | Type | Description | | ------------ | ------------------- | --------------------------------------------------------------------------------------------------------------- | | uri | string | The local URI path to the generated thumbnail image. This can be used directly in img tags or Image components. | | width | number | Width of the generated thumbnail in pixels. | | height | number | Height of the generated thumbnail in pixels. |

VideoThumbnailsOptions

Options for generating a video thumbnail.

| Prop | Type | Description | | --------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | sourceUri | string | The URI of the video file. Can be a local file path or a remote URL. For local files, use file:// protocol or absolute path. For remote files, use http:// or https:// protocol. | | time | number | The time position in milliseconds from which to extract the thumbnail. Defaults to 0 (first frame). | | quality | number | Quality of the generated image, from 0.0 (lowest) to 1.0 (highest). Defaults to 1.0. | | headers | Record<string, string> | HTTP headers to include when fetching remote video URIs. Only applicable for remote URLs. |

Type Aliases

Record

Construct a type with a set of properties K of type T

{ [P in K]: T; }

Credits

This was inspired from (Expo SDK)[https://docs.expo.dev/versions/latest/sdk/video-thumbnails/]