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
yarn add react-native-compressor@rnlessthan65yarn add react-native-compressorexpo 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 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.
react-native link react-native-compressor- 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)<
- 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')
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
import { Image } from 'react-native-compressor';
const result = await Image.compress('file://path_of_file/image.jpg', {
maxWidth: 1000,
quality: 0.8,
});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
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);
}
}
);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);import { Audio } from 'react-native-compressor';
const result = await Audio.compress(
'file://path_of_file/file_example_MP3_2MG.mp3',
{ quality: 'medium' }
);import { backgroundUpload } from 'react-native-compressor';
const headers = {};
const uploadResult = await backgroundUpload(
url,
fileUrl,
{ httpMethod: 'PUT', headers },
(written, total) => {
console.log(written, total);
}
);-
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.
-
if you want to compress images like whatsapp then make this prop
auto. Can be eithermanualorauto, defines the Compression Method. -
The maximum width boundary used as the main boundary in resizing a landscape image.
-
The maximum height boundary used as the main boundary in resizing a portrait image.
-
The quality modifier for the
JPEGfile format, can be specified when output isPNGbut will be ignored. -
Can be either
uriorbase64, defines the contentents of thevalueparameter. -
Can be either
jpgorpng, defines the output image format. -
Can be either
uriorbase64, defines the Returnable output image format.
-
we can get cancellationId from
getCancellationIdwhich is the callback method of compress method options
-
if you want to compress videos like whatsapp then make this prop
auto. Can be eithermanualorauto, defines the Compression Method. -
The maximum size can be height in case of portrait video or can be width in case of landscape video.
-
bitrate of video which reduce or increase video size. if compressionMethod will auto then this prop will not work
-
16 means 16mb. default our package do not compress under 16mb video file. minimumFileSizeForCompress will allow us to change this 16mb offset. fixed #26
-
getCancellationIdis a callback function that gives us compress video id, which can be used inVideo.cancelCompressionmethod to cancel the compression
-
we can also control bitrate through quality. qualityType can be
low|medium|high
Note: Audio compression will be add soon
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,
};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"
}
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.extensionif 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.mp4See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT