DEV Community

Cover image for Merge multiple Media Stream and save into a single file in React js
Hatim Tekri
Hatim Tekri

Posted on

Merge multiple Media Stream and save into a single file in React js

if you are creating webrtc application or any media stream based application and you want to record multiple media streams into one file and then export the merged stream file in the respected format then read this article carefully.

in this article, I have explained the media stream recording in two parts,

1. mix and record multiple audio streams into one file.

2. mix and record multiple video streams into one file.

mix and record multiple audio streams into one file

first, install this libraries

npm install multistreamsmixer
npm install recordrtc
npm install file-saver

then,import all the libraries

import MultiStreamsMixer from 'multistreamsmixer';
import RecordRTC, { getSeekableBlob, MultiStreamRecorder } from "recordrtc";
import { saveAs } from 'file-saver';
Enter fullscreen mode Exit fullscreen mode

then write this code to mix and record the audio streams.

const streammixer = new MultiStreamsMixer([stream1, stream2]);
let recorder = RecordRTC(streammixer.getMixedStream(), {type:'audio',mimeType: 'audio/wav'});      
recorder.startRecording();
Enter fullscreen mode Exit fullscreen mode

now write this code to stop and save the mix recorded stream.

recorder.stopRecording(function () {
  let blob = recorder.getBlob();          
     getSeekableBlob(blob, function (seekableBlob) {
         saveAs(seekableBlob, "filename"+ ".mp4");            
     });          
 });
 recorder.destroy();
Enter fullscreen mode Exit fullscreen mode

this is how you can mix and record the multiple audio streams and then save it in any format you want.
this seekable function is help to make the audio file seekable otherwise it will not be seekable if you not use this function.

mix and record multiple video streams into one file

first, install this libraries

npm install multistreamsmixer
npm install recordrtc
npm install file-saver

then,import all the libraries

import MultiStreamsMixer from 'multistreamsmixer';
import RecordRTC, { getSeekableBlob, MultiStreamRecorder } from "recordrtc";
import { saveAs } from 'file-saver';
Enter fullscreen mode Exit fullscreen mode

then write this code to mix and record the audio streams.

let mixAV = new MultiStreamRecorder([stream1, stream2],{
            mimeType: 'video/mp4'
          });
mixAV  = mixTeacherStudentAV;
mixAV.record();
Enter fullscreen mode Exit fullscreen mode

now write this code to stop and save the mix recorded stream.

mixAV.stop(function(blob) {
      getSeekableBlob(blob, function(seekableBlob) {
        saveAs(seekableBlob, "filename"+ ".mp4");        
      });
 });
Enter fullscreen mode Exit fullscreen mode

this is how you can mix and record the multiple video streams and then save it in any format you want.
this seekable function is help to make the video file seekable otherwise it will not be seekable if you not use this function.

Discussion (1)

Collapse
aliasgardhariwala53 profile image
Ali Asgar Dhariwala

Helpful🙌