All Projects → Shobbak → react-native-compressor

Shobbak / react-native-compressor

Licence: MIT license
The lightweight library for compress image, video, and audio with an awesome experience

Programming Languages

java
68154 projects - #9 most used programming language
objective c
16641 projects - #2 most used programming language
typescript
32286 projects
swift
15916 projects
javascript
184084 projects - #8 most used programming language
ruby
36898 projects - #4 most used programming language

Projects that are alternatives of or similar to react-native-compressor

Compress.js
A simple JavaScript based client-side image compression algorithm
Stars: ✭ 86 (-45.22%)
Mutual labels:  compression, compress
lzbase62
LZ77(LZSS) based compression algorithm in base62 for JavaScript.
Stars: ✭ 38 (-75.8%)
Mutual labels:  compression, compress
PLzmaSDK
PLzmaSDK is (Portable, Patched, Package, cross-P-latform) Lzma SDK.
Stars: ✭ 28 (-82.17%)
Mutual labels:  compression, compress
imagezero
Fast Lossless Color Image Compression Library
Stars: ✭ 49 (-68.79%)
Mutual labels:  compression, compress-images
Compressor
An android image compression library.
Stars: ✭ 6,745 (+4196.18%)
Mutual labels:  compression, compress-images
Gtz
A high performance and compression ratio compressor for genomic data, powered by GTXLab of Genetalks.
Stars: ✭ 137 (-12.74%)
Mutual labels:  compression, compress
EasyCompressor
⚡ A compression library that implements many compression algorithms such as LZ4, Zstd, LZMA, Snappy, Brotli, GZip, and Deflate. It helps you to improve performance by reducing Memory Usage and Network Traffic for caching.
Stars: ✭ 167 (+6.37%)
Mutual labels:  compression, compress
Scarab
A system to patch your content files.
Stars: ✭ 38 (-75.8%)
Mutual labels:  content, compression
ZipArchive
A single-class pure VB6 library for zip with ASM speed
Stars: ✭ 38 (-75.8%)
Mutual labels:  compression, compress
http compression
🗜️ Deno HTTP compression middleware
Stars: ✭ 34 (-78.34%)
Mutual labels:  compression, compress
tiny
compress data for better performance
Stars: ✭ 21 (-86.62%)
Mutual labels:  compression
JFileSync3
File Syncing with encryption and compression (partly) compatible with encfs / boxcryptor (classic) volumes for local folders and WebDAV backends. Based on JFileSync - hence the name.
Stars: ✭ 20 (-87.26%)
Mutual labels:  compression
website
Products built with the latest silicon, based on open platform specifications for developers, makers and businesses.
Stars: ✭ 26 (-83.44%)
Mutual labels:  content
ndzip
A High-Throughput Parallel Lossless Compressor for Scientific Data
Stars: ✭ 19 (-87.9%)
Mutual labels:  compression
sms-gaming
🎮 Gaming platform powered by Twilio SMS.
Stars: ✭ 111 (-29.3%)
Mutual labels:  whatsapp
charles-rest
Github chatbot and web-content indexer/searcher
Stars: ✭ 24 (-84.71%)
Mutual labels:  content
clp
Compressed Log Processor (CLP) is a free tool capable of compressing text logs and searching the compressed logs without decompression.
Stars: ✭ 49 (-68.79%)
Mutual labels:  compression
couchdb-mango
Mirror of Apache CouchDB Mango
Stars: ✭ 34 (-78.34%)
Mutual labels:  content
overflow-news
📚 Don't waste time searching for good dev blog posts. Get the latest news here.
Stars: ✭ 32 (-79.62%)
Mutual labels:  content
Graphical notifications Zabbix
No description or website provided.
Stars: ✭ 77 (-50.96%)
Mutual labels:  whatsapp

Would you like to support me?


react-native-compressor

alt text

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

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-compressor and add Compressor.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libCompressor.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. 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 the getPackages() method
  1. 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')
    
  2. 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 maxWidth and maxHeight are used as a boundary.

CompressorOptions

  • 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)

    Can be either uri or base64, defines the Returnable output image format.

Video

  • compress(url: string, options?: videoCompresssionType , onProgress?: (progress: number)): Promise<string>
  • cancelCompression(cancellationId: string): void

    we can get cancellationId from getCancellationId which 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 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: function

    getCancellationId is a callback function that gives us compress video id, which can be used in Video.cancelCompression method to cancel the compression

Audio

  • compress(url: string, options?: audioCompresssionType): Promise<string>

audioCompresssionType

  • quality: qualityType (default: medium)
    we can also control bitrate through quality. qualityType can be 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:// to file:/// for android
  • ph:// to file:/// 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].