react-native-create-thumbnail

iOS/Android thumbnail generator with storage/cache management and support for both local and remote videos. react-native-create-thumbnail is a wrapper around AVAssetImageGenerator (iOS) and MediaMetadataRetriever (Android)

Getting started

1. Install library from npm

   npm i react-native-create-thumbnail

   or

   yarn add react-native-create-thumbnail

2. Link native code

   With autolinking (react-native 0.60+)

   cd ios && pod install

   Pre 0.60

   react-native link react-native-create-thumbnail

Usage

import { createThumbnail } from "react-native-create-thumbnail";

createThumbnail({
  url: '<path to video file>',
  timeStamp: 10000,
})
  .then(response => console.log({ response }))
  .catch(err => console.log({ err }));

Request Object

| Property | Type | Description | | --------- | :-----------------------: | :------------------------------------------------------------------------ | | url | String (required) | Path to video file (local or remote) | | timeStamp | Number (default 0) | Thumbnail timestamp (in milliseconds) | | format | String (default jpeg) | Thumbnail format, can be one of: jpeg, or png | | maxWidth | Number (default 512) | Max thumbnail width in px | | maxHeight | Number (default 512) | Max thumbnail height in px | | dirSize | Number (default 100) | Maximum size of the cache directory (in megabytes). When this directory is full, the previously generated thumbnails will be deleted to clear about half of it's size. | | headers | Object | Headers to load the video with. e.g. { Authorization: 'someAuthToken' } | | cacheName | String (optional) | Cache name for this thumbnail to avoid duplicate generation. If specified, and a thumbnail already exists with the same cache name, it will be returned instead of generating a new one. | | timeToleranceMs | Number (default 2000, Only iOS) | Time tolerance in ms for the system to pick the best matching video frame | | onlySyncedFrames | Boolean (default true, Only Android) | Specify how Android target frames. Use true to retrieve a sync frame that has a timestamp closest to the specified one. Use false to retrieve a frame that may or may not be a sync frame but is closest to the specified timestamp. |

Response Object

| Property | Type | Description | | -------- | :------: | :-------------------------- | | path | String | Path to generated thumbnail | | size | Number | Size (in bytes) of thumbnail| | mime | String | Mimetype of thumbnail | | width | Number | Thumbnail width | | height | Number | Thumbnail height |

Notes

Requires following Permissions on android

READ_EXTERNAL_STORAGE, WRITE_EXTERNAL_STORAGE

Limitations

• Remote videos aren't supported on android sdk_version < 14.
• This is a Native Module, so it won't work in expo managed projects.
• This library heavily depends on the native API's to generate the thumbnails. Thus it can only generate from the video formats/codecs that are supported by the device's OS.

Credits

• react-native-thumbnail - A great source of inspiration
• This project was bootstrapped with create-react-native-module

Maintenance Status

Active: Bug reports, feature requests and pull requests are welcome.