Giter VIP home page Giter VIP logo

react-native-compressor's Introduction

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

  1. In XCode, in the project navigator, right click Libraries โžœ Add Files to [your project's name]
  2. Go to node_modules โžœ react-native-compressor and add Compressor.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libCompressor.a to your project's Build Phases โžœ Link 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

react-native-compressor's People

Contributors

alariej avatar closetothe avatar madou90 avatar mlecoq avatar numandev1 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.