https://github.com/salihgun/react-native-video-processor
Video processing functions
https://github.com/salihgun/react-native-video-processor
boomerang ffmpeg react-native thumbnail video video-clip video-speed
Last synced: 6 months ago
JSON representation
Video processing functions
- Host: GitHub
- URL: https://github.com/salihgun/react-native-video-processor
- Owner: salihgun
- License: mit
- Created: 2022-11-08T17:45:40.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-13T15:03:37.000Z (almost 3 years ago)
- Last Synced: 2025-07-27T03:09:45.177Z (6 months ago)
- Topics: boomerang, ffmpeg, react-native, thumbnail, video, video-clip, video-speed
- Language: TypeScript
- Homepage:
- Size: 782 KB
- Stars: 32
- Watchers: 1
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @salihgun/react-native-video-processor
Video processing functions using [@ffmpeg-kit](https://github.com/arthenica/ffmpeg-kit)
## Preview
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
## Installation
```sh
yarn add @salihgun/react-native-video-processor ffmpeg-kit-react-native
```
or
```sh
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.
```gradle
ext {
ffmpegKitPackage = "full-gpl-lts"
}
```
- Edit `android/app/build.gradle` file and add packaging options above `defaultConfig`.
```gradle
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.
```ruby
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
```js
// ** 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)
```
Video Info
```js
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
```js
import VideoManager from '@salihgun/react-native-video-processor'
const thumbnailPath = await VideoManager.createThumbnail(videoPath)
```
Trim Video
```js
import VideoManager from '@salihgun/react-native-video-processor'
const [startTime, setStartTime] = React.useState('');
const [duration, setDuration] = React.useState('');
const clippedVideoPath = await VideoManager.trimVideo(videoPath, startTime, duration)
```
Create Frames of a Video
```js
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
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((_, index) => {
return (
);
})}
```
Reverse Video
```js
import VideoManager from '@salihgun/react-native-video-processor'
const reversedVideoPath = await VideoManager.reverseVideo(videoPath)
```
Merge Videos
```js
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
```js
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
```js
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)