Using FFmpegKit Locally in React Native After Retirement

FFmpegKit has been officially retired, but you can still use it by building and integrating it locally. This guide provides step-by-step instructions to set up FFmpegKit in your React Native (iOS Only as of now :/) project. Clone FFmpegKit Repository Navigate to a directory next to your project cd /path/to/your/projects/ git clone https://github.com/arthenica/ffmpeg-kit.git Install Build Dependencies For macOS brew install automake libtool pkg-config brew reinstall autoconf Build FFmpegKit for iOS cd /path/to/your/projects/ffmpeg-kit ./ios.sh -x --disable-arm64e This might take some time. The command builds FFmpegKit with external libraries disabled. Setup Project Structure Create a directory for frameworks in your OG React Native project cd /path/to/your/projects/your-react-native-app mkdir ffmpeg-kit-ios-https Copy Framework Files cp -R /path/to/your/projects/ffmpeg-kit/prebuilt/bundle-apple-xcframework-ios/.xcframework /path/to/your/projects/your-react-native-app/ffmpeg-kit-ios-https/ Create a Local Podspec Create a file named your-app-name-ffmpeg-kit-ios-https.podspec in your project root: require "json" Pod::Spec.new do |s| s.name = "your-app-name-ffmpeg-kit-ios-https" s.version = "6.0.2" s.summary = "FFmpeg Kit iOS Https Shared Framework" s.description = "Includes FFmpeg with gmp and gnutls libraries enabled." s.homepage = "https://github.com/your-username/ffmpeg" s.license = { :type => "LGPL-3.0", :file => "ffmpeg-kit-ios-https/ffmpegkit.xcframework/ios-arm64/ffmpegkit.framework/LICENSE" } s.authors = "your-username" s.platform = :ios s.ios.deployment_target = "12.1" s.requires_arc = true s.static_framework = true s.source = { :git => 'https://github.com/your-username/ffmpeg.git', :tag => s.version.to_s } s.libraries = [ "z", "bz2", "c++", "iconv" ] s.frameworks = [ "AudioToolbox", "AVFoundation", "CoreMedia", "VideoToolbox" ] s.vendored_frameworks = [ "ffmpeg-kit-ios-https/ffmpegkit.xcframework", "ffmpeg-kit-ios-https/libavcodec.xcframework", "ffmpeg-kit-ios-https/libavdevice.xcframework", "ffmpeg-kit-ios-https/libavfilter.xcframework", "ffmpeg-kit-ios-https/libavformat.xcframework", "ffmpeg-kit-ios-https/libavutil.xcframework", "ffmpeg-kit-ios-https/libswresample.xcframework", "ffmpeg-kit-ios-https/libswscale.xcframework", ] end Update FFmpegKit React Native Module cd /path/to/your/projects/ffmpeg-kit/react-native Edit ffmpeg-kit-react-native.podspec: require "json" package = JSON.parse(File.read(File.join(dir, "package.json"))) Pod::Spec.new do |s| s.name = package["name"] s.version = package["version"] s.summary = package["description"] s.homepage = package["homepage"] s.license = package["license"] s.authors = package["author"] s.platform = :ios s.requires_arc = true s.static_framework = true s.source = { :git => 'https://github.com/arthenica/ffmpeg-kit.git', :tag => s.version.to_s } s.dependency "React-Core" s.source_files = '/FFmpegKitReactNativeModule.m', '/FFmpegKitReactNativeModule.h' s.dependency 'your-app-name-ffmpeg-kit-ios-https' s.ios.deployment_target = '12.1' end Edit package.json to use the local FFmpegKit: "dependencies": { "ffmpeg-kit-react-native": "file:../ffmpeg-kit/react-native", // other dependencies... } Update metro config const {getDefaultConfig} = require('@react-native/metro-config'); const path = require('path'); const config = { watchFolders: [ path.resolve(dirname, '../ffmpeg-kit/react-native'), ], resolver: { extraNodeModules: { 'react-native': path.resolve(dirname, 'node_modules/react-native'), 'react': path.resolve(__dirname, 'node_modules/react'), '@babel/runtime': path.resolve(__dirname, 'node_modules/@babel/runtime'), }, blockList: [ /.\/ffmpeg-kit\/react-native\/node_modules\/.*/, ], }, transformer: { getTransformOptions: async () => ({ transform: { inlineRequires: true, }, }), }, }; module.exports = getDefaultConfig(__dirname, config); Update ios podfile of your OG Project target 'YourAppName' do pod 'your-app-name-ffmpeg-kit-ios-https', :path => '..' # Comment out or remove this line if it exists: # pod 'ffmpeg-kit-react-native', :subspecs => ['audio'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec' # Rest of your Podfile... end Install dependencies and run. rm -rf node_modules rm -rf ios/Pods npm install cd ios && pod install && cd .. npx react-native run-ios huge thanks to https://github.com/cvincentcoleman for https://github.com/artheni

Apr 9, 2025 - 22:04

Using FFmpegKit Locally in React Native After Retirement

FFmpegKit has been officially retired, but you can still use it by building and integrating it locally. This guide provides step-by-step instructions to set up FFmpegKit in your React Native (iOS Only as of now :/) project.

Clone FFmpegKit Repository

Navigate to a directory next to your project

cd /path/to/your/projects/
git clone https://github.com/arthenica/ffmpeg-kit.git

Install Build Dependencies

For macOS

brew install automake libtool pkg-config
brew reinstall autoconf

Build FFmpegKit for iOS

cd /path/to/your/projects/ffmpeg-kit
./ios.sh -x --disable-arm64e

This might take some time. The command builds FFmpegKit with external libraries disabled.

Setup Project Structure

Create a directory for frameworks in your OG React Native project

cd /path/to/your/projects/your-react-native-app
mkdir ffmpeg-kit-ios-https

Copy Framework Files

cp -R /path/to/your/projects/ffmpeg-kit/prebuilt/bundle-apple-xcframework-ios/*.xcframework /path/to/your/projects/your-react-native-app/ffmpeg-kit-ios-https/

Create a Local Podspec

Create a file named your-app-name-ffmpeg-kit-ios-https.podspec in your project root:


require "json"

Pod::Spec.new do |s|
  s.name         = "your-app-name-ffmpeg-kit-ios-https"
  s.version      = "6.0.2"
  s.summary      = "FFmpeg Kit iOS Https Shared Framework"
  s.description  = "Includes FFmpeg with gmp and gnutls libraries enabled."
  s.homepage     = "https://github.com/your-username/ffmpeg"
  s.license      = { :type => "LGPL-3.0", :file => "ffmpeg-kit-ios-https/ffmpegkit.xcframework/ios-arm64/ffmpegkit.framework/LICENSE" }
  s.authors      = "your-username"

  s.platform          = :ios
  s.ios.deployment_target = "12.1"
  s.requires_arc      = true
  s.static_framework  = true

  s.source        = { :git => 'https://github.com/your-username/ffmpeg.git', :tag => s.version.to_s }

  s.libraries = [
    "z",
    "bz2",
    "c++",
    "iconv"
  ]

  s.frameworks = [
    "AudioToolbox",
    "AVFoundation",
    "CoreMedia",
    "VideoToolbox"
  ]
  s.vendored_frameworks = [
    "ffmpeg-kit-ios-https/ffmpegkit.xcframework",
    "ffmpeg-kit-ios-https/libavcodec.xcframework",
    "ffmpeg-kit-ios-https/libavdevice.xcframework",
    "ffmpeg-kit-ios-https/libavfilter.xcframework",
    "ffmpeg-kit-ios-https/libavformat.xcframework",
    "ffmpeg-kit-ios-https/libavutil.xcframework",
    "ffmpeg-kit-ios-https/libswresample.xcframework",
    "ffmpeg-kit-ios-https/libswscale.xcframework",
  ]
end

Update FFmpegKit React Native Module

cd /path/to/your/projects/ffmpeg-kit/react-native

Edit ffmpeg-kit-react-native.podspec:

require "json"

package = JSON.parse(File.read(File.join(__dir__, "package.json")))

Pod::Spec.new do |s|
  s.name         = package["name"]
  s.version      = package["version"]
  s.summary      = package["description"]
  s.homepage     = package["homepage"]
  s.license      = package["license"]
  s.authors      = package["author"]

  s.platform          = :ios
  s.requires_arc      = true
  s.static_framework  = true

  s.source = { :git => 'https://github.com/arthenica/ffmpeg-kit.git', :tag => s.version.to_s }

  s.dependency "React-Core"

  s.source_files      = '**/FFmpegKitReactNativeModule.m',
  '**/FFmpegKitReactNativeModule.h'

  s.dependency 'your-app-name-ffmpeg-kit-ios-https'

  s.ios.deployment_target = '12.1'
end

Edit package.json to use the local FFmpegKit:

"dependencies": {
  "ffmpeg-kit-react-native": "file:../ffmpeg-kit/react-native",
  // other dependencies...
}

Update metro config

const {getDefaultConfig} = require('@react-native/metro-config');
const path = require('path');

const config = {
  watchFolders: [
    path.resolve(__dirname, '../ffmpeg-kit/react-native'),
  ],
  resolver: {
    extraNodeModules: {
      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
      'react': path.resolve(__dirname, 'node_modules/react'),
      '@babel/runtime': path.resolve(__dirname, 'node_modules/@babel/runtime'),
    },
    blockList: [
      /.*\/ffmpeg-kit\/react-native\/node_modules\/.*/,
    ],
  },
  transformer: { 
    getTransformOptions: async () => ({
      transform: {
        inlineRequires: true,
      },
    }),
  },
};

module.exports = getDefaultConfig(__dirname, config);

Update ios podfile of your OG Project

target 'YourAppName' do
  pod 'your-app-name-ffmpeg-kit-ios-https', :path => '..'

  # Comment out or remove this line if it exists:
  # pod 'ffmpeg-kit-react-native', :subspecs => ['audio'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'

  # Rest of your Podfile...
end

Install dependencies and run.

rm -rf node_modules
rm -rf ios/Pods
npm install
cd ios && pod install && cd ..
npx react-native run-ios

huge thanks to https://github.com/cvincentcoleman for https://github.com/arthenica/ffmpeg-kit/issues/1144#issuecomment-2784446707

hit the like and maybe follow, if the blog helped you.