rn-ffmpeg-video-editor

rn-ffmpeg-video-editor

rn-ffmpeg-video-editor: An easy-to-use React Native library that allows you to effortlessly trim and manipulate video content. With a user-friendly timeline component, you can quickly select and trim specific portions of a video, giving you the power to create customized video segments. Built on the foundation of ffmpeg-kit-react-native, this library bridges the gap between native FFmpeg functionality and JavaScript, making video editing a breeze in your React Native applications. Stay tuned for more exciting features, including video filters, in future updates!

Installation

npm install rn-ffmpeg-video-editor

or

yarn add rn-ffmpeg-video-editor

This package uses react-native-fs package as a peer dependency so you have to install this package also in your project.

Usage

import React, {useState, createRef} from 'react';
import {TouchableOpacity, View, Text, StyleSheet} from 'react-native';
import {FrameTimeLine} from 'rn-ffmpeg-video-editor';
import ImageCropPicker from 'react-native-image-crop-picker';
import Video from 'react-native-video';

const App = () => {
  const [selectedVid, setSelectedVid] = useState('');
  const frameRef = createRef();
  const videoRef = createRef();

  const handleSelectVid = async () => {
    try {
      const resPath = await ImageCropPicker.openPicker({mediaType: 'video'});
      setSelectedVid(resPath);
    } catch (error) {
      console.error('selectVidErr ', error);
    }
  };

  const cropVideo = async () => {
    await frameRef.current.trimVideo({clearCacheFiles: true});
    console.log('videoUrl ', frameRef?.current.videoMetaData);
  };

  return (
    <View style={styles.container}>
      <FrameTimeLine
        ref={frameRef}
        seekAt={time => {
          videoRef.current?.seek(time);
        }}
        inputVidMetaData={selectedVid}
      />

      <Video
        ref={videoRef}
        source={{
          uri: 'file://' + selectedVid.path,
        }}
        style={styles.video}
        resizeMode="contain"
        muted
        repeat
        paused={false}
      />
      <View style={styles.btnContainer}>
        <TouchableOpacity
          onPress={handleSelectVid}
          style={styles.selectVidButton}
        >
          <Text style={styles.btnTxt}>Select Video</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={cropVideo} style={styles.selectVidButton}>
          <Text style={styles.btnTxt}>Crop Video</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ...

export default App;

License

MIT

Made with ffmpeg-kit-react-native