VideoThumbnails

expo-video-thumbnails allows you to generate an image to serve as a thumbnail from a video file.

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

Installation

Terminal

→ expo install expo-video-thumbnails

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

import React, { 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(
        'http://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>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%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

`VideoThumbnails.getThumbnailAsync(sourceFilename, options)`

Arguments

sourceFilename (string) - An URI of the video, local or remote.
options (VideoThumbnailsOptions) - A map defining how modified thumbnail should be created.

Create an image thumbnail from video provided via sourceFilename.

Returns

Promise<VideoThumbnailsResult>

Returns a promise which fulfils with VideoThumbnailsResult.

Types

`VideoThumbnailsOptions`

Name	Type	Description
headers (optional)	`Record<string, string>`	In case `sourceFilename` is a remote URI, `headers` object is passed in a network request.
quality (optional)	`number`	A value in range `0.0` - `1.0` specifying quality level of the result image. `1` means no compression (highest quality) and `0` the highest compression (lowest quality).
time (optional)	`number`	The time position where the image will be retrieved in ms.

`VideoThumbnailsResult`

Name	Type	Description
height	`number`	Height of the created image.
uri	`string`	URI to the created image (usable as the source for an Image/Video element).
width	`number`	Width of the created image.