RN 0.66.5: Trimming video (iOS – 17.2.1, 17.3) saves video with black frames

[NicTorgersen]

react-native-video-trim version 1.0.13

Trimming a video with the following parameters:

showEditor(videoUri, {
    saveToPhoto: false,
})

Code for setting video URI to display using react-native-video version 5.2.1:

let trimmedVideo = null;
const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);

eventEmitter.addListener('VideoTrim', event => {
    if (event.name === 'onFinishTrimming') {
        trimmedVideo = event.outputPath;
    }
})

Creates a video file like expected, but if trimming from the beginning the library adds black frames. The video is displaying fine, could this be react-native-video not refreshing properly?

[maitrungduc1410]

this is issue with FFMPEG, pls check my answer here. I'm trying to fix it

[NicTorgersen]

The weird thing is that when I upload it to our backend the black frames aren't there anymore? 🤔

Doesn't seem like they actually exist if that helps your case.

[maitrungduc1410]

You mean after uploading to your backend, then you download it again to client and do trimming then the black frames are gone?

[NicTorgersen]

After uploading to my backend and viewing it from a separate web app, the black frames are gone. It looks like they don't really exist... 🤔

[NicTorgersen]

Also worth mentioning that this bug also seems to only happen on iOS, not on Android (at least not in Android 14).

[maitrungduc1410]

Yeah, I'm experiencing the same.

I trim a video from Mac using ffmpeg for Mac, send video to iPhone through AirDrop, open using RN-video-trim can clearly see it has around 1 sec black frame

No issue on Android

When I view the video from iPhone Photos app, it seems fine.

I'm thinking it maybe issue with the VideoPlayerController on iOS, probably it considers the initial black frames, meanwhile when playing from Photos App on iPhone or QuickTime MacOS they'll cut out initial frames which have problem (somehow 😅)

[NicTorgersen]

Actually the flow from my app is as follows:

• Capture video
• Trim video on device, FFMPEG
• HTTP-post to backend
• Backend does post processing (using FFMPEG)
• Display video using HTML

I'm also thinking it is related to how the iPhone displays the trimmed video. Could be some additional metadata which is not refreshed properly? E.g. information related to length / frame count is "kept / cached"?

[maitrungduc1410]

I'm also thinking it is related to how the iPhone displays the trimmed video. Could be some additional metadata which is not refreshed properly? E.g. information related to length / frame count is "kept / cached"?

Maybe, we need to figure out

[anonymousDog12]

This happens to me as well. Trimmed video also has empty (white) frames at the beginning for a short period of time

[leitom]

Any news here? It happens here as well 1 second black screen when trimming.

[maitrungduc1410]

hi @ChangyuYan @leitom as my previous response, this seems issue with player on MacOS/iOS, I'm still checking how to solve this

[NicTorgersen]

hi @ChangyuYan @leitom as my previous response, this seems issue with player on MacOS/iOS, I'm still checking how can we get solve this

Hi @maitrungduc1410 , I've been looking around for why this happens. FFMPEG adds frames in the negative x-axis. They shouldn't actually be visible.

Could you try adding -seek_timestamp 1 to the output command on line 282 on ios/VideoTrim.swift and see if that helps?

[maitrungduc1410]

@NicTorgersen

-seek_timestamp (input) This option enables or disables seeking by timestamp in input files with the -ss option. It is disabled by default. If enabled, the argument to the -ss option is considered an actual timestamp, and is not offset by the start time of the file. This matters only for files which do not start from timestamp 0, such as transport streams.

Looks promising, I'll try today when reach home

[maitrungduc1410]

update: using -seek_timestamp 1 doesn't work 😢, still black frame is there

[NicTorgersen]

update: using -seek_timestamp 1 doesn't work 😢, still black frame is there

That's a shame.

Could use FFPROBE to scan the bitrate and adjust the step jump count to the iOS cutting tool 🤔

[maitrungduc1410]

I can't figure out the root cause for now @@.

For this video, trimming from beginning is fine, no black frame

https://github.com/maitrungduc1410/react-native-video-trim/assets/16630193/ed5d88c2-eecb-490a-a3ff-b92ebcae01b5

[maitrungduc1410]

hi @NicTorgersen @ChangyuYan @leitom I fixed the issue, it's working now, please upgrade to 1.0.16 and try again.

this is what I figured out when using FFMPEG:

# before 1.0.16, has black frames
ffmpeg -i input.MOV -ss 00:00:00 -to 00:00:30 -c copy output1.mp4

# new in 1.0.16, works, no black frame
ffmpeg -ss 00:00:00 -to 00:00:30 -i input.MOV -c copy output2.mp4

Original can be found here

[maitrungduc1410]

Please help do some tests, if it's okay we can close this issue

@leitom @NicTorgersen @ChangyuYan

[leitom]

That seems to fix the issue! @maitrungduc1410 Thank you so much!