DEV Community

Shaquille Hinds
Shaquille Hinds

Posted on

How To Run FFMPEG-Kit For React Native IOS After Deprecation

#ffmpegkit #reactnative

Step By Step Guide

  1. Edit Your Podfile (inside ios/Podfile): 
   target 'YourApp' do
     # Add these lines above `pod install`:
     pod 'shaquillehinds-ffmpeg-kit-ios', :podspec => 'https://raw.githubusercontent.com/shaquillehinds/ffmpeg/master/shaquillehinds-ffmpeg-kit-ios.podspec'
     pod 'ffmpeg-kit-react-native', :path => '../node_modules/ffmpeg-kit-react-native'

     # ...other pods
   end
Enter fullscreen mode Exit fullscreen mode
  1. Modify ffmpeg-kit-react-native.podspec in node_modules/ffmpeg-kit-react-native: 
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 => "react.native.v#{s.version}" }
  s.default_subspec = 'https' # Just change to whatever subspec you want to use, e.g 'min-gpl'
  s.dependency "React-Core"

  s.subspec 'min' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'min-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'min-gpl' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'min-gpl-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'https' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'https-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'https-gpl' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'https-gpl-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'audio' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'audio-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'video' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'video-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'full' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'full-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'full-gpl' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end

  s.subspec 'full-gpl-lts' do |ss|
      ss.source_files      = '**/FFmpegKitReactNativeModule.m',
                            '**/FFmpegKitReactNativeModule.h'
      ss.dependency 'shaquillehinds-ffmpeg-kit-ios', "6.0.2"
      ss.ios.deployment_target = '12.1'
  end
end
Enter fullscreen mode Exit fullscreen mode

If using Expo Dev just run: 

expo prebuild --clean
Enter fullscreen mode Exit fullscreen mode

For bare native apps

  1. Install Pods: 
   cd ios
   pod install --repo-update
Enter fullscreen mode Exit fullscreen mode
  1. Clean & Rebuild if needed: 
   rm -rf Pods Podfile.lock
   pod install --repo-update
Enter fullscreen mode Exit fullscreen mode
  1. Done — Now iOS uses your custom FFmpeg Pod (shaquillehinds-ffmpeg-kit-ios) via ffmpeg-kit-react-native.

(Optional Step To Persist Changes) Patching ffmpeg-kit-react-native with patch-package

  1. Install patch-package: 
   npm install --save-dev patch-package
Enter fullscreen mode Exit fullscreen mode
  1. Add a Postinstall Script in your package.json: 
   {
     "scripts": {
       "postinstall": "patch-package"
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Edit the Package:
  • Go to node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec
  • Make your changes (e.g., pointing to custom FFmpeg Pods).
  1. Generate the Patch: 
   npx patch-package ffmpeg-kit-react-native
Enter fullscreen mode Exit fullscreen mode

This creates a patch file in patches/.

  1. Commit the Patch:
    • Add and commit the .patch file in patches/.
    • Now every time you install dependencies, your changes are automatically re-applied.

[Expo] Adding a Config Plugin for Custom FFmpeg Pods

  1. Create with-ffmpeg-pod.js at your project root: 
   const {
     withPlugins,
     createRunOncePlugin,
     withDangerousMod,
   } = require("@expo/config-plugins");
   const fs = require("fs");
   const path = require("path");

   function addPodDependency(podfilePath) {
     const podInstallLine = `pod 'shaquillehinds-ffmpeg-kit-ios', :podspec => 'https://raw.githubusercontent.com/shaquillehinds/ffmpeg/master/shaquillehinds-ffmpeg-kit-ios.podspec'`;
     const podInstallLine2 = `pod 'ffmpeg-kit-react-native', :path => '../node_modules/ffmpeg-kit-react-native'`;

     let contents = fs.readFileSync(podfilePath, "utf8");
     if (!contents.includes(podInstallLine)) {
       contents = contents.replace(
         /post_install do \|installer\|/g,
         `${podInstallLine}\n\n  post_install do |installer|`
       );

       contents = contents.replace(
         /post_install do \|installer\|/g,
         `${podInstallLine2}\n\n  post_install do |installer|`
       );

       fs.writeFileSync(podfilePath, contents, "utf8");
     }
   }

   function withMyFFmpegPod(config) {
     return withDangerousMod(config, [
       "ios",
       (cfg) => {
         const podfilePath = path.join(
           cfg.modRequest.platformProjectRoot,
           "Podfile"
         );
         addPodDependency(podfilePath);
         return cfg;
       },
     ]);
   }

   const withFFmpegPod = (config) => {
     return withPlugins(config, [withMyFFmpegPod]);
   };

   module.exports = createRunOncePlugin(
     withFFmpegPod,
     "with-ffmpeg-pod",
     "1.0.0"
   );
Enter fullscreen mode Exit fullscreen mode
  1. Reference the Plugin in your app.json: 
{
  "expo": {
    "name": "MyApp",
    "plugins": [
      ["@config-plugins/ffmpeg-kit-react-native"], // This npm package should be installed
      "./plugins/with-ffmpeg-pod.js"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

(If you’re using app.config.js, add plugins: ["./with-ffmpeg-pod.js"] in the exported config.)

  1. Prebuild and Install: 
   expo prebuild -p ios
   cd ios
   pod install
Enter fullscreen mode Exit fullscreen mode

The generated Podfile will now include:

   pod 'shaquillehinds-ffmpeg-kit-ios', :podspec => '...'
   pod 'ffmpeg-kit-react-native', :path => '../node_modules/ffmpeg-kit-react-native'
Enter fullscreen mode Exit fullscreen mode

That’s it! Your Expo project will automatically inject the custom Pods each time you run expo prebuild, keeping your iOS setup in sync with your custom FFmpeg binaries.

Top comments (1)

Collapse
 
akramsyed002 profile image
AkramSyed002 •

do we still need to install the old one?