react-native-ffmpeg

React Native FFmpeg

FFmpeg for React Native

1. Features

• Based on Mobile FFmpeg
• Supports both Android and IOS
• Includes eight different packages with different external libraries enabled in FFmpeg

min	min-gpl	https	https-gpl	audio	video	full	full-gpl
-	vid.stab x264 x265 xvidcore	gnutls	gnutls vid.stab x264 x265 xvidcore	chromaprint lame libilbc libvorbis opencore-amr opus shine soxr speex wavpack	fontconfig freetype fribidi kvazaar libaom libass libiconv libtheora libvpx snappy	chromaprint fontconfig freetype fribidi gmp gnutls kvazaar lame libaom libass libiconv libilbc libtheora libvorbis libvpx libwebp libxml2 opencore-amr opus shine snappy soxr speex wavpack	chromaprint fontconfig freetype fribidi gmp gnutls kvazaar lame libaom libass libiconv libilbc libtheora libvorbis libvpx libwebp libxml2 opencore-amr opus shine snappy soxr speex vid.stab wavpack x264 x265 xvidcore

2. Installation

$ yarn add react-native-ffmpeg

2.1 Android

$ react-native link react-native-ffmpeg

2.2 iOS

• Add react-native-ffmpeg pod to your Podfile

  pod 'react-native-ffmpeg', :podspec => '../node_modules/react-native-ffmpeg/ios/react-native-ffmpeg.podspec'
  

• Run pod install

2.3 Using Packages

Default installation of ReactNativeFFmpeg 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 following steps.

2.3.1 Android

• Edit android/settings.gradle file and modify projectDir for react-native-ffmpeg by appending package name at the end of the path.

  project(':react-native-ffmpeg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ffmpeg/android/<package name>')
  

2.3.2 IOS

• Edit ios/Podfile file and modify podspec path for react-native-ffmpeg by appending package name at the end of the name. After that run pod install again.

  pod 'react-native-ffmpeg-<package name>', :podspec => '../node_modules/react-native-ffmpeg/ios/react-native-ffmpeg-<package name>.podspec'
  

3. Using

• Create and execute commands.

  import { LogLevel, RNFFmpeg } from 'react-native-ffmpeg';
  
  RNFFmpeg.execute('-i file1.mp4 -c:v mpeg4 file2.mp4').then(data => {
      console.log("FFmpeg process exited with rc " + data.rc);
  });
  

• Stop an ongoing operation.

  RNFFmpeg.cancel();
  

• Enable log callback.

  logCallback = (logData) => {
      console.log(logData.log);
  };
  ...
  RNFFmpeg.enableLogCallback(this.logCallback);
  

• Enable statistics callback.

  statisticsCallback = (statisticsData) => {
      console.log('Statistics; frame: ' + statisticsData.videoFrameNumber.toFixed(1) + ', fps: ' + statisticsData.videoFps.toFixed(1) + ', quality: ' + statisticsData.videoQuality.toFixed(1) +
      ', size: ' + statisticsData.size + ', time: ' + statisticsData.time);
  };
  ...
  RNFFmpeg.enableStatisticsCallback(this.statisticsCallback);
  

• Set log level.

  RNFFmpeg.setLogLevel(LogLevel.AV_LOG_WARNING);
  

• Register custom fonts directory.

  RNFFmpeg.setFontDirectory('<folder with fonts>');
  

4. Versions

• master includes latest released version v0.1.3
• development branch includes new features and unreleased fixes

5. Updates

Refer to Changelog for updates.

6. Tips

Apply provided solutions if you encounter one of the following issues.

• Sometimes react-native run-ios fails with weird build errors. Execute commands below 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 is not successful with the following message, delete 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 linking, building may fail with this error. 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')
  

• 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
  
  

7. Test Application

You can see how React Native FFmpeg is used inside an application by running test applications provided under react-native-ffmpeg-test repository. All applications provide the same functionality; performs command execution and video encoding operations. The difference between them is IOS dependency management mechanism applied.

8. License

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 React Native FFmpeg is subject to the GPL v3.0 license.

Digital assets used in test applications are published in the public domain.

9. Contributing

Feel free to submit issues or pull requests.

10. See Also

• FFmpeg
• Mobile FFmpeg Wiki
• FFmpeg License and Legal Considerations

Changelog

0.1.3 - 2018-09-28

• React.project deleted from Xcode workspace
• React dependency added, header search path customizations removed for .podspec files
• google() method replaced with maven repository declaration in build.gradle files
• test application removed