How to use the latest version of @ffmpeg/ffmpeg in a React.js project?

Question

I'm working on a React.js project where I need to process videos in the browser using @ffmpeg/ffmpeg. I noticed that the package has been updated recently, and the API and functions have changed.

In the older version, I used to import the package and functions like this:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

However, in the latest version, I see that the import has changed to:

import { FFmpeg } from '@ffmpeg/ffmpeg';

and all new functions are changed I have checked in by log:

I have check by console ffmpeg, it show :

createDir: path => {…}
deleteDir: path => {…}
deleteFile: path => {…}
exec: ƒ ( /** ffmpeg command line args */ args)
listDir: path => {…}
load: ƒ ()
loaded: true
readFile: ƒ (path)
rename: (oldPath, newPath) => {…}
terminate: () => {…}
writeFile: (path, data) => {…}

I'm not sure about the changes in the API and functions, and I couldn't find any updated documentation or guides on how to use the latest version of @ffmpeg/ffmpeg in a React.js project.

I have task of video processing for streaming and need to add logo in video.

Could someone please provide guidance on how to use the latest version of @ffmpeg/ffmpeg in a React.js project? Specifically, I'm looking for information on the changes in the API, the new function names, and how to perform video processing tasks with the latest version.

If anyone has experience with the latest version of @ffmpeg/ffmpeg or knows the updated usage, any help or examples would be greatly appreciated. Thank you!

Answer 1

Here am listing down with some basic changes which can help you to understand how the changes are down with latest(0.12.10) version:

1. The First change import

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

This is no more available as you mentioned. You need to import two files and need to install two packages for that

import { FFmpeg } from '@ffmpeg/ffmpeg'
import { fetchFile } from '@ffmpeg/util

2. Instance of FFmpeg

const ffmpeg = new FFmpeg();

Previously it was like ffmpeg = createFFmpeg()

3. The methods like read, write, run was completely changed as mentioned in below snippet:

await ffmpeg.load();

await ffmpeg.writeFile("image.png", await fetchFile(imageFile));

await ffmpeg.writeFile("sound.mp3", await fetchFile(soundFile));

await ffmpeg.exec(['-i', 'sound.mp3', '-i', 'image.png', 'output.mp4']);

const data = await ffmpeg.readFile('output.mp4');
setVideoSrc(URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" })))