Extract Image from a Video

The extractImage method allows you to extracts an image frame from a video file at a specified time.

Parameters

• options (ExtractImageOptions): An object containing the options for extracting the image.
  • videoUrl:(string): The url or file path of the video from which to extract the image.
  • time:(number): The time in seconds at which to extract the image.

Returns

• A promise that resolves to a string representing the URI of the extracted image.

Usage

const ExtractImageFromVideo = () => {
  const [extractedImage, setExtractedImage] = React.useState<string | null>(
    null
  );
  const extractImageAsync = async (fileUri: string) => {
    try {
      setExtractedImage(null);
      const options: ExtractImageOptions = {
        videoUrl: fileUri,
        time: 4,
      };
      const startProcessing = performance.now();
      const extracteImageUri = await extractImage(options);
      const endProcessing = performance.now();
      setExtractedImage('file://' + extracteImageUri);
      let alertMessage = `Took ${Number(
        endProcessing - startProcessing
      ).toFixed(2)} ms`;
      Alert.alert('Image Extracted', alertMessage);
      console.log('Image uri', extracteImageUri);
    } catch (error) {
      console.log(error);
    }
  };

  const pickFile = async () => {
    try {
      const result = await launchImageLibrary({
        mediaType: 'video',
      });

      if (result.assets?.length && !result.didCancel) {
        const fileUri = result.assets[0]?.uri;
        if (!fileUri) return;
        extractImageAsync(fileUri);
      }
    } catch (error) {}
  };

  return (
    <View style={[styles.box, { height: 180 }]}>
      <Text>Capture a image from video </Text>
      {extractedImage && (
        <Image
          source={{ uri: extractedImage }}
          style={{
            height: 180,
            width: '100%',
          }}
          resizeMode="contain"
        />
      )}
      <Button title="Pick Video" onPress={pickFile} />
    </View>
  );
};