react-native-create-thumbnail

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.