DEV Community: Utkarsh Shrivastava

Using FFmpegKit Locally in React Native After Retirement

Utkarsh Shrivastava — Wed, 09 Apr 2025 20:35:46 +0000

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.

The Practical Hands-On Guide to Flutter Isolates

Utkarsh Shrivastava — Sat, 26 Oct 2024 15:25:23 +0000

Introduction

Picture this: You're building a flutter application that needs to process large datasets, handle UI interactions, and maintain smooth animations - all simultaneously. If you're coming from JavaScript, you might be thinking, "I'll just use Web Workers!" But what if I told you Dart has an even more elegant solution?

Like JavaScript, Dart is fundamentally a single-threaded language, yes. This means that at its core, it executes one piece of code at a time in a single thread of execution, dubbed the "main isolate." However, where JavaScript uses Web Workers for parallel processing, Dart introduces us to the concept of Isolates - and this is where things get interesting.

> p.s we will be building a small project in the end

Let's first understand "how isolates are different compared to threads"?

Traditional threads are like multiple cooks sharing one kitchen. They're all working in the same space, using the same tools, and accessing the same ingredients. Sure, you can get more done, but:

Someone might grab the knife you were using (resource contention)
Two cooks might reach for the same ingredient (race conditions)
Everyone has to constantly check what others are doing (synchronization overhead)
The kitchen becomes chaos without strict rules (mutex/locks)

Isolates

Dart looked at this chaos and said, "What if each cook had their own kitchen?" That's essentially what isolates are. Instead of sharing memory and fighting over resources, each isolate gets its own memory heap. It's like having multiple copies of your app running independently.

Isolates provide:

Complete Memory Isolation:
- Each isolate has its own memory heap
- No shared memory between isolates
- Memory safety by design
Message-Passing Communication (We will dive deep into this)
- Since Isolates have separate memories, we communicate between them by passing messages using the receiver port and sender port.
Resource Efficiency
- Lighter weight than OS threads.
- More efficient memory usage.
- Better suited for Dart's garbage collection.

The messages between the isolates are like orders going between kitchens (Memory Space)

The dart event loop is the waiter taking orders and delivering dishes

The event loops ensures that:

Messages are delivered in the right order
No isolate gets overwhelmed
Everything stays responsive

To understand dart event loop in detail, you can look up to this official blog by dart.

Dart event loop has two queues (like having two types of order tickets in our restaurant):

Microtask Queue (VIP Orders)
- Handles high-priority tasks
- Always processed first
- Perfect for quick, internal operations
Event Queue (Regular Orders)
- Handles regular async operations
- I/O operations, timers, isolate messages
- Processed after all microtasks are done

Understanding the Main Isolate

The main isolate in Flutter isn't just another isolate - it's the VIP of your app.

void main() {
  // You're already in the main isolate when this runs!
  runApp(MyApp());
}

UI Updates happen only in main isolates.
Only the main isolate can communicate with platform-specific code.

Event loop example

void main() {
  print('🏃 Starting the show');  // 1: Regular synchronous code

  Future(() {
    print('🎭 Event queue');      // 3: Gets queued in event queue
  });

  Future.microtask(() {
    print('⚡ Microtask queue');   // 2: Gets queued but runs first
  });

  print('🏁 Synchronous end');    // 1: Regular synchronous code
}

// Output:
// 🏃 Starting the show
// 🏁 Synchronous end
// ⚡ Microtask queue
// 🎭 Event queue

The real magic happens when isolates and event loops work together. Each isolate has its own event loop, but they can communicate through message passing.

Working with isolates

void main() async {
  // Create a ReceivePort for incoming messages
  final receivePort = ReceivePort();

  // Spawn a new isolate
  final isolate = await Isolate.spawn(
    simpleWorker,        // Function to run in isolate
    receivePort.sendPort // Port for sending messages back
  );

  // Listen for messages
  receivePort.listen((message) {
    print('Received: $message');
    // Clean up when done
    receivePort.close();
    isolate.kill();
  });
}

// Worker function that runs in the isolate
void simpleWorker(SendPort sendPort) {
  sendPort.send('Hello from isolate!');
}

Understanding Ports

ReceivePort

Acts as the inbox for messages
Created in the isolate where you want to receive messages
Provides a SendPort that others can use to send messages to this isolate
Can be listened to using listen() or used in an async for loop

SendPort

Acts as the outbox for sending messages
Obtained from a ReceivePort
Used to send messages to the corresponding ReceivePort
Can be passed between isolates

Passing complex messages

import 'dart:isolate';

class WorkMessage {
  final String command;
  final Map<String, dynamic> data;

  WorkMessage(this.command, this.data);
}

void main() async {
  final receivePort = ReceivePort();

  // Spawn isolate with initial message
  final isolate = await Isolate.spawn(
    dataProcessor,
    [
      receivePort.sendPort,
      WorkMessage('process', {'items': [1, 2, 3]})
    ],
  );

  // Handle responses
  await for (final message in receivePort) {
    if (message is String) {
      print('Received: $message');
      receivePort.close();  // Close after processing
      break;  // Exit loop when done
    }
  }

  isolate.kill();
}

void dataProcessor(List<dynamic> initialMessage) {
  final SendPort sendPort = initialMessage[0];
  final WorkMessage workMessage = initialMessage[1];
  final result = processData(workMessage);
  // Send back result
  sendPort.send('Processed: $result');
}

String processData(WorkMessage message) {
  final items = message.data['items'] as List<int>;
  final processedItems = items.map((item) => item * 2).toList();
  return processedItems.toString();
}


// Output
// Received: Processed: [2, 4, 6]

Key Points to Remember:

Always close ReceivePorts when they're no longer needed to prevent memory leaks
Only send data that can be serialized (basic types, lists, maps, etc.)
Consider using typed ports or message enums for better code organization
Handle errors appropriately as they don't automatically propagate across isolates

Image processing using Isolates vs Without Isolates.

In this example code, We will apply filter over an image by vertically breaking the image into 4 equal chunks, applying blur filter over them using isolates. We will Process each chunk in parallel using isolates, and compare it to normal case

With Isolates

import 'dart:io';
import 'dart:isolate';
import 'package:image/image.dart' as img;

void main() async {
  print('Image processing using isolates...');
  final stopwatch = Stopwatch()..start();
  final inputFile = File('bin/input_image.jpg');

  // Decode the image from file bytes
  final image = img.decodeImage(inputFile.readAsBytesSync());
  final width = image!.width;
  final height = image.height;

  final numberOfIsolates = 4;
  final chunkHeight = height ~/ numberOfIsolates;


  // Divide image into chunks
  final chunks = List.generate(
    numberOfIsolates,
    (i) => img.copyCrop(image, x: 0, y: i * chunkHeight, width: width, height: chunkHeight),
  );

  // Process each chunk in parallel using isolates
  final results = await Future.wait(
    List.generate(numberOfIsolates, (i) => processInIsolate(chunks[i])),
  );

  // Create an empty image to hold the final result
  final resultImage = img.Image(width: width, height: height);

  // Manually copy pixels from processed chunks into the result image
  for (int i = 0; i < numberOfIsolates; i++) {
    final chunk = results[i];
    for (int y = 0; y < chunk.height; y++) {
      for (int x = 0; x < chunk.width; x++) {
        // Set pixel from chunk to the result image
        resultImage.setPixel(x, y + (i * chunkHeight), chunk.getPixel(x, y));
      }
    }
  }

  // Save the resulting image
  final outputFile = File('output_image.jpg');
  outputFile.writeAsBytesSync(img.encodeJpg(resultImage));

  stopwatch.stop();
  print('Image processed in ${stopwatch.elapsedMilliseconds} ms');
}

Future<img.Image> processInIsolate(img.Image chunk) async {
  final receivePort = ReceivePort();
  await Isolate.spawn(applyBlur, [chunk, receivePort.sendPort]);
  return await receivePort.first;
}

void applyBlur(List<dynamic> args) {
  final img.Image chunk = args[0];
  final SendPort sendPort = args[1];

  // Apply Gaussian blur to the image chunk
  final blurred = img.gaussianBlur(chunk, radius: 10);

  // Send the processed image back to the main isolate
  sendPort.send(blurred);
}

Without Isolates

import 'dart:io';
import 'package:image/image.dart' as img;

void main() {
  final stopwatch = Stopwatch()..start();

  final inputFile = File('bin/input_image.jpg');
  final image = img.decodeImage(inputFile.readAsBytesSync())!;

  final blurred = img.gaussianBlur(image, radius: 10);

  File('output_no_isolates.jpg').writeAsBytesSync(img.encodeJpg(blurred));

  stopwatch.stop();
  print('Processing time without isolates: ${stopwatch.elapsedMilliseconds} ms');
}

Comparing the results

With Isolates

Image processing using isolates...
Image processed in 269 ms

Without Isolates

Processing time without isolates: 812 ms

Messaging between Isolates

Basic One-way Messaging The simplest form of isolate communication - when you just need to send data and forget about it.

void main() async {
  // Create a receive port for incoming messages
  final receivePort = ReceivePort();
  // Spawn an isolate and pass the SendPort
  await Isolate.spawn(
    simpleWorker,
    receivePort.sendPort,
  );
  // Listen for any messages
  receivePort.listen((message) {
    print('Main received: $message');
  });
}

void simpleWorker(SendPort sendPort) {
  sendPort.send('Task completed!');
  sendPort.send('More results...');
}

Output:

Main received: Task completed!
Main received: More results...

You saw that we didn't kill the port here, hence the code will run forever

Two-way Communication Pattern When your isolates need to have a conversation - useful for ongoing tasks or complex data processing.

import 'dart:isolate';

void main() async {
  // Set up the initial communication channel
  final mainReceivePort = ReceivePort();

  // Spawn the isolate
  final isolate = await Isolate.spawn(
    twoWayWorker,
    mainReceivePort.sendPort,
  );

  // Store worker's SendPort when received
  late SendPort workerSendPort;

  // Set up the two-way communication
  mainReceivePort.listen((message) {
    if (message is SendPort) {
      // First message is the worker's SendPort
      workerSendPort = message;

      // Now we can start sending messages to worker
      workerSendPort.send('Start processing!');
    } else {
      print('Main received: $message');
    }
  });
}

void twoWayWorker(SendPort mainSendPort) {
  // Create a receiver for the worker
  final workerReceivePort = ReceivePort();

  // Send the worker's SendPort back to main
  mainSendPort.send(workerReceivePort.sendPort);

  // Listen for messages from main
  workerReceivePort.listen((message) {
    print('Worker received: $message');
    // Process and send back results
    mainSendPort.send('Processed: $message');
  });
}

Thanks for reading :p
Connect with me on twitter at https:x.com/twtutkarsh

Type Safety and Null safety in Dart.

Utkarsh Shrivastava — Sat, 03 Jun 2023 12:40:50 +0000

Have you ever wondered why Dart is called a Type Safe language?

It is so becauase the only operations that can be performed on data in the language are those allowed by the type of the data.

In short the operations that are defined for String can not be applied on int.

for example -
int x; x.toUpperCase(); is not allowed in dart.

Let's take a deep dive into this.

There must be some tools in the Dart programming language which is analyzing whether the developer is writing typesafe code or not? Well Yes! There are two such type of tools..

(i) Static Type Check - Checks at Compile time.
(ii) Runtime check - Checks at runtime.

This whole system is referred as Sound Type System.

But Why is it called so?

Whenever we type code on our keyboard we make noise right? imagine that for everykey we press the sound print is being sent to the "Dart Static Analyzer" it checks everything and makes sure that the code we wrote is type safe when it detects that something isn't right it will display an error and it won't let us run the program until the issue is resolved.

We can think of Static type check as a local type check which happens whenever a change is made.

While the runtime check is like an additional Check which happens at the runtime.

But Sometimes the developer might know what they are doing they would want to stop the Static checking of the code.

In that case we use the dynamic data type.

dynamic ignores the Static type check. We can declare a variable of dynamic type and the Static type check will not care about it anymore but the runtime check will care about it and will show an exception if a wrong method is applied to it.

for example -
dynamic b = 3.14 b.toUpperCase(); in this case the program will run because the static type check will not show any error but the at the runtime the runtime check will throw an exception that the methodn toUpperCase() is not defined for a value of double.

Type Interference and Dynamic vs Var in Dart

Types are mandatory in dart but they don't need to be annotated because Dart can Infer types by using the var keyword.

example -
var x = 5.4;
In this case the static type check will will think that variable x was assigned to a double value then it's type must be double for it's entire lifetime.

but in somecases we wouldn't want that therefore we can use dynamic x = 5.4 and we can put any other type of value in x now like -
x = 'abcd'; x = 41; x = anyFunction();

Runtime check will dynamically infer the type of x at the runtime while Static type check will not even care about x.

Here comes the null safety of Dart

What if we do not initialize a var at the time of declaration?

ex- var a;

Dart analyzer will set the the type of a as dynamic throughout it's lifetime, Here dart analyzer played it safe and passed the job to the runtime check. But the problem is that the runtime check also doesn't know about the type of a because it is uninitialized.

hence the runtime check will set it's value to null.

This is not a good practice..
Therefore Dart introduced a new feature Sound Null Safety.

It means that the value can't be null unless the developer say's that it is null.

which means Data can either be nullable or nun-nullable but can't be both during the runtime.

This is the reason why you might see Null type exception at the runtime.

If a dart variable is non-nullable that variable will always be non-nullable also non-nullability is retained at the runtime.