Record Multiple Streams Into Single File

Muaz Khan edited this page Oct 15, 2018 · 1 revision

First step

var recorder;

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

    if (!recorder) {
        recorder = RecordRTC([stream], {
            type: 'video'
    } else {

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

Second step

Use above code as following:


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;

       // or

Advance users

Behind the scene we are using this recorder:

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


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:

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

var recorder = new RecordRTC_Extension();

    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;
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.