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

Hatim Tekri — Mon, 30 May 2022 15:17:53 +0000

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';

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();

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();

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