DEV Community

Cover image for Using FFmpegKit Locally in React Native After Retirement
Utkarsh Shrivastava
Utkarsh Shrivastava

Posted on

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 
Enter fullscreen mode Exit fullscreen mode

Install Build Dependencies

For macOS

brew install automake libtool pkg-config
brew reinstall autoconf
Enter fullscreen mode Exit fullscreen mode

Build FFmpegKit for iOS

cd /path/to/your/projects/ffmpeg-kit
./ios.sh -x --disable-arm64e
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Edit package.json to use the local FFmpegKit:

"dependencies": {
  "ffmpeg-kit-react-native": "file:../ffmpeg-kit/react-native",
  // other dependencies...
}
Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Install dependencies and run.

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

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.

Top comments (6)

Collapse
 
akramsyed002 profile image
AkramSyed002

Installing ffmpeg-kit-ios-https (6.0)

[!] Error installing ffmpeg-kit-ios-https
[!] /usr/bin/curl -f -L -o /var/folders/xj/0zdxq6xx3llcy_k9b0kq1vqr0000gn/T/d20250430-75965-5nztc9/file.zip github.com/arthenica/ffmpeg-kit/re... --create-dirs --netrc-optional --retry 2 -A 'CocoaPods/1.16.2 cocoapods-downloader/2.1'

% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 9 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
curl: (56) The requested URL returned error: 404

still getting this

Collapse
 
parth_vanra_16648fa56b22d profile image
Parth Vanra • Edited

Hi @utkarsh4517 ,

I've used this before and it was working perfectly, but now it's only working on iOS and not on Android.

Is there any update or fix available for this issue?

Could not determine the dependencies of task ':app:processDebugResources'.

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not find com.arthenica:ffmpeg-kit-https:6.0-2.
Searched in the following locations:
- oss.sonatype.org/content/repositor...
- repo.maven.apache.org/maven2/com/a...
- file:/Users/bisworanjan/Desktop/RNLiveProjects/QyteniteMobile/node_modules/jsc-android/dist/com/arthenica/ffmpeg-kit-https/6.0-2/ffmpeg-kit-https-6.0-2.pom
- dl.google.com/dl/android/maven2/co...
- jitpack.io/com/arthenica/ffmpeg-ki...
Required by:
project :app > project :ffmpeg-kit-react-native

Collapse
 
daya_mangukiya_1b543ccd35 profile image
Daya Mangukiya

Hi @utkarsh4517

I've used this before and it was working perfectly, but now it's only working on iOS and not on Android for react native cli project.

Is there any update or fix available for this issue?

Getting this runtime error in android:- Could not determine the dependencies of task ':app:processDebugResources'.

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not find com.arthenica:ffmpeg-kit-https:6.0-2.
Searched in the following locations:

  • oss.sonatype.org/content/repositor...
  • repo.maven.apache.org/maven2/com/a...
  • file:/Users/bisworanjan/Desktop/RNLiveProjects/QyteniteMobile/node_modules/jsc-android/dist/com/arthenica/ffmpeg-kit-https/6.0-2/ffmpeg-kit-https-6.0-2.pom
  • dl.google.com/dl/android/maven2/co...
  • jitpack.io/com/arthenica/ffmpeg-ki... Required by: project :app > project :ffmpeg-kit-react-native
Collapse
 
akash_maurya_d177877eed58 profile image
Akash Maurya

Hey, did you manage to solve it?

Collapse
 
loschenbd profile image
loschenbd • Edited

Thanks for writing up this walkthrough! Once this is done, can I run an EAS build via Expo, and will it build properly on an EAS server, or will additional setup be required for that?

Collapse
 
shaquille_hinds_cd216994c profile image
Shaquille Hinds • Edited

If you want to run with expo follow this guide:

dev.to/shaquille_hinds_cd216994c/h...