CODEWITHSUNDEEP
reactjsffmpegvideo-streamingvideo-processing
Muzammil Raza
Muzammil Raza

Reputation: 43

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

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!

Upvotes: 4

Views: 12803

Answers (2)

Nawin
Nawin

Reputation: 636

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
  1. Instance of FFmpeg
const ffmpeg = new FFmpeg();

Previously it was like ffmpeg = createFFmpeg()

  1. 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" })))

Upvotes: 5

Alexey Shirko
Alexey Shirko

Reputation: 194

A detailed post from the author of the library where he tells what has changed in version 0.12.0.

The guide, which describes the process of migrating to the latest version, you can see here

Upvotes: 4

Related Questions