[IOS] Is it possible to record a Mp4 video

[Iamivan1996]

Question

To Do First

• Take a look in the README
• Take a look in the docs
• Take a look in the QA

Ask your Question

I am going to develop an app is to recode a video and upload the video to server. Also, user can view their video. The supporting video player library is react-native-video, but it is only support Mp4 format

i have already find any solution on how to record a mp4 video or convert mov to mp4, i am just only found out react-native-beautiful-video-recorder can convert MOV to MP4 on iOS, it said the video recorder component that extends from react-native-camera. I have not test the react-native-beautiful-video-recorder is it work or not, but just want to know how to recode MOV or convert MOV to MP4 on iOS by react-native-camera without changing the library to react-native-beautiful-video-recorder

Even i have found the react-native-mov-to-mp4 library here , but it is not working or no longer work. Any idea?

Tags

Love react-native-camera? Please consider supporting our collective: 👉 https://opencollective.com/react-native-camera/donate
Want this issue to be resolved faster? Please consider adding a bounty to it https://issuehunt.io/repos/33218414

[darekg11]

Well, we are using both react-native-camera and react-native-video for recording and play backing videos taken on both IOS and Android devices and so far it worked without problems without any 3rd party conversion. Tested on multiple Android and IOS devices.
Did you try to launch those MOVs at all with react-native-video? Asking out of curiosity because we haven't seen any problems so far but maybe we have just been lucky.

I know for a fact that it works for us, the only thing that we do is we are swapping the extensions from .mov to .mp4 without any conversion at all.

If you want it to make it, as compatible as possible with as much devices as possible, I would recommend one of two solutions:
a) encode on backend wih ffmpeg, if you need to convert tons of videos per second then this will require quite some infrastructure
b) use some kind of SASS service to do it for you, for example if you use AWS as your cloud provider you can use: https://aws.amazon.com/elastictranscoder/ or some cheaper solutions like:
https://coconut.co/

P.S on Android we are using AndroidMediaPlayer but it was also working quite nice with ExpoPlayer

[n1ru4l]

Currently it is not possible to record mp4 videos with react-native-camera on iOS. You will have to convert it. Seems like renaming would also work (https://stackoverflow.com/a/12589999/4202031).

Also I can play both mp4 and mov files with react-native-video. You should open an issue there if it is not working correctly.

Also keep in mind that since iOS 11 HVEC is the default used video codec which cannot be played on most android devices and devices with previous iOS versions. Furthermore I recently discovered that some android devices produce mp4 files that cannot be played on iOS devices and the QuickTime Player.

Therefore I would always recommend you to convert your video files on the backend (e.g. using aws lambda function with ffmpeg or some SAAS service).

Of course the current situation is not perfect and I would love some feedback and contributions in order to resolve some headaches.

From an developer perspective I would expect both the android and the ios implementation to return the same container format.

[Iamivan1996]

Sorry for late reply, that was my mistake, because after i command with react-native link, i did not check the react-native-video was integrated. So that's why the app was crash.

@n1ru4l rename the file is work for me, but for your information, IOS 11 HVEC is not work for android and previous IOS version, and also android devices produce mp4 files that cannot be played on iOS devices and the QuickTime Player. So that why we need backend to convert all the video to mov which is fits all the android and IOS device, am i correct?

[n1ru4l]

@Iamivan1996 You do not have to convert it to mov container format. It could also be mp4. The important part is that the video container format and codec should be supported by all the target platforms (e.g. web, iOS, android).

[darekg11]

I think MP4 with H264 codec set to profile: Baseline should be enough.
Here is a Android docs:
https://developer.android.com/guide/topics/media/media-formats
As you can see, pretty much all Android versions should support decoding H264 Baseline

And for IOS:
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

H.264 Baseline Level 3.0, Baseline Level 3.1, Main Level 3.1, and High Profile Level 4.1.
Note: iPad, iPhone 3G, and iPod touch (2nd generation and later) support H.264 Baseline 3.1. If your app runs on older versions of iPhone or iPod touch, however, you should use H.264 Baseline 3.0 for compatibility. If your content is intended solely for iPad, Apple TV, iPhone 4 and later, and Mac OS X computers, you should use Main Level 3.1.

So it seems Baseline level 3.0 would be enough for IOS, Android implementation of levels is done by manufacturer so it varies. I would start with 3.1 to support 720P.

So in the end, maybe try H264 Baseline level 3.1.
Of course if you don't need to support older devices, you can go with Main Profile instead of Baseline

More sources:
https://en.wikipedia.org/wiki/H.264/MPEG-4_AVC
https://superuser.com/questions/489087/what-are-the-differences-between-h-264-profiles
https://stackoverflow.com/questions/6364190/what-h-264-format-loads-on-android-and-ios

Hope it helps

[Iamivan1996]

@darekg11 @n1ru4l Thank you for your guidance and support. I will take a note with my backend program partner.

This is my first time to build an app with react native, and also i have not too much experience in Camera.