Would you like to support me?
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
Table of Contents
Open Table of Contents
Installation
React Native
For React Native<0.65
yarn add react-native-compressor@rnlessthan65
For React Native 0.65 or greater
yarn add react-native-compressor
Managed Expo
expo install react-native-compressor
Add the Compressor plugin to your Expo config (app.json, app.config.json or app.config.js):
{
"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 (for React Native >= 0.60 only)
Automatic linking is supported for both Android and IOS
Linking (for React Native <= 0.59 only)
Note: If you are using react-native version 0.60 or higher you don't need to link this package.
react-native link react-native-compressor
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-compressorand addCompressor.xcodeproj - In XCode, in the project navigator, select your project. Add
libCompressor.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.reactnativecompressor.CompressorPackage;to the imports at the top of the file - Add
new CompressorPackage()to the list returned by thegetPackages()method
- 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') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-compressor')
Usage
Image
Automatic Image Compression Like Whatsapp
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
import { Image } from 'react-native-compressor';
const result = await Image.compress('file://path_of_file/image.jpg', {
maxWidth: 1000,
quality: 0.8,
});
Video
Automatic Video Compression Like Whatsapp
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
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
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);
Audio
import { Audio } from 'react-native-compressor';
const result = await Audio.compress(
'file://path_of_file/file_example_MP3_2MG.mp3',
{ quality: 'medium' }
);
Background Upload
import { backgroundUpload } from 'react-native-compressor';
const headers = {};
const uploadResult = await backgroundUpload(
url,
fileUrl,
{ httpMethod: 'PUT', headers },
(written, total) => {
console.log(written, total);
}
);
API
Image
ImageCompressor
-
compress(value: string, options?: CompressorOptions): Promise<string>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
maxWidthandmaxHeightare used as a boundary.
CompressorOptions
-
compressionMethod: compressionMethod(default: "manual")if you want to compress images like whatsapp then make this prop
auto. Can be eithermanualorauto, 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
JPEGfile format, can be specified when output isPNGbut will be ignored. -
input: InputType(default: uri)Can be either
uriorbase64, defines the contentents of thevalueparameter. -
output: OutputType(default: jpg)Can be either
jpgorpng, defines the output image format. -
returnableOutputType: ReturnableOutputType(default: uri)Can be either
uriorbase64, defines the Returnable output image format.
Video
-
compress(url: string, options?: videoCompresssionType , onProgress?: (progress: number)): Promise<string> -
cancelCompression(cancellationId: string): voidwe can get cancellationId from
getCancellationIdwhich is the callback method of compress method options
videoCompresssionType
-
compressionMethod: compressionMethod(default: "manual")if you want to compress videos like whatsapp then make this prop
auto. Can be eithermanualorauto, 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: stringbitrate 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: functiongetCancellationIdis a callback function that gives us compress video id, which can be used inVideo.cancelCompressionmethod to cancel the compression
Audio
-
compress(url: string, options?: audioCompresssionType): Promise<string>
audioCompresssionType
-
we can also control bitrate through quality. qualityType can bequality: qualityType(default: medium)low|medium|high
Note: Audio compression will be add soon
Background Upload
-
`backgroundUpload: (url: string, fileUrl: string, options: FileSystemUploadOptions, onProgress?: ((writtem: number, total: number) => void) | undefined) => Promise
-
FileSystemUploadOptions
type FileSystemUploadOptions = (
| {
uploadType?: FileSystemUploadType.BINARY_CONTENT,
}
| {
uploadType: FileSystemUploadType.MULTIPART,
fieldName?: string,
mimeType?: string,
parameters?: Record<string, string>,
}
) & {
headers?: Record<string, string>,
httpMethod?: FileSystemAcceptedUploadHttpMethod,
sessionType?: FileSystemSessionType,
};
Get Metadata Of Video
if you want to get metadata of video than you can use this function
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)
Get Real Path
if you want to convert
content://tofile:///for androidph://tofile:///for IOS
the you can you getRealPath function like this
import { getRealPath } from 'react-native-compressor';
const realPath = await getRealPath(fileUri, 'video'); // file://file_path.extension
-
getRealPath(path: string, type: string = 'video'|'image')
Get Temp file Path
if you wanna make random file path in cache folder then you can use this method like this
import { generateFilePath } from 'react-native-compressor';
const randomFilePathForSaveFile = await generateFilePath('mp4'); // file://file_path.mp4
-
generateFilePath(fileextension: string)
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
![[Unhandled promise rejection: TypeError: null is not an object (evaluating 'NativeVideoCompressor.compress')]](https://avatars.githubusercontent.com/u/89939774?v=4)
![[Android] Returned path should start with `file:///data...` instead of `file://...`](https://avatars.githubusercontent.com/u/3407234?v=4)
5 Nov 19, 2022
6 Feb 22, 2022
288 Jan 8, 2023
11 Sep 13, 2022
28 Dec 4, 2022
105 Jan 3, 2023
1 Jan 20, 2022
14 Nov 22, 2022
57 Nov 13, 2022
1.1k Jan 9, 2023
235 Dec 19, 2022
71 Dec 16, 2022
4 Apr 8, 2022
3 Jan 24, 2022
1.2k Jan 2, 2023
17 Dec 29, 2022
33.2k Dec 31, 2022
18.4k Dec 31, 2022
11.4k Jan 2, 2023