How can I stack two videos together vertically in react native?

Question

In react native I have two videos V1 and V2 that I want to combine to one video and export it as MP4. For simplicity let's assume V1 = V2 in MP4 and 16:9 ratio. How can I combine them?

Answer 1

If you just want to play the two video together arrange vertically then you can simply arrange the videos on your display and play them simultaneously.

However, I think you want to actually create a new video file containing the resulting video.

The easiest way to do this is almost certainly going to be to use a dedicated video processing library which can be supported in React Native. Luckily, there are several wrappers or projects that make FFMPEG, the most common open source video library/utility, available in React Native - this one if a good candidate:

• https://github.com/arthenica/ffmpeg-kit

This repository includes some examples (ffmpeg-kit-test/react-native) which you can use to extend and test your code with also.

There is good documentation on their wiki but, like most FFMPEG wrapper applications, the library essentially allows you use command line FFMPEG syntax within your react Native code. This example from the documentation (https://github.com/arthenica/ffmpeg-kit/wiki/React-Native) is a good overview:

import { FFmpegKit } from 'ffmpeg-kit-react-native';

FFmpegKit.executeAsync('-i file1.mp4 -c:v mpeg4 file2.mp4', async (session) => {
  const returnCode = await session.getReturnCode();

  if (ReturnCode.isSuccess(returnCode)) {

    // SUCCESS

  } else if (ReturnCode.isCancel(returnCode)) {

    // CANCEL

  } else {

    // ERROR

  }
});

The executeAsynch line take as its first argument the FFMPEG command line syntax you want to use.

You can then use the power of FFMPEG to arrange the videos as you want - see this answer for some options: https://stackoverflow.com/a/33764934/334402

You can also test the video manipulation using command line FFMPEG first to ensure you get the result you want before adding it into your application.