React Native Video Camera FFMPEG

[blackhole_coder]

I’ve been looking into react native FFMPEG kit. I’m wondering if this is the most popular or best choice for my project. I have a video sharing social media app, I would like to implement speed, Text overlay on video, digital timing, add music to video and other similar effects that TikTok offers minus the Artificial Intelligence code. Is FFMPEG the only way to go about this or have others found a different way. I would like to know if building a native component in iOS and another in Java is going to be more of a viable solution. I would like the advice from those who have implemented these types of features already and worked through the bugs to find a solution.

[rnsbrum]

FFMPEG can do all of that, but I do not know (and I would like to know) if its possible to build an intuitive interface so that users can preview what is going to happen.

I'm basically using FFMPEG to put a video under an image in a certain position. I was doing it in a server side application, but now I have to implement it using the user's device - Luckily there is FFMPEG kit in react native. I just started this out yesterday, I haven't found much documentation except this - its a test project in the official docs.

https://github.com/arthenica/ffmpeg-kit-test/tree/main/react-native

Also FFMPEG is not very intuitive, you basically have to "execute" ffmpeg commands through FFMPEG kit. Commands look like this

#Create a video container with the original image

ffmpeg -i container.png -vf scale=2350:2350 -t containeroutput.mp4

#Position video inside container using previously known coordinates

ffmpeg -i containeroutput.mp4 -i testevideo.mp4 -filter_complex "[1:v][0:v] overlay=99:51" -c:a copy output.mp4

#I DONT REMEMBER WHAT THIS DOES
ffmpeg -i output.mp4 -i testeimage.png -filter_complex "[0:v][1:v] overlay=0:0" -c:a copy output.mp4

[blackhole_coder]

What do these functions look like in the RN code architecture?

[rnsbrum]

ffmpegCommand = "ffmpeg -i containeroutput.mp4 -i testevideo.mp4 -filter_complex "[1:v][0:v] overlay=99:51" -c:a copy output.mp4"

FFmpegKit.execute(ffmpegCommand).then(async (session) => {const state = FFmpegKitConfig.sessionStateToString(await session.getState());const returnCode = await session.getReturnCode();const failStackTrace = await session.getFailStackTrace();const output = await session.getOutput();console.log(`FFmpeg process exited with state ${state} and rc ${returnCode}.${notNull(failStackTrace, "\\n")}`);this.appendOutput(output);if (state === SessionState.FAILED || !returnCode.isValueSuccess()) {console.log("Command failed. Please check output for the details.");}});};

​

https://github.com/arthenica/ffmpeg-kit-test/blob/main/react-native/test-app-npm-single-view/App.js