react-native-sili-video-compression v1.2.1
react-native-video-compression
Getting started
$ npm install react-native-sili-video-compression --save
Mostly automatic installation
$ react-native link react-native-sili-video-compression
Manual installation
Open the
package.jsonfile and under dependencies ➜Add "react-native-sili-video-compression" : 1.0.6You should add a comma before the line to keep the JSON format of it.
Open the terminal in the project ➜
Type npm install.
iOS
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-video-compressionand addRNVideoCompression.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNVideoCompression.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
Android
Usage
Import Library
import CompressModule from 'react-native-sili-video-compression';Add External File read write permission into your Manifest.xml.
Add xmlns:tools="http://schemas.android.com/tools" to your <Manifest/> tag in your Manifest.xml.
Manifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
...
...>Add these 2 line to your <application/> tag.
<application
android:name=".MainApplication"
android:label="@string/app_name"
...
android:requestLegacyExternalStorage="true" //Add this
tools:replace="android:allowBackup" //Add this
/>Add Event Emitter for progress update
const EVENT_NAME = new NativeEventEmitter(NativeModules.CompressModule);
this.subscription = EVENT_NAME.addListener(
CompressModule.VIDEO_COMPRESS_PROGRESS_EMITTER,
(value)=> console.log(value));Add success listener
var successCall = (fileName, size, path, message) => {
// Do your work
console.log(message);
};Success method properties
| Property | Type | Description |
|---|---|---|
| fileName | String | File name with absolute path : '/storage/emulated/0/Download/20201003_095653.mp4' |
| size | Long | Size in Bytes |
| path | String | Absolute file path of compressed file : '/storage/emulated/0/Download/20201003_095653.mp4' |
| message | String | Compress comprete message |
Add Failure listener
var errorCall = (errorMessage) => {
// Do your work
console.log(errorMessage);
};Failure method properties
| Property | Type | Description |
|---|---|---|
| errorMessage | String | Error message with reason |
Compression methode for predefined levels
//Check for External file access permission before video conversion
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
CompressModule.compressVideo('/storage/emulated/0/Download/20201003_095653.mp4', CompressModule.LOW,
errorCall, successCall);
// console.log(CompressModule.LOW);
}compressVideo() request Params
| Property | Type | Description |
|---|---|---|
| inputFilePath | String | Absolute path for input file : '/storage/emulated/0/Download/20201003_095653.mp4' |
| compressLevel | Constant | LOW/MEDIUM/HIGH |
| errorCallback | CallBack | ErrorCallback object to handle error events |
| successCallback | CallBack | SuccessCallback object to handle error events |
Predefined 3 level of compress can be done.
| Constant | Description |
|---|---|
CompressModule.LOW | compress level 10% and reduce Height and Width to 50% |
CompressModule.MEDIUM | compress level 50% and reduce Height and Width to 50% |
CompressModule.HIGH | compress level 100% and reduce Height and Width to 50% |
Compression methode by using percentage
//Check for External file access permission before video conversion
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
CompressModule.compressVideoWithQuality('/storage/emulated/0/Download/20201003_095653.mp4', reduceVideoQualityToPercent, reduceHeightWidthToPercent,
errorCall, successCall);
// console.log(CompressModule.LOW);
}compressVideoWithQuality() request Params
| Property | Type | Description |
|---|---|---|
| inputFilePath | String | Absolute path for input file : '/storage/emulated/0/Download/20201003_095653.mp4' |
| reduceVideoQualityToPercent | Float | value should be in between 0 to 1, default value is 0.5 |
| reduceHeightWidthToPercent | Float | value should be in between 0 to 1, default value is 0.5 |
| errorCallback | CallBack | ErrorCallback object to handle error events |
| successCallback | CallBack | SuccessCallback object to handle error events |
VERY IMPORTANT FOR ANDROID Close the Emitter subscription if not using it or in task completion or task failed
this.subscription.remove();License
MIT
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago