streamproc / MediaStreamRecorder

Cross browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.
https://www.webrtc-experiment.com/msr/
MIT License
2.63k stars 562 forks source link

Multi Record Stream Local and Remote #106

Open SalvatoreAD opened 8 years ago

SalvatoreAD commented 8 years ago

Hi, it's possible to record all streams (local and remote) and save them in multiple file (.webm).

This is my code: var recorder = new MultiStreamRecorder(event.stream); listOfRecorders[rtcMultiConnection.sessionid+"-"+event.extra.username] = recorder; console.log(listOfRecorders);

When i click on record for (var record in listOfRecorders) { var recorder = listOfRecorders[record]; recorder.start(); }

When I click stop for (var record in listOfRecorders) { var recorder = listOfRecorders[record]; recorder.stop(); recorder.ondataavailable = function(blobs) { // blobs.audio // blobs.video listOfRecorders[record] = URL.createObjectURL(blobs.video); }; }

When I click on Stop, I can not assign the associative array file blob. It is stored only the last element, not the others. Can You help me?

muaz-khan commented 8 years ago
var listOfRecorders = {};
var blobs = [];

connection.onstream = function(event) {
    var recorder = new MediaStreamRecorder(event.stream);
    recorder.mimeType = 'video/webm';
    recorder.ondataavailable = function(data) {
        // streamid helps us access or detect media stream (via connection.streamEvents)
        data.streamid = event.streamid;

        // if you do NOT want to upload all blobs at once then skip below function
        returnAllBlobsAtOnce(data);
    };
    recorder.start(10 * 1000); // 10 seconds blob

    // store in a global array-like object
    listOfRecorders[event.streamid] = recorder;
};

function returnAllBlobsAtOnce(blob) {
    blobs[blob.streamid] = blob;
    if (Object.keys(blobs).length != Object.keys(listOfRecorders).length) {
        return; // wait until we get all blobs
    }

    // upload all blobs at once (after every 10 seconds)
    uploadAllBlobsToServer(blobs);
    blobs = {}; // reset
}

function stopAllRecorders() {
    Object.keys(listOfRecorders).forEach(function(streamid) {
        listOfRecorders[streamid].stop();
        delete listOfRecorders[streamid];
    });

    listOfRecorders = {}; // reset
}
SalvatoreAD commented 8 years ago

Thank's, it works. I would like to know if i can save files on server (using php or .net mvc) during record. According to you, is it possible? Thank's

muaz-khan commented 8 years ago

Please find a few PHP/ASPNET based recording demos here:

MediaStreamRecorder requires ffmpeg on server-side to "concatenate" the recordings.

I'll suggest nodejs however you can implement following system on PHP as well:

xylongracias commented 7 years ago

Hi Muaz,

How can I implement https://github.com/streamproc/Record-Entire-Meeting in php? Is there any doc?

xylongracias commented 7 years ago

Hi Muaz,

How can I implement https://github.com/streamproc/Record-Entire-Meeting in php? Is there any doc?