react-native-ffmpeg
Advanced tools
FFmpeg for React Native
Based on MobileFFmpeg
Includes both FFmpeg and FFprobe
Supports
Both Android and iOS
FFmpeg v4.1, v4.2, v4.3 and v4.4-dev releases
arm-v7a, arm-v7a-neon, arm64-v8a, x86 and x86_64 architectures on Android
Android API Level 16 or later
armv7, armv7s, arm64, arm64e, i386 and x86_64 architectures on iOS
iOS SDK 9.3 or later
25 external libraries
fontconfig, freetype, fribidi, gmp, gnutls, kvazaar, lame, libaom, libass, libiconv, libilbc, libtheora, libvorbis, libvpx, libwebp, libxml2, opencore-amr, opus, shine, snappy, soxr, speex, twolame, vo-amrwbenc, wavpack
4 external libraries with GPL license
vid.stab, x264, x265, xvidcore
Concurrent execution
zlib and MediaCodec Android system libraries
bzip2, iconv, libuuid, zlib system libraries and AudioToolbox, VideoToolbox, AVFoundation system frameworks
Includes Typescript definitions
Licensed under LGPL 3.0, can be customized to support GPL v3.0
$ yarn add react-native-ffmpeg
On React Native < 0.60, manually link the module by running the following command.
$ react-native link react-native-ffmpeg
On React Native >= 0.60,
use_native_modules! to your Podfile and run pod installOn React Native < 0.60,
Add react-native-ffmpeg pod to your Podfile and run pod install
pod 'react-native-ffmpeg', :podspec => '../node_modules/react-native-ffmpeg/react-native-ffmpeg.podspec'
DO NOT USE react-native link on iOS. react-native link breaks Cocoapods dependencies.
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. For example, to encode an mp3 file you need lame or
shine library enabled. You have to install a react-native-ffmpeg package that has at least one of them inside.
To encode an h264 video, you need to install a package with x264 inside. To encode vp8 or vp9 videos, you need
a react-native-ffmpeg package with libvpx inside.
react-native-ffmpeg provides eight packages that include different sets of external libraries. These packages are
named according to the external libraries included in them. Below you can see which libraries are enabled in each
package.
| min | min-gpl | https | https-gpl | audio | video | full | full-gpl | |
|---|---|---|---|---|---|---|---|---|
| external libraries | - | vid.stab x264 x265 xvidcore | gmp gnutls | gmp gnutls vid.stab x264 x265 xvidcore | lame libilbc libvorbis opencore-amr opus shine soxr speex twolame vo-amrwbenc wavpack | fontconfig freetype fribidi kvazaar libaom libass libiconv libtheora libvpx libwebp snappy | fontconfig freetype fribidi gmp gnutls kvazaar lame libaom libass libiconv libilbc libtheora libvorbis libvpx libwebp libxml2 opencore-amr opus shine snappy soxr speex twolame vo-amrwbenc wavpack | fontconfig freetype fribidi gmp gnutls kvazaar lame libaom libass libiconv libilbc libtheora libvorbis libvpx libwebp libxml2 opencore-amr opus shine snappy soxr speex twolame vid.stab vo-amrwbenc wavpack x264 x265 xvidcore |
| android system libraries | zlib MediaCodec | |||||||
| ios system libraries | zlib AudioToolbox AVFoundation iconv VideoToolbox bzip2 |
Installation of react-native-ffmpeg using instructions in 2.1 and 2.2 enables the default package, which is based on https package.
It is possible to enable other installed packages using the following steps.
Edit android/build.gradle file and define package name in ext.reactNativeFFmpegPackage variable.
ext {
reactNativeFFmpegPackage = "<package name>"
}
Edit ios/Podfile file and add package name as subspec. After that run pod install again.
pod 'react-native-ffmpeg/<package name>', :podspec => '../node_modules/react-native-ffmpeg/react-native-ffmpeg.podspec'
Note that if you have use_native_modules! in your Podfile, specifying a subspec may cause the following error.
You can fix it by defining react-native-ffmpeg dependency before use_native_modules! in your Podfile.
[!] There are multiple dependencies with different sources for `react-native-ffmpeg` in `Podfile`:
- react-native-ffmpeg (from `../node_modules/react-native-ffmpeg`)
- react-native-ffmpeg/<package name> (from `../node_modules/react-native-ffmpeg/react-native-ffmpeg.podspec`)
The following table shows all package names defined for react-native-ffmpeg.
| Package | Main Release | LTS Release |
|---|---|---|
| min | min | min-lts |
| min-gpl | min-gpl | min-gpl-lts |
| https | https | https-lts |
| https-gpl | https-gpl | https-gpl-lts |
| audio | audio | audio-lts |
| video | video | video-lts |
| full | full | full-lts |
| full-gpl | full-gpl | full-gpl-lts |
react-native-ffmpeg is published in two different variants: Main Release and LTS Release. Both releases share the
same source code but is built with different settings. Below you can see the differences between the two.
In order to install the LTS variant, install the https-lts package using instructions in 2.3 or append -lts to
the package name you are using.
| Main Release | LTS Release | |
|---|---|---|
| Android API Level | 24 | 16 |
| Android Camera Access | Yes | - |
| Android Architectures | arm-v7a-neon arm64-v8a x86 x86-64 | arm-v7a arm-v7a-neon arm64-v8a x86 x86-64 |
| Xcode Support | 10.1 | 7.3.1 |
| iOS SDK | 11.0 | 9.3 |
| iOS AVFoundation | Yes | - |
| iOS Architectures | arm64 x86-64 x86-64-mac-catalyst | armv7 arm64 i386 x86-64 |
Execute synchronous FFmpeg commands.
import { LogLevel, RNFFmpeg } from 'react-native-ffmpeg';
RNFFmpeg.execute('-i file1.mp4 -c:v mpeg4 file2.mp4').then(result => console.log(`FFmpeg process exited with rc=${result}.`));
import { LogLevel, RNFFmpeg } from 'react-native-ffmpeg';
RNFFmpeg.executeWithArguments(["-i", "file1.mp4", "-c:v", "mpeg4", "file2.mp4"]).then(result => console.log(`FFmpeg process exited with rc=${result}.`));
Execute asynchronous FFmpeg commands.
import { LogLevel, RNFFmpeg } from 'react-native-ffmpeg';
RNFFmpeg.executeAsync('-i file1.mp4 -c:v mpeg4 file2.mp4', completedExecution => {
if (completedExecution.returnCode === 0) {
console.log("FFmpeg process completed successfully");
} else {
console.log(`FFmpeg process failed with rc=${completedExecution.returnCode}.`);
}
}).then(executionId => console.log(`Async FFmpeg process started with executionId ${executionId}.`));
Execute FFprobe commands.
import { LogLevel, RNFFprobe } from 'react-native-ffmpeg';
RNFFprobe.execute('-i file1.mp4').then(result => console.log(`FFprobe process exited with rc=${result}.`));
import { LogLevel, RNFFprobe } from 'react-native-ffmpeg';
RNFFprobe.executeWithArguments(["-i", "file1.mp4"]).then(result => console.log(`FFmpeg process exited with rc=${result}.`));
Check execution output. Zero represents successful execution, non-zero values represent failure.
RNFFmpegConfig.getLastReturnCode().then(returnCode => {
console.log(`Last return code: ${returnCode}`);
});
RNFFmpegConfig.getLastCommandOutput().then(output => {
console.log(`Last command output: ${output}`);
});
Stop ongoing FFmpeg operations. Note that these two functions do not wait for termination to complete and return immediately.
RNFFmpeg.cancel();
RNFFmpeg.cancelExecution(executionId);
Get media information for a file.
RNFFprobe.getMediaInformation('<file path or uri>').then(information => {
console.log('Result: ' + JSON.stringify(information));
});
RNFFprobe.getMediaInformation('<file path or uri>').then(information => {
if (information.getMediaProperties() !== undefined) {
if (information.getMediaProperties().filename !== undefined) {
console.log(`Path: ${information.getMediaProperties().filename}`);
}
if (information.getMediaProperties().format_name !== undefined) {
console.log(`Format: ${information.getMediaProperties().format_name}`);
}
if (information.getMediaProperties().bit_rate !== undefined) {
console.log(`Bitrate: ${information.getMediaProperties().bit_rate}`);
}
if (information.getMediaProperties().duration !== undefined) {
console.log(`Duration: ${information.getMediaProperties().duration}`);
}
if (information.getMediaProperties().start_time !== undefined) {
console.log(`Start time: ${information.getMediaProperties().start_time}`);
}
if (information.getMediaProperties().nb_streams !== undefined) {
console.log(`Number of streams: ${information.getMediaProperties().nb_streams.toString()}`);
}
let tags = information.getMediaProperties().tags;
if (tags !== undefined) {
Object.keys(tags).forEach((key) => {
console.log(`Tag: ${key}:${tags[key]}`);
});
}
let streams = information.getStreams();
if (streams !== undefined) {
for (let i = 0; i < streams.length; ++i) {
let stream = streams[i];
console.log("---");
if (stream.getAllProperties().index !== undefined) {
console.log(`Stream index: ${stream.getAllProperties().index.toString()}`);
}
if (stream.getAllProperties().codec_type !== undefined) {
console.log(`Stream type: ${stream.getAllProperties().codec_type}`);
}
if (stream.getAllProperties().codec_name !== undefined) {
console.log(`Stream codec: ${stream.getAllProperties().codec_name}`);
}
}
}
}
});
Enable log callback and redirect all FFmpeg/FFprobe logs to a console/file/widget.
logCallback = (log) => {
this.appendLog(`${log.executionId}:${log.message}`);
};
...
RNFFmpegConfig.enableLogCallback(this.logCallback);
Enable statistics callback and follow the progress of an ongoing FFmpeg operation.
statisticsCallback = (statistics) => {
console.log(`Statistics; executionId: ${statistics.executionId}, video frame number: ${statistics.videoFrameNumber}, video fps: ${statistics.videoFps}, video quality: ${statistics.videoQuality}, size: ${statistics.size}, time: ${statistics.time}, bitrate: ${statistics.bitrate}, speed: ${statistics.speed}`);
};
...
RNFFmpegConfig.enableStatisticsCallback(this.statisticsCallback);
Poll statistics without implementing statistics callback.
RNFFmpegConfig.getLastReceivedStatistics().then(statistics => console.log('Stats: ' + JSON.stringify(statistics)));
List ongoing executions.
RNFFmpeg.listExecutions().then(executionList => {
executionList.forEach(execution => {
console.log(`Execution id is ${execution.executionId}`);
console.log(`Execution start time is ` + new Date(execution.startTime));
console.log(`Execution command is ${execution.command}`);
});
});
Set log level.
RNFFmpegConfig.setLogLevel(LogLevel.AV_LOG_WARNING);
Register your own fonts by specifying a custom fonts directory, so they are available to use in FFmpeg filters. Please note that this function can not work on relative paths, you need to provide full file system path.
RNFFmpegConfig.setFontDirectory('<folder with fonts>', null);
RNFFmpegConfig.setFontDirectory('<folder with fonts>', { my_easy_font_name: "my complex font name" });
Use your own fontconfig configuration.
RNFFmpegConfig.setFontconfigConfigurationPath('<fontconfig configuration directory>');
Disable log functionality of the library. Logs will not be printed to console and log callback will be disabled.
RNFFmpegConfig.disableLogs();
Disable statistics functionality of the library. Statistics callback will be disabled but the last received statistics data will be still available.
RNFFmpegConfig.disableStatistics();
Create new FFmpeg pipe.
RNFFmpegConfig.registerNewFFmpegPipe().then(pipe => {
console.log("New ffmpeg pipe: " + pipe1);
});
You can see how react-native-ffmpeg is used inside an application by running test application provided under the
react-native-ffmpeg-test repository. It supports command
execution, video encoding, accessing https, encoding audio, burning subtitles, video stabilisation, pipe operations
and concurrent command execution.
Apply provided solutions if you encounter one of the following issues.
react-native-ffmpeg uses file system paths, it does not know what an assets folder or a project folder is. So you can't use resources on those folders directly, you need to provide full paths of those resources.
If react-native-ffmpeg release builds on Android fail with the following exception, make sure that mavenCentral() is
defined as a repository in your build.gradle and it is listed before jcenter().
I/ReactNativeJS: Loading react-native-ffmpeg.
I/mobile-ffmpeg: Loading mobile-ffmpeg.
E/mobile-ffmpeg: OnLoad thread failed to GetStaticMethodID for log.
java_vm_ext.cc:577] JNI DETECTED ERROR IN APPLICATION: JNI NewGlobalRef called with pending exception java.lang.NoSuchMethodError: no static method "Lcom/arthenica/mobileffmpeg/Config;.log(JI[B)V"
java_vm_ext.cc:577] at java.lang.String java.lang.Runtime.nativeLoad(java.lang.String, java.lang.ClassLoader, java.lang.Class) (Runtime.java:-2)
java_vm_ext.cc:577] at java.lang.String java.lang.Runtime.nativeLoad(java.lang.String, java.lang.ClassLoader) (Runtime.java:1131)
java_vm_ext.cc:577] at void java.lang.Runtime.loadLibrary0(java.lang.ClassLoader, java.lang.Class, java.lang.String) (Runtime.java:1085)
java_vm_ext.cc:577] at void java.lang.Runtime.loadLibrary0(java.lang.Class, java.lang.String) (Runtime.java:1008)
java_vm_ext.cc:577] at void java.lang.System.loadLibrary(java.lang.String) (System.java:1664)
java_vm_ext.cc:577] at void com.arthenica.mobileffmpeg.Config.<clinit>() (:-1)
java_vm_ext.cc:577] at void com.arthenica.mobileffmpeg.Config.c(com.arthenica.mobileffmpeg.h) (:-1)
java_vm_ext.cc:577] at void com.arthenica.reactnative.RNFFmpegModule.enableLogEvents() (:-1)
java_vm_ext.cc:577] at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
java_vm_ext.cc:577] at void com.facebook.react.bridge.JavaMethodWrapper.invoke(com.facebook.react.bridge.JSInstance, com.facebook.react.bridge.ReadableArray) (:-1)
java_vm_ext.cc:577] at void com.facebook.react.bridge.JavaModuleWrapper.invoke(int, com.facebook.react.bridge.ReadableNativeArray) (:-1)
java_vm_ext.cc:577] at void com.facebook.react.bridge.queue.NativeRunnable.run() (:-2)
java_vm_ext.cc:577] at void android.os.Handler.handleCallback(android.os.Message) (Handler.java:938)
java_vm_ext.cc:577] at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:99)
java_vm_ext.cc:577] at void com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(android.os.Message) (:-1)
java_vm_ext.cc:577] at void android.os.Looper.loop() (Looper.java:223)
java_vm_ext.cc:577] at void com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run() (:-1)
java_vm_ext.cc:577] at void java.lang.Thread.run() (Thread.java:923)
java_vm_ext.cc:577]
java_vm_ext.cc:577] in call to NewGlobalRef
java_vm_ext.cc:577] from java.lang.String java.lang.Runtime.nativeLoad(java.lang.String, java.lang.ClassLoader, java.lang.Class)
Enabling ProGuard on releases older than v0.3.3 causes linking errors. Please add the following rule inside your proguard-rules.pro file to preserve necessary method names and prevent linking errors.
-keep class com.arthenica.mobileffmpeg.Config {
native <methods>;
void log(int, byte[]);
void statistics(int, float, float, long , int, double, double);
}
ffmpeg requires a valid fontconfig configuration to render subtitles. Unfortunately, Android does not include a default fontconfig configuration.
So if you do not register a font or specify a fontconfig configuration under Android, then the burning process will not produce any errors but subtitles won't be burned in your file.
You can overcome this situation by registering a font using RNFFmpeg.setFontDirectory method or specifying your own fontconfig configuration using RNFFmpeg.setFontconfigConfigurationPath method.
By default, Xcode compresses PNG files during packaging. If you use .png files in your commands make sure you set the following two settings to NO. If one of them is set to YES, your operations may fail with Error while decoding stream #0:0: Generic error in an external library error.
Sometimes react-native run-ios fails with weird build errors. Execute the following commands and try again.
rm -rf ios/Pods ios/build ios/Podfile.lock
cd ios
pod install
Add "postinstall": "sed -i '' 's\/#import <RCTAnimation\\/RCTValueAnimatedNode.h>\/#import \"RCTValueAnimatedNode.h\"\/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h"
line to the scripts section of your package.json as recommended in react-native issue # 13198,
if your build receives the following error for iOS.
../node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h:10:9: fatal error: 'RCTAnimation/RCTValueAnimatedNode.h' file not found
#import <RCTAnimation/RCTValueAnimatedNode.h>
^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
When pod install fails with the following message, delete the Podfile.lock file and run pod install again.
[!] Unable to find a specification for 'react-native-ffmpeg'.
If react-native link is used for iOS, build may fail with the error below. Running pod install again fixes this issue.
../node_modules/react-native-ffmpeg/ios/Pods/Target Support Files/Pods-ReactNativeFFmpeg/Pods-ReactNativeFFmpeg.debug.xcconfig: unable to open file (in target "ReactNativeFFmpeg" in project "ReactNativeFFmpeg") (in target 'ReactNativeFFmpeg')
On React Native < 0.60, using cocoapods for iOS dependency management may produce duplicate symbols for libReact.a and libyoga.a.
Add the following block to your Podfile and run pod install again.
post_install do |installer|
installer.pods_project.targets.each do |target|
targets_to_ignore = %w(React yoga)
if targets_to_ignore.include? target.name
target.remove_from_project
end
end
end
Some react-native-ffmpeg packages include libc++_shared.so native library. If a second library which also includes libc++_shared.so is added as a dependency, gradle fails with More than one file was found with OS independent path 'lib/x86/libc++_shared.so' error message.
You can fix this error by adding the following block into your build.gradle.
android {
packagingOptions {
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
pickFirst 'lib/arm64-v8a/libc++_shared.so'
}
}
Refer to Changelog for updates.
This project is licensed under the LGPL v3.0. However, if installation is customized to use a package with -gpl
postfix (min-gpl, https-gpl, full-gpl) then ReactNativeFFmpeg is subject to the GPL v3.0 license.
In test application; embedded fonts are licensed under the SIL Open Font License, other digital assets are published in the public domain.
It is not clearly explained in their documentation, but it is believed that FFmpeg, kvazaar, x264 and x265
include algorithms which are subject to software patents. If you live in a country where software algorithms are
patentable then you'll probably need to pay royalty fees to patent holders. We are not lawyers though, so we recommend
that you seek legal advice first. See FFmpeg Patent Mini-FAQ.
Feel free to submit issues or pull requests.
Please note that master branch includes only the latest released source code. Changes planned for the next release
are implemented under the development branch. Therefore, if you want to create a pull request, please open it against
the development.
0.5.2 - 2021-09-08
FAQs
FFmpeg for React Native
The npm package react-native-ffmpeg receives a total of 240 weekly downloads. As such, react-native-ffmpeg popularity was classified as not popular.
We found that react-native-ffmpeg demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.