Merge two videos on the client or backend side using javascript

Question

. 。 Answers to this question are eligible for a +500 reputation bounty. Bounty grace period ends in 18 hours . Profer is looking for an . 。

I am working with React and Node. My project is having requirement to merge videos and play it on the player. Is possible anyhow, I can do it either on my React side using some canvas or on the back end side using some module other than ffmpeg?

Just want to show preview nothing else is it possible?

Any help would be much appriciated

Right now what I am doing is playing the videos one by one on the player

{vidoes.map((url) => <ReactPlayer src={url}/>)}

Now what I want to do is to draw the images on the canvas. So for that I am playing all the urls at once but how can I play them into series and save the next canvas images until the before one completes?

Answer 1

To achieve continous playing in browsers for multiple input video files there's no need for server side processing. Static file serving for multiple video files (we'll call them chunks from now on) is enough.

At first the.appendBytes() method for the playing buffer of a video player was invented in Flash to allow for switching video streams (or different quality chunks). It was also particularly useful for live video where the next video file doesn't exist when the playing starts. It also allowed multiple resolution video chunks to play one after the other seamelessly, which, at the time, didn't work in any other player, including VLC (and I think ffmpeg didn't have it either).

HTML5 browsers have added an.appendBuffer() method to add video chunks to the currently playing video buffer.

It allows you to hands-on pre-load whatever content you need with full control of what gets played and when (you are in control of buffering and what comes next at all times).

You can start dumping video chunks into the playing buffer at any time.

On the server side ffmpeg cannot solve your problem in the same way the browser can as you will have to handle very difficult corner cases where the video resolution, codecs, audio channels, etc. might differ. Also, a browser only solution is vastly superior to doing remuxing or video encoding on the server.

MDN: https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/appendBuffer

A quick search on the internet for some example use (pls check license yourself): https://github.com/joshuatz/mediasource-append-examples/blob/main/multi-file/segments/index.js#L48

This will solve all your problems related to video playback of multiple source files.

Answer 2

If you want to do this on the backend, as stated in the comment, you will likely need to include ffmpg . There are some libraries though that make is simpler like fluent-ffmpeg

assuming you already have the files on your node server, you can use something like:

const ffmpeg = require('fluent-ffmpeg');

ffmpeg('/path/to/input1.avi')
  .input('/path/to/input2.avi')
  .on('error', function(err) {
    console.log('An error occurred: ' + err.message);
  })
  .on('end', function() {
    console.log('Merging finished !');
  })
  .mergeToFile('/path/to/merged.avi', '/path/to/tempDir');

note that this is a simple example taken directly from https://github.com/fluent-ffmpeg/node-fluent-ffmpeg#mergetofilefilename-tmpdir-concatenate-multiple-inputs .

Make sure you read through the prerequisites since it requires ffmpeg to be installed and configured. There are other aspects that you might need to consider, such as differing codecs and resolutions. Hopefully this gives you a good starting point though.

Answer 3

Pretty sure most, if not all video manipulation libraries use ffmpeg under the hood.

Seeing as you're a react dev, you might appreciate Remotion to manipulate the videos as needed. It doesn't run in the frontend but does have some useful features.