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 pletes?

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 pletes?

• javascript
• node.js
• reactjs
• canvas

• 2 Well if you're just playing it on the front end in the browser, you don't need to actually merge the files. Just start playing one video as soon as the other is finished. If they need to be able to download one single file containing both videos bined, then yes you'll need to do that on the backend with some sort of media tool like ffmpeg – Jayce444 Commented Dec 9, 2022 at 6:14
• can you share the git repo so that we can test if it works or not? – Yilmaz Commented Dec 17, 2022 at 16:13
• Why do you want to avoid using ffmpeg? – I0_ol Commented Dec 19, 2022 at 20:11
• Also it would help to know more about the videos you're wanting to merge. Are they mp4, webm, ts, etc... Certain types of files are easier to merge than others. – I0_ol Commented Dec 19, 2022 at 20:22

3 Answers 3

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 es 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/en-US/docs/Web/API/SourceBuffer/appendBuffer

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

If you want to do this on the backend, as stated in the ment, 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./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.

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.