@salihgun/react-native-video-processor

Video processing functions using @ffmpeg-kit

Preview

Table of contents

• Installation
• Usage
• Contributing
• License

Installation

yarn add @salihgun/react-native-video-processor ffmpeg-kit-react-native

or

npm install @salihgun/react-native-video-processor ffmpeg-kit-react-native

Android Setup

• Edit android/build.gradle file and add the package name in ext.ffmpegKitPackage variable.

    ext {
        ffmpegKitPackage = "full-gpl-lts"
    }

• Edit android/app/build.gradle file and add packaging options above defaultConfig.

packagingOptions {
        pickFirst 'lib/x86/libc++_shared.so'
        pickFirst 'lib/x86_64/libc++_shared.so'
        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
        pickFirst 'lib/arm64-v8a/libc++_shared.so'
    }

iOS Setup

• Edit ios/Podfile file and add the package name as subspec. After that run pod install again.

pod 'ffmpeg-kit-react-native', :subspecs => ['full-gpl-lts'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'

Usage

Video Trimmer Component

// ** Important! Please install react-native-video to run this component.
// yarn add react-native-video

import VideoManager, { TrimmerComponent } from '@salihgun/react-native-video-processor'

  // Use createFreames function to create frames for the video // fps=5 for the example
  const framesPath = await VideoManager.createFrames(videoPath, 5);
  
  //User getVideoInfo function to get video duration
  const videoInfo = await VideoManager.getVideoInfo(videoPath)

  // Then you can use trimVideo function to trim selected part.
  const clippedVideoPath = await VideoManager.trimVideo(videoPath, value, clipDuration)

  <TrimmerComponent
    path={videoPath}
    seekValue={value}
    setSeekValue={setValue}
    framesPath={framesPath}
    duration={videoInfo.duration} // Total video duration
    clipDuration={clipDuration} // You can set the clip duration
  />

Video Info

import VideoManager from '@salihgun/react-native-video-processor'


const result = await VideoManager.getVideoInfo(videoPath)

// example result
// result = {
//  duration: 4.5,
//  creationDate: "2022-11-11T19:08:08.547Z",
//  size: 496145 bytes,
//  bit_rate: 882035,
//  width: 320,
//  height: 568,
//  frame_rate: "30/1",
//  codec_name: "h264",
//  codec_type: "video",
//  sample_aspect_radio: "1:1",
// }

Create Thumbnail

import VideoManager from '@salihgun/react-native-video-processor'

const thumbnailPath = await VideoManager.createThumbnail(videoPath)

Trim Video

import VideoManager from '@salihgun/react-native-video-processor'

const [startTime, setStartTime] = React.useState<string>('');
const [duration, setDuration] = React.useState<string>('');

const clippedVideoPath = await VideoManager.trimVideo(videoPath, startTime, duration)

Create Frames of a Video

import VideoManager from '@salihgun/react-native-video-processor'

// createFrames function has two parameters. Video path and an optional fps value which is default 1
const framesPath = await VideoManager.createFrames(videoPath, 3) // fps = 3

// render method
 <ScrollView horizontal>
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((_, index) => {
        return (
            <Image
                key={index}
                style={styles.frame}
                source={{ uri: `${framesPath}${index + 1}.jpg` }}
            />
        );
    })}
 </ScrollView>

Reverse Video

import VideoManager from '@salihgun/react-native-video-processor'

const reversedVideoPath = await VideoManager.reverseVideo(videoPath)

Merge Videos

import VideoManager from '@salihgun/react-native-video-processor'
import RNFS from "react-native-fs";

// You can use RNFS to create a video path
const outputPath = RNFS.DocumentDirectoryPath + "/mergedVideos.mp4";

// There are two optional scale parameters to merge video
// height and width default value is 1920x1080
// you can change it if you need.
// There is also an optional "hasAudio" parameter and default value is true.
// If one of your videos has no audio, merge doesn't work in this version.
const mergedVideoPath = await VideoManager.mergeVideos(videoPathsArray,outputPath);

Boomerang Video

import VideoManager from '@salihgun/react-native-video-processor'

// Set 'reorder' option to true if you want to reorder videos.
// There are height and width parameters now. You can set a custom height and/or width.
const boomerangVideoPath = await VideoManager.boomerang(videoPath) // reorder = false

Set speed of the Video

import VideoManager from '@salihgun/react-native-video-processor'

// Use speed property to set speed. Default is 1
const speedVideoPath = await VideoManager.setSpeed(videoPath) // speed = 1

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library