black screen for compression of a whatsapp video

[narek11]

Hi. Thanks for the great package Shahen. I am trying to implement this package in my rn app. For all the cases this package works fine except the case when I try to use it to compress a video which I got from my friend using Whatsapp.

So first I save that vid from WhatsApp to my phone(saves as mp4) and then I try to compress it using this package.

Current Behavior

The converted video shows an only black screen, the audio plays fine.

If I convert that mp4 to mp4 with any online conversion tool then video works fine. I am attaching the metadata of those 2 mp4 files before and after conversion

Whatsapp mp4 vid metadata - https://www.get-metadata.com/result/9fc7f603-6676-431a-b562-f3cdad8a2207 Whatsapp mp4 to mp4 converted metadata - https://www.get-metadata.com/result/16f708d5-1065-4916-9b90-e1f6aa65f177

react-native-video-processing - ^1.13.0 react native - ^0.55.3 node - v11.13.0

[LowieHuyghe]

I did some digging and the issue seems to be bigger than WhatsApp. Every video that was an MP4 and has a rotation on it will result in a black screen after compression on iOS with this library.

[shahen94]

on which platform this is happening ? Android or iOS(or both?)

[narek11]

the issue for me was definitely happening on iOS not sure about Android

[LowieHuyghe]

This problem indeed occurs on iOS. Android works correctly for the same scenario.

[Teal-labs-developer]

Did anyone figure out a solution for this?

[Teal-labs-developer]

@shahen94, I had done some debugging for this. And found out that the problem lies with the videos that are sent via WhatsApp from iPhones. If those videos are compressed using react-native-video-processing then the resulting videos result black.

Inside buildDefaultVideoComposition function, for videos which are portrait, videoTrack.preferredTransform.tx is 1080 (an original width of the video). WhatsApp resizes the video but somehow this entities tx and ty stays the same. Now if you had removed the inner if statements in below code:

if(transform.a == 0 && transform.b == 1.0 && transform.c == -1.0 && transform.d == 0) {
    // portrait, home button at bottom (upright)
   //this inner if statement
    if( (transform.tx == 0) && (transform.ty == 0) ) {
         transform.tx = videoTrack.naturalSize.height;
        transform.ty = 0;
    }
}
else if(transform.a == 0 && transform.b == -1.0 && transform.c == 1.0 && transform.d == 0) {
    // portrait, home button at top (upside down)
   //this inner if statement
    if( (transform.tx == 0) && (transform.ty == 0) ) {
        transform.tx = 0;
        transform.ty = videoTrack.naturalSize.width;
    }
}
   //this inner if statement
else if(transform.a == 1.0 && transform.b == 0 && transform.c == 0 && transform.d == 1.0) {
    // landscape, home button on right
     // do nothing
}
    else if(transform.a == -1.0 && transform.b == 0 && transform.c == 0 && transform.d == -1.0) {
    // landscape, home button on left
   //this inner if statement
    if( (transform.tx == 0) && (transform.ty == 0) ) {
        transform.tx = videoTrack.naturalSize.width;
        transform.ty = videoTrack.naturalSize.height;
    }
}

those videos process perfectly. What is the reason to put these if statements in place? If we can remove the if checking on tx and ty for 0 value and there is no problem then I can submit a PR solving this particular issue.

[matamicen]

First of all, Shahen and contributors thanks for this libraty :)

@shahen94 @Teal-labs-developer any ideas of this situation?

Here some info: it is happening for videos more than 30 seconds(Portrait or LandScape) that were compressed for WhatsApp iOS. If I try to compress the same video .MOV from the gallery it works great on iOS. Sometime short videos compress without any problem after WhatsApp compression but sometimes we have the same blackScreen video with just audio.

The same video already compressed originally in iOS by WhatsApp is compressing fine on Android.(So, Android is not the problem)

Hope this helps for the solution.

iOS version: 13.7 RN: 063.2 react-native-video-processing: 2.0

Thanks Guys. Matt.

[baronha]

After convert to MP4, my video will be lost 2/3 instead of a black background

[sdelhomm]

Any news on this ? This is still happening