right now you cant change the quality of the recording, seems like a huge API missing.

the GIF encoder defaults to 1 (full quality), whammy for webm defaults to 0.8 (80% quality) and there is no way to change this whatsoever.

Kudos to the team for making this fabulous library.

I am getting following JavaScript error when I try to record videos.

Uncaught TypeError: Cannot read property 'width' of undefined MediaStreamRecorder.js:668
checkFrames MediaStreamRecorder.js:668
toWebM MediaStreamRecorder.js:524
WhammyVideo.compile MediaStreamRecorder.js:914
(anonymous function) MediaStreamRecorder.js:357

I am able to capture lot of frames, but problem occurs after some time, which is quite random. After this JS error occurs, the capturing of frames stops permanently.

I have a sample application that acquires local media and records audio and video. On user click 'replay' the just recorded blobs are replayed. When acquiring local media the second time to record and replay the audio/video blobs, audio is missing. This has been tested on Chrome.

Please take a look at the fiddle
https://jsfiddle.net/ufpeak2x/

1. run the fiddle
2. press 'replay'
3. press 'rerecord'
4. press 'replay'

Chrome Version 41.0.2272.104 (64-bit), Mac

If we set timeInterval of 3000, then for every 3 seconds, onDataAvailbale method gets called. It contains two blobs

1. blob.video
2. blob.audio
   blob.audio duration is more or less consistent 3 seconds. But the video blob duration is mostly 2 seconds.

How to approach this issue?

When I am trying to access cdn file from here https://cdn.webrtc-experiment.com/MediaStreamRecorder.js I see 502 Bad Gateway error everytime.
Adding the screen shot below

I am using the demo source code and you can also see in demo

https://www.webrtc-experiment.com/msr/video-recorder.html

The video file size does not change even if change video resolution.
Is this a bug?
Thanks.

How i can record audio in chrome if stereo?

MediaRecorder must work fine on latest Firefox Nightlies; without any single crash.

Bug: Line 27

mediaRecorder.onstop = function () {
    if (mediaRecorder.state == 'inactive') {
        // bug: it is a temporary workaround; it must be fixed.
        mediaRecorder = new MediaRecorder(mediaStream);
        mediaRecorder.ondataavailable = self.ondataavailable;
        mediaRecorder.onstop = self.onstop;
        mediaRecorder.mimeType = self.mimeType;
        mediaRecorder.start(timeSlice);
    }
};

1. We must not call stop automatically and repeatedly.
2. start method must be invoked once until mediaRecorder.stop method is manually called by the end-user.

Regardless of whether it is Windows 7, 8 or Mac. MediaRecorder.js must work fine; all the time.

Hi!
I'm using the lib just to record audio and it worked perfectly fine a couple of weeks ago in chrome on windows and mac os, but now it doesn't work in chrome on windows. the output is much longer and slower than what It was recorded.
why did this happened? is there any solution?
thank you

@muaz-khan I does not find anything for pause/resume recording. I have found recordRTC.pauseRecording() in RecordRTC. Can you please tell me how to Pause/Resume recording with MediaStreamRecorder . Thanks

After capturing the audio for 2-3 times. The audio stops getting captured, only a blank audio file is created. Following the console.log of the data of the Blob that I received.

data:audio/wav;base64,UklGRiygBQBXQVZFZm10IBAAAAABAAIARKwAABCxAgAEABAAZGF0Y…bI9lP2bfbx9eb1o/WB9UP0kPR488vzFPMQ8yPyQPKR8arxFvJF8iryPfJU8j/yfvGN8W/xSPE= c.html:51
data:audio/wav;base64,UklGRiwgCABXQVZFZm10IBAAAAABAAIARKwAABCxAgAEABAAZGF0Y…4EewT/A5MDZAOTA/UCtwK4AsMC8AL7ApMCiwJuASMB+wBYAb0BYgEpAgECJQMhA4sDSwPsAwkE c.html:51
data:audio/wav;base64,UklGRiwAAABXQVZFZm10IBAAAAABAAIARKwAABCxAgAEABAAZGF0YQAAAAA= c.html:51
data:audio/wav;base64,UklGRiwAAABXQVZFZm10IBAAAAABAAIARKwAABCxAgAEABAAZGF0YQAAAAA= c.html:51
data:audio/wav;base64,UklGRiwAAABXQVZFZm10IBAAAAABAAIARKwAABCxAgAEABAAZGF0YQAAAAA= c.html:51

As you can see, the last 2 console.log shows the same content every time, while the first 2 contain the actual data..

Hello im tring to record long videos en the browser, and then send it to the server side.

When the videos are longer that 3 minutes, the videos start to be intermittent
looks like if some buffer get full because many frames get lost

im trying here:
https://www.webrtc-experiment.com/msr/video-recorder.html

Any idea what could be the problem? maybe the browser buffer?

Edited:
I can see the same problem on the alternative project
https://www.webrtc-experiment.com/RecordRTC/

any suggestion ?

I am trying to run the same code in my local system for MultiStreamRecorder but its not generating multiple blobs url.
OS->OS X 10.10.3
Browser->Firefox 38.0.5

My videos seem to stop at the 32 second mark -- any reason why this is? I've seen online that Whammy might have something to do with it? Thank you for any help.

Hi. I am using (currently only audio) your library for recording purposes.
I'm writing 60 second chunks and send them to server, where I merge them.
All work fine. But one moment: almost each chunk's first second is broken. It sounds like repeated sound with high frequency... I hear it on the very first chunks I recieve from frontend, so that's why asking for your help.

I've tried switching audio formats, but that doesn't help( tried 'wav,ogg' ).

Also I have option for writing video(with audio) same problem with audio there, but video file looks straight.

Any suggestions?
Forgot to mention, that I'm using simple constraints while { audio : "true" }.

I've experimented a little with duration. Looks like with less duration comes less noise. And this noise happens even on first chunk, at start.

I can't get blob audio http://jsfiddle.net/nvb1128/d3x7jbbt/ help me.

https://github.com/search?q=red5+recorder&ref=cmdform

Setting a different resolution e.g. 640x480 still produces a 320x240 webm video in MultiStreamRecorder. Let us know, if we need to change any mediacontraints?

Original issue here:

• muaz-khan/WebRTC-Experiment#303 (comment)

@viveksatle Plz use this forum for MediaStreamRecorder.js questions. Otherwise, directly send me emails at [email protected].

https://github.com/muaz-khan/WebRTC-Experiment is for general issues only.

BTW, I'll bring such kind of demo soon.

Audio blob gets generated and it is completely random and repeating. Some error happened while updating... Pls check. This worked completely fine yesterday.

First of all, thanks for providing this library - it is a lifesaver!

The RTCMultiConnection library has silence detection, which I believe would be useful in MediaStreamRecorder. Instead of saving blobs on an interval (such as every 5 seconds), we can upload the blobs when the user stops speaking. Is this feature in the roadmap for this library (or is it easy to integrate)?

Thanks!

Are you able to record video using Firefox for Android? It seems to me that the MediaRecorder API is unavailable since it throws a "GenericError" when it is started.

The docs say that only audio is supported on Android.

I have a setup much like the demo, and ondataavailable does fire, but onstop does not.

Woops, didn't mean to submit the empty issue. Sorry about that!

I have something like this (pretty much identical to the demo). I've been playing with calling stop in a timeout or something along those lines, but for testing I've been attempting to stop recording from the console.

  streamRecorder = new MediaStreamRecorder(stream);
  streamRecorder.mimeType = 'video/webm';
  streamRecorder.ondataavailable = function (blob) {
    var a = document.createElement('a');
    a.target = '_blank';
    a.innerHTML = 'Open Recorded Video No. ' + (index++);

    a.href = URL.createObjectURL(blob);

    videosContainer.appendChild(a);
    videosContainer.appendChild(document.createElement('hr'));
  };
  streamRecorder.start(5000);

In Firefox, calling streamRecorder.stop() after a few cycles works exactly as expected. In Chrome, however, there doesn't seem to be any way of stopping the loop beyond closing the tab. I assume this is because the shim isn't behaving properly (whammy?), but I haven't looked into a fix yet.

Demo at https://www.webrtc-experiment.com/msr/ is not working properly on Mozilla Firefox

Errors:
For video recording:
https://www.webrtc-experiment.com/msr/video-recorder.html using this records file but shows the following error http://i.imgur.com/VPZnhNY.png

For Audio recording:
https://www.webrtc-experiment.com/msr/audio-recorder.html
1)http://i.imgur.com/z56O0w2.png
2)http://i.imgur.com/O8L6dTF.png

Chrome will be releasing a video encoding pepper API for with Chrome 45. Since using Chrome's Portable Native Extensions (PNaCl) is invisible to the user (no installation steps necessary), I think it would be a good fit for your library. The Whammy method is interesting, but I cannot see it being used for any production use.

Example using the encoder: https://codereview.chromium.org/937643006/

There are still some issues with the example given and I am working with the Chromium team to address them:

https://codereview.chromium.org/1218513003
https://codereview.chromium.org/1187193006/
https://code.google.com/p/chromium/issues/detail?id=503153

I'm sending the recorded video/audio data to a server in pieces. Once the recording is done I'm combining the media files using the following command:

ffmpeg -f concat -i files.txt -codec copy combined.webm

The issue with that is, that the first few seconds (from the first blob) works fine but than the video stops the only the audio continues. During the combining I'm seeing a lot of errors like the following one:

[concat @ 0x7fa59981cc00] DTS 0 < 2700 out of order
[webm @ 0x7fa599829e00] Non-monotonous DTS in output stream 0:0; previous: 2700, current: 0; changing to 2700. This may result in incorrect timestamps in the output file.

How do you combine the recorded blobs on the server? Me current fix is to re-encode the single files into mp4 before combining them, but that obviously takes a long time.

http://stackoverflow.com/questions/244018/externalinterface-performance-looking-for-some-best-practices-tips

What do you think about case of including of external js libs?

I request to add some functional as FileSystem/ Base.js which will contains include function.
Your opinion?

Using pretty much the example off the demo, it was working fine then for some reason today the audio started to sound "slowed" and "deeper"

I've adjusted the bitrates and the buffer stream, but none of those seem to have an effect on the results. I have tried on different computers, so not just a system / microphone issue.

Any ideas?

Sample audio I recorded (much deeper and slower):
https://drive.google.com/file/d/0B0Xd8Envj6lxR19kVlhQMnZUMms/view?usp=sharing

Update
I've added an SSL to my site, thinking that might be the issue (Chrome perhaps implementing some weird functionality) but that did not help. I have uploaded the demo onto my server and receive the same result: https://starkenglish.com/try.html

i try to record local stream and remote stream when two peers established a p2p connection(video chat), then upload the record-file to server ,but only remoteStream can be recorded, here's my code

            pc.oniceconnectionstatechange = function(event) {
    console.log("iceConnectionState:" + pc.iceConnectionState);
    if (pc.iceConnectionState == 'connected') {
        // when connected, start to recording
                    localRecorder = new MultiStreamRecorder(localStream);
        localRecorder.video = inputElement; // to get maximum accuracy
        localRecorder.audioChannels = 1;
        localRecorder.ondataavailable = function (blobs) {
            if (blobs.audio)
                console.log("recorded local audio");
            if (blobs.video)
                console.log("recorded local video");
            var currentIndex = localIndex ++;
            var fileName = 'localVideo-' + currentIndex +'.webm';  // 
            var formData = new FormData();
            // append video blob
            formData.append('videoFileName', fileName);
            formData.append('videoFile', blobs.video);
            // append audio blob
            fileName = 'localAudio-' + currentIndex +'.wav';  //
            formData.append('audioFileName', fileName);
            formData.append('audioFile', blobs.audio);
            uploadFile(formData);
        };
        localRecorder.start(3 * 1000);

                     //record remoteStream
                    remoteRecorder = new MultiStreamRecorder(remoteStream);
        remoteRecorder.video = videoOutput; // to get maximum accuracy
        remoteRecorder.audioChannels = 1;
        remoteRecorder.ondataavailable = function (blobs) {
            // blobs.audio
            // blobs.video
            if (blobs.audio)
                console.log("recorded remote audio");
            if (blobs.video)
                console.log("recorded remote video");
            var currentIndex = remoteIndex ++;
            var fileName = 'remoteVideo-' + currentIndex +'.webm';
            var formData = new FormData();
            // append video blob
            formData.append('videoFileName', fileName);
            formData.append('videoFile', blobs.video);
            // append audio blob
            fileName = 'remoteAudio-' + currentIndex +'.wav'; 
            formData.append('audioFileName', fileName);
            formData.append('audioFile', blobs.audio);
            uploadFile(formData);
        };
        remoteRecorder.start(3 * 1000);
    }
}

how can we merge audio stream of more than two call in javascript ???????

Setting a different resolution e.g. 640x480 still produces a 320x240 webm video.

the docs advertise this as being npm installable but the module exports is an empty object

Hello,
This library saved my day.
I was implementing desktopCapture api with MediaStreamRecorder. Everything works perfect but the video quality is so blurred and bad! 1 minute desktop capturing video takes 14MB.
Is there any way to increase quality of the video? and is thr any way to compress video size too?

below is my code:

 var pending_request_id;

 chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
 startRecording();
 sendResponse({"success": true});
  });

function getUserMediaError() {
console.log("getUserMedia() failed.");
}

function onAccessApproved(id) {
 if (!id) {
 console.log("Access rejected.");
 return;
 }
  navigator.webkitGetUserMedia({
     audio:false,
    video: { mandatory: { chromeMediaSource: "desktop",
                        chromeMediaSourceId: id } }
  }, onMediaSuccess, getUserMediaError);
}

function startRecording()  {
pending_request_id = chrome.desktopCapture.chooseDesktopMedia(
   ["window"], onAccessApproved);
}



function onMediaSuccess(stream) {
 console.log("rcvd stream");
 var mediaRecorder = new MediaStreamRecorder(stream);
 mediaRecorder.mimeType = 'video/mp4';

 //i dont want strechy video so i fixed the width and height of recorder equal to window
mediaRecorder.width = window.screen.width; 
mediaRecorder.height = window.screen.height;

mediaRecorder.ondataavailable = function (blob) {

    var blobURL = URL.createObjectURL(blob);
    console.log('<a href="' + blobURL + '">' + blobURL + '</a>');


    var link=blobURL;
var videoInfo="Compiled Video file size: " + Math.ceil(blob.size / 1024) + "KB";

console.log(link);
console.log(videoInfo);

};
mediaRecorder.start(30000); // i want unlimited recording time so i increased the timeslice
  stream.onended = function() {
      mediaRecorder.stop();
  //finalizeVideo();
  console.log("Ended"); };
   }


function onMediaError(e) {
console.error('media error', e);
}

Before using this library i tried to save streaming video using whammy. but i failed to do so. then i found this library.

Every GIF I generate starts with a black frame. It looks like it starts recording before the camera gets loaded. Using Chrome Version 37.0.2062.94 (64-bit) on linux

#32 was fixed, but I have another issue related to it

https://jsfiddle.net/ufpeak2x/6/

To try to record and stop/replay 7 times. It will work 5 or 6 times.
Then you will get this error in console:

Uncaught NotSupportedError: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).

I use follwoing js

   var mediaRecorder = new MediaStreamRecorder(e.stream);
                mediaRecorder.mimeType = 'audio/ogg';
                mediaRecorder.ondataavailable = function (blob) {
                    // POST/PUT "Blob" using FormData/XHR2

                    // or read as DataURL
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        console.log(e);
                    };
                    reader.readAsDataURL(blob);
                };
                mediaRecorder.start(3000);

after first file, its creating empty blob file.

ProgressEvent {total: 475180, loaded: 475180, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}
 meet.html:120
ProgressEvent {total: 44, loaded: 44, lengthComputable: true, clipboardData: undefined, cancelBubble: false…}

too much recursion @ https://www.webrtc-experiment.com/MediaStreamRecorder.js:90

Hello,

I've been trying to use the audio recording features of this library however I've noticed that no matter what mime type / file type I save it to/configure (ogg, wav or webm) it ends up being the same size. Is there an actual difference in how it's encoding these audio files? As it ends up being ~1MB for just 5 or 6 seconds or audio...

Thanks

Right now it seems this is architected to be able to work for realtime video to send chunks of video back to a server. However, I don't need to do this necessarily. All I need to do is record audio + video in the browser and then upload it to a server all at once, once the stop button is pressed. I may want to even preview the video before upload first. I'm looking into how to do this, but I'm not sure yet how to do it. Any advice or pointers?

1. Use MediaRecorder API to record audio; if available
2. Otherwise; use Web Audio API (something like Recorderjs) to record stereo audio in WAV format
3. Fallback to jRecorder for chrome & mono audio

Syntax Hints

var recordMediaStream = new RecordMediaStream( MediaStream );

recordMediaStream.ondataavailable = function(e) {
     // e.data ---- type: Blob
};

recordMediaStream.onstop = function() { }

// void start(optional long timeSlice)
// timestamp to fire "ondataavailable"
recordMediaStream.start(interval);

recordMediaStream.stop();

For further events and methods: https://dvcs.w3.org/hg/dap/raw-file/tip/media-stream-capture/MediaRecorder.html

We need to decide whether storing data in Blob is better; or ArrayBuffer should be used. Read this thread for further info.

What about this flash-based recorder.js?

What about wami-recorder?

Need to list other available options & scenarios.

Platforms & Devices

1. Chrome for Desktop (Windows/Mac/Unix)
2. Firefox for Desktop (Windows/Mac/Unix)
3. Chrome Beta for Android

Muaz, i take it from OpenTok platform.
Ma be it will be useful:
WebRTC
https://swww.tokbox.com/webrtc/v2.0/js/TB.js
Flash
https://swww.tokbox.com/v1.1/js/TB.js

Currently MediaStreamRecorder is available via "npm install msr" but not usable as a module in Electron or NW.js, because it lacks the proper export definition. Please assign module.exports if node.js is detected. Support for AMD (asynchronous module definition) would be nice, too.

Hi Muaz,

Something went wrong in the audio quality. Pls check. I am actually going through the code. If possible, I will do a pull request.

I am trying to record only audio using your api.
There are one issue how to clear a stream without refreshing page.
Because in my one HTML page there are 7 record buttons. and i not need to ask for share device on each and every click of button.
for that i want to create a stream only once.
and after stop i need to clear stream and record again.
Please help me to do this.

Hello,

i'm using FF Developer Edition version 38.
On the audio demo, when I click on the stop button, I have to wait for the time interval end to get the last blob. This prevent me for setting a bigger time slice (let's say 1 min).

From the media recorder page on MDN, it is indicated :
In each case, the stop event is preceded by a dataavailable event, making the Blob captured up to that point available for you to use in your application.

It does not seem to be the case with your wonderful library. Doyou think there is something to do to get the correct behaviour ?

Thx in advance

I want to reduce framerate to very low such as 5fps
to achieve maximal compression ratio.

I want to record 5s video in 300KiloBytes without audio.

Hello! I would want to ask if is there a possibility to reduce lag between reality and video produced by MediaStreamRecorder? Because when I move my head when camera is on me, "ondataready" produced blob is from ~2-3 seconds in the past.

I've tried reducing bufferSize to 256kb and changing type property in mediaRecorder, no success.

This is my code:

        recorder = new MediaStreamRecorder( stream );
        recorder.stream = stream;
        recorder.mimeType = 'video/mp4';
        recorder.videoWidth = 640;
        recorder.videoHeight = 480;
        recorder.bufferSize = 256;
        recorder.type = MediaRecorderWrapper;
        recorder.ondataavailable = function ( blob ) {
            console.log( blob );
            var objUrl = URL.createObjectURL( blob );
            video.src = objUrl;
            var dataBlob = { url: objUrl , frame: frameIndex++ };
            console.log( 'emitting data' );
            socket.emit( 'stream-data' , dataBlob , function () {
                var lengthEstimateKB = (dataBlob.url.length + 20) / 1024;
                transferStack += lengthEstimateKB;
                allowSend = true;
            } );
        }

        recorder.start( 50 );

        setInterval( function() {
            context.drawImage( video , 0 , 0 , video.videoWidth , video.videoHeight );
        } , 30 );

As you can see I am outputting ondataavailable immediately to video.src and then I am copying video contents into canvas to eliminate flicker by changing video.src attribute. But things in both my