Question 288951 in React native Question posted in
The official React Native documentation can be found here.

Combine N number of videos in React Native using ffmpeg-kit-react-native

I’m trying to concatenate N videos in one video.
I already tried many libraries, but without any success. The libraries I tried are:

react-native-video-processor

react-native-video-merger

react-native-video-manager

ffmpeg-kit-react-native

None of them are working in the way I need, and can’t find any specific commands to merge videos without the need of audio.

I also tried these commands:

`-i ${videoPaths.join(' -i ')} -filter_complex concat=n=${videoPaths.length}:v=1:a=0 [v] -map [v] -vf "scale=w=720:h=trunc(ow/a/2)*2,setsar=1:1" -c:v libx264 -c:a none -shortest -y ${outputVideoPath}`;

`-i ${videoPaths.join(' -i ')} -filter_complex concat=n=${videoPaths.length}:v=1:a=0 -strict -2 ${outputVideoPath}`;

But nothing is working in the way I need.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally, I ended up with the sample code on the React Native Android end

    `-y -i video_one.mp4 -i video_two.mp4 -filter_complex 
  "[0:v] scale=720:1280,setsar=1[v0]; [1:v] scale=720:1280,setsar=1[v1]; 
  [v0][v1]concat=n=2:v=1:a=0[v]" -map "[v]" -r 30 -vcodec libx264 -pix_fmt yuv420p -strict -2 output.mp4`

    By using the below NPM

    ffmpeg-kit-react-native

  2. 0

    As it looks like, you want to merge videos that don’t have audio.

    As said on this issue on the react-native-video-editor, you can edit some lines of code on the library, so it does not process audio while merging the video, so it would fit your needs.

    The files and lines you need to comment (or remove) are:

    File node_modules/react-native-video-editor/ios/RNVideoEditor.m, lines 42 and 43:

    AVMutableCompositionTrack *audioTrack = [mixComposition addMutableTrackWithMediaType:AVMediaTypeAudio
preferredTrackID:kCMPersistentTrackID_Invalid];

    File node_modules/react-native-video-editor/ios/RNVideoEditor.m, lines 60 to 63:

    [audioTrack insertTimeRange:timeRange
ofTrack:[[asset tracksWithMediaType:AVMediaTypeAudio] objectAtIndex:0]
atTime:insertTime
error:nil];

    You can fork the react-native-video-editor repository, make these changes and save it, so you can install from your repository instead of the official repository (if you have a GitHub account, of course). If you don’t do this, you will need to edit these files on your node_modules every time you install the package.

    If you need to do it on Android too, I suppose you need to comment/remove these lines (I can’t test this, but as I read on the code, this should work):

    File react-native-video-editor/android/src/main/java/com/reactlibrary/RNVideoEditorModule.java, lines 53, lines 57 to 59, lines 78 to 75:

    [...]
List<Track> audioTracks = new LinkedList<Track>();
[...]

[...]
if (t.getHandler().equals("soun")) {
  audioTracks.add(t);
}
[...]

[...]
if (!audioTracks.isEmpty()) {
  try {
    result.addTrack(new AppendTrack(audioTracks.toArray(new Track[audioTracks.size()])));
  } catch (IOException e) {
    errorCallback.invoke(e.getMessage());
    e.printStackTrace();
  }
}
[...]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search