This library compress image, video and audio
npm install @imsourajit/react-native-compressor---
Compress videos, images and audio before upload

react-native-compressor package is a set of functions that allow you compress Image,Audio and Video
If you find this package useful hit the star 🌟
Open Table of Contents
- Installation
- For React Native
- For React Native<0.65
- For React Native 0.65 or greater
- Managed Expo
- Usage
- Image
- Automatic Image Compression Like Whatsapp
- Manual Image Compression
- ImageCompressor API Docs
- Video
- Automatic Video Compression Like Whatsapp
- Manual Video Compression
- Cancel Video Compression
- Video Api Docs
- Audio
- Background Upload
* Other Utilities
- Background Upload
- Get Metadata Of Video
- Get Real Path
- Get Temp file Path
#### For React Native<0.65
``sh`
yarn add react-native-compressor@rnlessthan65
#### For React Native 0.65 or greater
`sh`
yarn add react-native-compressor
``
expo install react-native-compressor
Add the Compressor plugin to your Expo config (app.json, app.config.json or app.config.js):
`json`
{
"name": "my app",
"plugins": ["react-native-compressor"]
}
Finally, compile the mods:
``
expo prebuild
To apply the changes, build a new binary with EAS:
``
eas build
Automatic linking is supported for both Android and IOS
Note: If you are using react-native version 0.60 or higher you don't need to link this package.
`sh`
react-native link react-native-compressor
#### iOS
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]node_modules
2. Go to ➜ react-native-compressor and add Compressor.xcodeprojlibCompressor.a
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With LibrariesCmd+R
4. Run your project ()<
#### Android
1. Open up android/app/src/main/java/[...]/MainActivity.java
- Add import com.reactnativecompressor.CompressorPackage; to the imports at the top of the filenew CompressorPackage()
- Add to the list returned by the getPackages() method
2. Append the following lines to android/settings.gradle:`
`
include ':react-native-compressor'
project(':react-native-compressor').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-compressor/android')
android/app/build.gradle
3. Insert the following lines inside the dependencies block in :`
`
compile project(':react-native-compressor')
##### Automatic Image Compression Like Whatsapp
`js
import { Image } from 'react-native-compressor';
const result = await Image.compress('file://path_of_file/image.jpg', {
compressionMethod: 'auto',
});
`
Here is this package comparison of images compression with WhatsApp
##### Manual Image Compression
`js
import { Image } from 'react-native-compressor';
const result = await Image.compress('file://path_of_file/image.jpg', {
maxWidth: 1000,
quality: 0.8,
});
`
##### Automatic Video Compression Like Whatsapp
`js
import { Video } from 'react-native-compressor';
const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{
compressionMethod: 'auto',
},
(progress) => {
if (backgroundMode) {
console.log('Compression Progress: ', progress);
} else {
setCompressingProgress(progress);
}
}
);
`
Here is this package comparison of video compression with WhatsApp
##### Manual Video Compression
`js
import { Video } from 'react-native-compressor';
const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{},
(progress) => {
if (backgroundMode) {
console.log('Compression Progress: ', progress);
} else {
setCompressingProgress(progress);
}
}
);
`
##### Cancel Video Compression
`js
import { Video } from 'react-native-compressor';
let cancellationVideoId = '';
const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{
compressionMethod: 'auto',
// getCancellationId for get video id which we can use for cancel compression
getCancellationId: (cancellationId) =>
(cancellationVideoId = cancellationId),
},
(progress) => {
if (backgroundMode) {
console.log('Compression Progress: ', progress);
} else {
setCompressingProgress(progress);
}
}
);
// we can cancel video compression by calling cancelCompression with cancel video id which we can get from getCancellationId function while compression
Video.cancelCompression(cancellationVideoId);
`
`js
import { Audio } from 'react-native-compressor';
const result = await Audio.compress(
'file://path_of_file/file_example_MP3_2MG.mp3',
{ quality: 'medium' }
);
`
`js
import { backgroundUpload } from 'react-native-compressor';
const headers = {};
const uploadResult = await backgroundUpload(
url,
fileUrl,
{ httpMethod: 'PUT', headers },
(written, total) => {
console.log(written, total);
}
);
`
- ###### compress(value: string, options?: CompressorOptions): Promise
Compresses the input file URI or base-64 string with the specified options. Promise returns a string after compression has completed. Resizing will always keep the original aspect ratio of the image, the maxWidth and maxHeight are used as a boundary.
- ###### compressionMethod: compressionMethod (default: "manual")
if you want to compress images like whatsapp then make this prop auto. Can be either manual or auto, defines the Compression Method.
- ###### maxWidth: number (default: 1280)
The maximum width boundary used as the main boundary in resizing a landscape image.
- ###### maxHeight: number (default: 1280)
The maximum height boundary used as the main boundary in resizing a portrait image.
- ###### quality: number (default: 0.8)
The quality modifier for the JPEG file format, can be specified when output is PNG but will be ignored.
- ###### input: InputType (default: uri)
Can be either uri or base64, defines the contentents of the value parameter.
- ###### output: OutputType (default: jpg)
Can be either jpg or png, defines the output image format.
- ###### returnableOutputType: ReturnableOutputType (default: uri)uri
Can be either or base64, defines the Returnable output image format.
- ###### compress(url: string, options?: videoCompresssionType , onProgress?: (progress: number)): Promise
- ###### cancelCompression(cancellationId: string): voidgetCancellationId
we can get cancellationId from which is the callback method of compress method options
- ###### compressionMethod: compressionMethod (default: "manual")
if you want to compress videos like whatsapp then make this prop auto. Can be either manual or auto, defines the Compression Method.
- ###### maxSize: number (default: 640)
The maximum size can be height in case of portrait video or can be width in case of landscape video.
- ###### bitrate: string
bitrate of video which reduce or increase video size. if compressionMethod will auto then this prop will not work
- ###### minimumFileSizeForCompress: number (default: 16)
16 means 16mb. default our package do not compress under 16mb video file. minimumFileSizeForCompress will allow us to change this 16mb offset. fixed #26
- ###### getCancellationId: functiongetCancellationId
is a callback function that gives us compress video id, which can be used in Video.cancelCompression method to cancel the compression
- ###### compress(url: string, options?: audioCompresssionType): Promise
- ###### quality: qualityType (default: medium)low
we can also control bitrate through quality. qualityType can be | medium | high
Note: Audio compression will be add soon
- ###### backgroundUpload: (url: string, fileUrl: string, options: FileSystemUploadOptions, onProgress?: ((writtem: number, total: number) => void) | undefined) => Promise
- ###### FileSystemUploadOptions
``js`
type FileSystemUploadOptions = (
| {
uploadType?: FileSystemUploadType.BINARY_CONTENT,
}
| {
uploadType: FileSystemUploadType.MULTIPART,
fieldName?: string,
mimeType?: string,
parameters?: Record
}
) & {
headers?: Record
httpMethod?: FileSystemAcceptedUploadHttpMethod,
sessionType?: FileSystemSessionType,
};
if you want to get metadata of video than you can use this function
`js
import { getVideoMetaData } from 'react-native-compressor';
const metaData = await getVideoMetaData(filePath);
`
``
{
"duration": "6",
"extension": "mp4",
"height": "1080",
"size": "16940.0",
"width": "1920"
}
- ###### getVideoMetaData(path: string)
if you want to convert
- content:// to file:/// for androidph://
- to file:/// for IOS
the you can you getRealPath function like this
`js
import { getRealPath } from 'react-native-compressor';
const realPath = await getRealPath(fileUri, 'video'); // file://file_path.extension
`
- ###### getRealPath(path: string, type: string = 'video'|'image')
if you wanna make random file path in cache folder then you can use this method like this
`js
import { generateFilePath } from 'react-native-compressor';
const randomFilePathForSaveFile = await generateFilePath('mp4'); // file://file_path.mp4
`
- ##### generateFilePath(fileextension: string)`
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT