Cutting a video into frames and output each frame back into react native for processing

[AbirNadav-dev]

Hello, I'm trying to cut a video into frames and output each frame back into react native for processing I cannot find a way to do so.

My goal here is to take a stream from inside react native and then use FFmpeg to break it into frames and perform some task upon each frame, I guess I'm doing something wrong.

This is the code im using:

let pipe1 = RNFFmpegConfig.registerNewFFmpegPipe().then(pipe => { console.log("New ffmpeg pipe: " + pipe); // return pipe console.log("🚀 ~ file: videoService.js ~ line 18 ~ pipe1 ~ pipe1", pipe1)

RNFFmpeg.execute(-i ${fileName} -vcodec png -f rawvideo -s 10*10 pipe:${pipe}, completedExecution => { if (completedExecution.returnCode === 0) { console.log("FFmpeg process completed successfully"); } else { console.log(FFmpeg process failed with rc=${completedExecution.returnCode}.); } }).then(executionId => console.log(Async FFmpeg process started with executionId ${executionId}.)); })

I'm kinda lost here, will appreciate any help!

Thanks!

[kevinstubbs]

Is it failing? Any error messages or exceptions? Or is it succeeding just not giving you the results you are expecting?

[jaimish11]

I needed to do the same exact thing. I found two ways to do it:

Method 1 Decode an entire video and extract frames from it at a certain frame rate. let res = await RNFFmpeg.execute('-i '+videoUri + " -r 1/1 "+outputFileUri+".jpeg")

In the above statement:

• videoUri can some local video uri in the form file:///storage/emulated/0/Download/some_video.mp4
• outputFileUri is the file name of the frame/s that the ffmpeg command will create. It will also be in a format similar to the one above.
• 1/1 is the rate at which you want to extract frames. It's 1 frame per second in this case. (1/30 would mean 1 frame every 30 seconds, 1/60 would mean 1 frame every 60 seconds etc.)

Method 2 Extract particular frames from a video.

let res = await RNFFmpeg.execute("-ss "+timeInSeconds+ " -y -i "+videoUri+" -vframes 1 "+outputFileUri+".jpeg")

In the above statement:

• videoUri and outputFileUri are the same as in method 1
• the -y flag is just used to overwrite any frames with the same name. You can choose to ignore this flag depending on your use-case.
• timeInSeconds is the timestamp at which you want to extract a frame. The way I understand it, if you want the frame at the 30th second in a 60 second video, you can pass 30 as the timeInSeconds. However, in the below reference, it says you need to multiple the frame number you want with the frame rate of the video. So, if you have a 60s video playing at 30fps and you needed the frame at the 30s timestamp, you would need to do 30*30 = 900. But, simply passing 30 worked for me. So, you might need to experiment with this.

A successful ffmpeg command will return 0 and so you can process the resulting output file urls however you want. Store them in an array, send them to different components, use them in Image components etc. A non-zero return indicates that the ffmpeg command failed.

References: https://stackoverflow.com/questions/10957412/fastest-way-to-extract-frames-using-ffmpeg https://video.stackexchange.com/questions/19873/extract-specific-video-frames

[tanersener]

This project will be retired. Please consider switching to FFmpegKit.