Record Multiple Streams Into Single File

First step

var recorder;

function addVideoToRecorder(video) {
    var stream = video.captureStream();

    if (!recorder) {
        recorder = RecordRTC([stream], {
            type: 'video'
        });
        recorder.startRecording();
    } else {
        recorder.getInternalRecorder().addStreams([stream]);
    }
}

function stopAndGetSingleBlob(callback) {
    if (!recorder) return;
    recorder.stopRecording(function() {
        callback(recorder.getBlob());
        recorder = null;
    });
}

Second step

Use above code as following:

addVideoToRecorder(document.getElementById('local-video')); 
addVideoToRecorder(document.getElementById('remote-video'));  

To stop the recording

And whenever you want to stop the recording:

btnStopRecording.onclick = function() {
    stopAndGetSingleBlob(function(blob) {
       var url = URL.createObjectURL(blob);
       previewVideo.src = url;

       // or
       window.open(url);

       // or
       invokeSaveAsDialog(blob);
    });
}; 

Advance users

Behind the scene we are using this recorder: https://recordrtc.org/MultiStreamRecorder.html

So you can use any method from that recorder. We are already using this method above:

recorder.getInternalRecorder().addStreams([stream]);  

You can use other methods like resetVideoStreams etc.

recorder.getInternalRecorder().resetVideoStreams([stream1, stream2]);    // only keep stream1 and stream2 and remove all other streams

RecordRTC Chrome Extension

RecordRTC chrome extension supports these API:

• https://github.com/muaz-khan/Chrome-Extensions/tree/master/screen-recording#call-from-your-own-website

You can record entire activity, along with microphone, along with speaker audios using this code:

var recorder = new RecordRTC_Extension();

recorder.startRecording({
    enableScreen: true,
    enableMicrophone: true,
    enableSpeakers: true
});

btnStopRecording.onclick = function() {
    recorder.stopRecording(function(blob) {
        console.log(blob.size, blob);
        var url = URL.createObjectURL(blob);
        video.src = url;
    });
};