React Native FFMPEG Package: A Comprehensive Guide to Video Processing Using ffmpeg-kit-react-native

Video processing is a crucial aspect of modern applications, especially those dealing with multimedia. Whether it's compressing videos, adding watermarks, converting formats, or trimming, having a powerful tool like FFMPEG is invaluable. For React Native developers, the ffmpeg-kit-react-native package brings these capabilities directly to mobile platforms (both Android and iOS).
In this blog, we will cover the following topics:

• What is FFMPEG?
• Libraries and converters used by FFMPEG.
• Installing ffmpeg-kit-react-native in a React Native project.
• Android and iOS configuration for full-GPL access.
• Implementing watermark functionality in videos using FFMPEG in React Native.
• Detailed explanation of commands, their parameters, and alternative outcomes.

What is FFMPEG?

Full Form

FFMPEG stands for Fast Forward Moving Pictures Experts Group. It is an open-source software suite designed to handle video, audio, and other multimedia streams. FFMPEG is widely used for tasks such as encoding, decoding, transcoding, muxing, demuxing, streaming, filtering, and playing media files. The core strength of FFMPEG lies in its versatility and ability to handle a wide array of media formats.

How FFMPEG Works

FFMPEG works by using a set of libraries and tools to process multimedia files. It is command-line based, meaning you need to provide specific commands to perform operations like video format conversion, compression, adding watermarks, etc.
It relies on numerous libraries for specific functionalities, including but not limited to:

• libx264: A video encoding library for H.264/MPEG-4 AVC format.
• libmp3lame: A library for encoding MP3 audio.
• libvpx: A video codec library for VP8/VP9 video formats.
• libvorbis: A codec used for Ogg Vorbis audio compression.
• libavfilter: Handles video/audio filtering.
• libswscale: Used for scaling, converting pixel formats, and resizing video.
• libopus: An audio codec that provides superior audio quality.
• libfdk_aac: Advanced Audio Codec, used for encoding AAC audio.

Installing ffmpeg-kit-react-native in React Native

To integrate FFMPEG into your React Native project, you can use the ffmpeg-kit-react-native package. This package allows you to execute FFMPEG commands directly from your React Native app.

Installation Steps
Install the package:
npm install ffmpeg-kit-react-native
OR
yarn add ffmpeg-kit-react-native


For More Info: https://www.npmjs.com/package/ffmpeg-kit-react-native

Android and iOS Configuration for Full-GPL Access

FFMPEG supports different licensing modes like min-gpl, https-gpl, audio, video, full-gpl. To use features like libx264 (H.264 codec), you need Full-GPL configurations. Here's how to configure them for both Android and iOS.

Android Configuration
Open your android/app/build.gradle file and add the following dependency:
gradle:

implementation 'com.arthenica:ffmpeg-kit-full-gpl:4.5.LTS'
Open your android/build.gradle file and add the following dependency:
Gradle:
buildscript{
   ext{
	...
	ffmpegKitPackage = "full-gpl"
...
   }
}


Sync your project with Gradle and ensure that the build completes successfully.


iOS Configuration: 

On iOS, you need to configure the Podfile:
pod 'ffmpeg-kit-full-gpl', '~> 5.1'
OR
pod 'ffmpeg-kit-react-native', :subspecs => ['full-gpl'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'
Then run:
cd ios && pod install && cd ..

‍

Adding a Watermark to Video using FFMPEG

Now, let's implement a common use case: adding a watermark to a video. The goal here is to overlay a watermark image (such as a company logo) on top of the video. In this example, we’ll place the watermark in the top-left corner.

FFMPEG Command Explanation:

Here’s the FFMPEG command we will use:
javascript
Copy code
const command = `-y -i ${video_path} -i ${watermark} -filter_complex "[1][0]scale2ref=oh*mdar:ih*0.08[logo][video];[video][logo]overlay=20:20" -preset ultrafast -loglevel quiet ${video.path}_watermark.mp4`;Breakdown of the Command:

1. -y: This option tells FFMPEG to overwrite the output file without asking for confirmation.
2. -i ${video_path}: Specifies the input video file.
3. -i ${watermark}: Specifies the input image file that will be used as the watermark.
4. -filter_complex: This flag is used to apply complex filters to the inputs.some text
   • [1][0]scale2ref=oh*mdar:ih*0.08[logo][video]: This scales the watermark (logo) to 8% of the video height while maintaining the original aspect ratio.
   • [video][logo]overlay=20:20: This overlays the logo onto the video at the coordinates (20, 20) (which is the top-left corner of the video).
5. -preset ultrafast: This speeds up the encoding process but at the cost of compression efficiency.
6. -loglevel quiet: This suppresses the log output, making the command run quietly in the background.
7. ${video.path}_watermark.mp4: The output file, with _watermark appended to the original video name.

Step-by-Step Implementation

Install and Configure FFMPEG in React Native: Make sure you've installed the FFMPEG package and set up both Android and iOS as discussed earlier.
Import and Use FFMPEG in Your React Native Code:
Here's an example of how you can apply the watermark:

import React from 'react';
import {Button, Text, View} from 'react-native';
import {FFmpegKit, FFmpegKitConfig} from 'ffmpeg-kit-react-native';

const AddWatermark = ({video, watermark}) => {

  const applyWatermark = () => {
    const command = `-y -i ${video} -i ${watermark} -filter_complex "[1][0]scale2ref=oh*mdar:ih*0.08[logo][video];[video][logo]overlay=20:20" -preset ultrafast -loglevel quiet ${video.path}_watermark.mp4`;

    FFmpegKit.execute(command).then(async session => {
      const returnCode = await session.getReturnCode();

      if (FFmpegKitConfig.isSuccess(returnCode)) {
        console.log('Watermark applied successfully!');
      } else {
        console.error('Watermark application failed!');
      }
    });
  };

  return (
    <View>
      <Button title="Add Watermark" onPress={applyWatermark} />
    </View>
  );
};

export default AddWatermark;
Explanation of the Code:
We define a command that applies the watermark to the video.
The command is executed using the FFmpegKit.execute() method.
We handle the success and failure of the operation by checking the returnCode.

Altering Variables for Different Results

In the above command, certain variables can be changed to achieve different results:

1. Watermark Position: The overlay=20:20 portion controls the position of the watermark. Changing the numbers changes the watermark position.some text
   • Example: overlay=W-w-20:H-h-20 will place the watermark in the bottom-right corner.
2. Watermark Size: The scale2ref=oh*mdar:ih*0.08 portion controls the size of the watermark (8% of the video’s height). You can adjust the 0.08 value to increase or decrease the watermark size.some text
   • Example: Changing ih*0.08 to ih*0.12 will make the watermark 12% of the video’s height.
3. Encoding Speed and Quality: The -preset ultrafast setting is the fastest encoding option, but you can adjust it to medium or slow for better compression and quality, although it will take longer.

Conclusion

Using FFMPEG in React Native with the ffmpeg-kit-react-native package provides powerful tools for video manipulation, such as adding watermarks, resizing videos, and more. It supports various multimedia operations and provides cross-platform functionality for Android and iOS, making it an excellent choice for mobile app developers.

By altering parameters in the FFMPEG commands, you can easily tweak the appearance and positioning of your watermark, adjust the size, or enhance video encoding quality. This flexibility makes FFMPEG an essential tool for multimedia handling in mobile applications.

‍