This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 53).
Expo VideoThumbnails
A library that allows you to generate an image to serve as a thumbnail from a video file.
expo-video-thumbnails
allows you to generate an image to serve as a thumbnail from a video file.
Installation
-
npx expo install expo-video-thumbnails
If you are installing this in an existing React Native app, make sure to install expo
in your project.
Usage
import { useState } from 'react'; import { StyleSheet, Button, View, Image, Text } from 'react-native'; import * as VideoThumbnails from 'expo-video-thumbnails'; export default function App() { const [image, setImage] = useState(null); const generateThumbnail = async () => { try { const { uri } = await VideoThumbnails.getThumbnailAsync( 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4', { time: 15000, } ); setImage(uri); } catch (e) { console.warn(e); } }; return ( <View style={styles.container}> <Button onPress={generateThumbnail} title="Generate thumbnail" /> {image && <Image source={{ uri: image }} style={styles.image} />} <Text>{image}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, image: { width: 200, height: 200, }, });
API
import * as VideoThumbnails from 'expo-video-thumbnails';
Methods
Parameter | Type | Description |
---|---|---|
sourceFilename | string | An URI of the video, local or remote. |
options(optional) | VideoThumbnailsOptions | A map defining how modified thumbnail should be created. Default: {} |
Create an image thumbnail from video provided via sourceFilename
.
Promise<VideoThumbnailsResult>
Returns a promise which fulfils with VideoThumbnailsResult
.
Types
Property | Type | Description |
---|---|---|
headers(optional) | Record<string, string> | In case |
quality(optional) | number | A value in range |
time(optional) | number | The time position where the image will be retrieved in ms. |