Comprehensive Guide on React Native FFMPEG Package for Video Manipulation

In mobile app development, manipulating videos can be a common requirement, whether it’s adding watermarks, audio overlays, trimming videos, or merging multiple clips. FFmpeg is a powerful tool for multimedia processing, and with the ffmpeg-kit-react-native package, React Native developers can harness its power to perform various operations on video files.
This blog will cover some popular use cases with detailed explanations of commands, parameters, and code examples using the ffmpeg-kit-react-native package.

‍
In this blog, we will cover the following topics:

• What is FFMPEG?
• Implementing watermark functionality in videos.
• Adding background audio to a video.
• Adding a Color or Image Overlay on video.
• Merging Videos with Different Aspect Ratios, Sizes, and FPS.
• Controlling Audio Volume of Video.
• Trimming a Video Between Time Frames.
• Implementing watermark functionality in videos using FFMPEG in React Native.

What is FFmpeg?

FFmpeg stands for Fast Forward Moving Picture Experts Group. It is a comprehensive multimedia framework capable of decoding, encoding, transcoding, filtering, and playing almost any type of media format. It supports the majority of video codecs such as libx264 for H.264 encoding, libvpx for VP8/VP9 encoding, and libmp3lame for MP3 audi

Installation of FFMPEG in React Native
To get started, install the ffmpeg-kit-react-native package:
⇒ npm install ffmpeg-kit-react-native


1. Adding a Watermark on the Top-Left Corner of the Video
FFmpeg Command:
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`;

Explanation:
-y: Overwrites the output file if it already exists.
-i ${video}: Specifies the input video file.
-i ${watermark}: Specifies the input watermark image.
-filter_complex: Complex filter operation for scaling and overlaying the watermark.
scale2ref=oh*mdar:ih*0.08[logo][video]: Resizes the watermark (logo) to 8% of the video height while maintaining the aspect ratio.
overlay=20:20: Place the watermark at coordinates (20, 20) in the top-left corner.
-preset ultrafast: Fast encoding with less compression.
-loglevel quiet: Run the command without logs.
Code Example:

import { FFmpegKit } from 'ffmpeg-kit-react-native';

const addWatermark = (video, watermark) => {
  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(session => {
    const returnCode = session.getReturnCode();
    if (returnCode.isSuccess()) {
      console.log('Watermark added successfully!');
    } else {
      console.error('Error adding watermark');
    }
  });
};

Altering Variables:
Positioning: Change overlay=20:20 to adjust the position. Example: overlay=W-w-20:H-h-20 places it in the bottom-right corner.
Size: Adjust ih*0.08 to change the watermark size. Example: ih*0.12 increases the size to 12% of video height.

2. Adding Background Audio to a Video
FFmpeg Command:
const command = `-y -i ${videoPath} -i ${result} -c:v copy -af "volume=0.7" -shortest -loglevel quiet ${videoPath}_mix.mp4`;

Explanation:
-i ${videoPath}: Input video file.
-i ${result}: Input audio file.
-c:v copy: Copies the video codec without re-encoding it.
-af "volume=0.7": Reduces the volume of the audio track to 70%.
-shortest: Trims the audio or video to match the shorter duration between the two.
Code Example:
const addAudioToVideo = (videoPath, audioPath) => {
  const command = `-y -i ${videoPath} -i ${audioPath} -c:v copy -af "volume=0.7" -shortest -loglevel quiet ${videoPath}_mix.mp4`;

  FFmpegKit.execute(command).then(session => {
    const returnCode = session.getReturnCode();
    if (returnCode.isSuccess()) {
      console.log('Audio added successfully!');
    } else {
      console.error('Error adding audio');
    }
  });
};



Altering Variables:
Volume: Adjust "volume=0.7" to control the audio volume. Example: "volume=1.0" keeps the original volume.
Duration: If you want to adjust which media to shorten, modify -shortest.

3. Adding a Color or Image Overlay on Video
FFmpeg Command:
const command = `-y -i ${videoUrl} -vf "color=yellow@0.1:1080x1920,format=yuva420p [bg]; [0:v][bg]overlay=shortest=1" -vsync 2 -max_muxing_queue_size 1024 -preset ultrafast -loglevel quiet ${videoUrl}_whitish.mp4`;

Explanation:
-vf "color=yellow@0.1:1080x1920": Creates a transparent yellow overlay with 10% opacity.
overlay=shortest=1: Overlays the yellow color on the video.
Altering Variables:
Opacity: Change yellow@0.1 to yellow@0.3 to increase the opacity to 30%.
Color: Change yellow to another color like red or blue to change the overlay color.

4. Merging Videos with Different Aspect Ratios, Sizes, and FPS
FFmpeg Command:
const command = `-i ${videoURL} -i ${vid} -filter_complex "[0:v]scale=640:1136:force_original_aspect_ratio=decrease,pad=640:1136:-1:-1,setsar=1,fps=18,format=yuv420p[v0];[1:v]scale=640:1136:force_original_aspect_ratio=decrease,pad=640:1136:-1:-1,setsar=1,fps=18,format=yuv420p[v1];[v0][0:a][v1][1:a]concat=n=2:v=1:a=1[v][a]" -map "[v]" -map "[a]" -c:v libx264 -crf 28 -c:a aac -movflags +faststart -preset ultrafast -loglevel quiet ${sourceOfVideo}_final.mp4`;

Explanation:
scale=640:1136:force_original_aspect_ratio=decrease: Scales the video while maintaining the aspect ratio.
concat=n=2:v=1:a=1: Concatenates two videos and their audio streams.

5. Controlling Audio Volume of Video
FFmpeg Command:
const command = `-y -i ${path} -af "volume=${volume}" -c:v copy -c:a aac -loglevel quiet ${path}_audio.mp4`;

Altering Variables:
Adjust volume=${volume} to change audio levels. For example, volume=2.0 doubles the audio volume.

6. Trimming a Video Between Time Frames
FFmpeg Command:
const command = `-y -i ${path} -ss ${startTime} -t ${endTime} -async 1 -loglevel quiet ${path}_out.mp4`;

Explanation:
-ss ${startTime}: Specifies the starting time of the video segment.
-t ${endTime}: Defines the duration of the trimmed segment.
Altering Variables:
Change startTime and endTime to select different time ranges.

Conclusion

By using the ffmpeg-kit-react-native package, developers can perform powerful video manipulation tasks such as adding watermarks, merging videos, adding audio, and much more. FFMPEG’s versatility makes it an ideal tool for multimedia handling in mobile applications.
Each command can be customized with different parameters to meet the specific needs of your application, offering endless possibilities for video editing.

‍

‍