Compress Videos in React Native

Last updated on March 21, 2022

In this article we are going to take a look at how to compress videos in React Native as well as general media, such as photos or audio content. It’s standard practice to compress the full size of raw images/videos before they are sent to be stored on the server in order to conserve storage cost, but most importantly to improve the user experience by an order of magnitude.

The library we are taking a look at today is react-native-ffmpeg. We are going to learn how to compress videos and media files in React Native apps by leveraging react-native-ffmpeg open-source framework.

Why Do You Need To Compress Videos in React Native?

Before we jump into implementation details, let’s check out several reasons why you should compress videos in React Native apps:

1. Improve performance of mobile app, by saving data usage, CPU cycles, and data storage costs.

2. Videos in their raw form are large and would take up too much space on your backend storage.

3. Compressed videos are smaller in size and hence are easier to upload even in slower internet.

4. By compressing videos you maintain a uniform encoding format of videos stored on your database.

Now that we have outlined the motivation behind this advanced performance technique, let’s see how we can code it in practice.

How To Compress Videos in React Native

The react-native-ffmpeg library is based on MobileFFmpeg and supports both Android (API level 16 or later) and iOS (SDK 9.3 or later). The framework also supports devices with the following hardware architectures: arm-v7a, arm-v7a-neon, arm64-v8a, x86 and x86_64 on Android and armv7, armv7s, arm64, arm64e, i386 and x86_64 on iOS.

ffmpeg includes built-in encoders for some popular formats. However, there are certain external libraries that needs to be enabled in order to encode specific formats/codecs

Installation

You only need to run: yarn add react-native-ffmpeg

Usage

Let’s take a look at how we embed this library in a cache manager that we use at Instamobile. In our company, we use this piece of infrastructure across all of our React Native Templates, to make our apps a lot more performant by compressing videos at upload time.

The ffmpeg library has a bunch of classes such as RNFFmpeg, RNFFProbe and RNFFmpegConfig.

1. The RNFFmpeg class exposes a static method called execute() that takes a string command with the format -i sourceuri -c:v mpeg4 newSource as an argument and returns a promise.

const BASE_DIR = `${FileSystem.cacheDirectory}expo-cache/`;
const compressVideo = (sourceUri, callback) => {
  console.log("  compressVideo  ++++", sourceUri);
  const newSource = `${BASE_DIR}${uuidv4()}.mp4`;
  RNFFmpeg.execute(`-i ${sourceUri} -c:v mpeg4 ${newSource}`).then((result) => {
    console.log("  did compressVideo  newSource++++", newSource);
    callback(newSource);
  });
};

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Alternatively you can call the other static method executeAsync() which takes an array as an argument: executeAsync("-i", "sourceuri", "-c:v" "mpeg4", "newSource"])

RFFmpeg.listExecutions() lists all the currently running transactions:

RNFFmpeg.listExecutions().then(executionList => {
    executionList.forEach(execution => {
        console.log(`Execution id is ${execution.executionId}`);
        console.log(`
setLogLevel(LogLevel.AV_LOG_WARNING)

We’ll leave these methods as an exercise for the reader. Feel free to look up the official documentation and learn how to use these config methods to improve and debug your code.

That’s all. We have learnt the importance of compression and have explored the major React Native library to compress photos and videos.

We use video compression in our templates to upload media to app feeds in TikTok clone, Social Network App, and Instagram Clone App and also in our Instagram Clone App.