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
-
Install library from
npmnpm i react-native-create-thumbnailor
yarn add react-native-create-thumbnail -
Link native code
With autolinking (react-native 0.60+)
cd ios && pod installPre 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_STORAGELimitations
- 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.