iOS/Android thumbnail generator with support for both local and remote videos
npm install react-native-create-thumbnailiOS/Android thumbnail generator with storage/cache management and support for both local and remote videos. react-native-create-thumbnail is a wrapper aroundAVAssetImageGenerator (iOS) and MediaMetadataRetriever (Android)
  
1. Install library from npm
``bash`
npm i react-native-create-thumbnail
or
`bash`
yarn add react-native-create-thumbnail
2. Link native code
With autolinking (react-native 0.60+)
`bash`
cd ios && pod install
Pre 0.60
`bash`
react-native link react-native-create-thumbnail
`javascript
import { createThumbnail } from "react-native-create-thumbnail";
createThumbnail({
url: '
timeStamp: 10000,
})
.then(response => console.log({ response }))
.catch(err => console.log({ err }));
`
| Property | Type | Description |
| --------- | :-----------------------: | :------------------------------------------------------------------------ |
| url | String (required) | Path to video file (local or remote) |Number
| timeStamp | (default 0) | Thumbnail timestamp (in milliseconds) |String
| format | (default jpeg) | Thumbnail format, can be one of: jpeg, or png |Number
| maxWidth | (default 512) | Max thumbnail width in px |Number
| maxHeight | (default 512) | Max thumbnail height in px |Number
| dirSize | (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. |Object
| headers | | Headers to load the video with. e.g. { Authorization: 'someAuthToken' } |String
| cacheName | (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. |Number
| timeToleranceMs | (default 2000, Only iOS) | Time tolerance in ms for the system to pick the best matching video frame |Boolean
| onlySyncedFrames | (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. |
| Property | Type | Description |
| -------- | :------: | :-------------------------- |
| path | String | Path to generated thumbnail |Number
| size | | Size (in bytes) of thumbnail|String
| mime | | Mimetype of thumbnail |Number
| width | | Thumbnail width |Number
| height | | Thumbnail height |
#### Notes
Requires following Permissions on android
`bash`
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.