Search code examples
reactjsffmpegvideo-streamingvideo-processing

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!


Solution

  • 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