MediaStreamRecorder.js / Demo

A cross-browser implementation to record audio/video streams.

=

Record audio using MediaStreamRecorder.js

<script src="https://www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

var mediaConstraints = {
    audio: true
};

navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(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) {
            var dataURL = e.target.result;
            window.open(dataURL);
        };
        reader.readAsDataURL(blob);
    };
    mediaRecorder.start(3000);
}

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

=

Record video/gif using MediaStreamRecorder.js

<script src="https://www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

var mediaConstraints = {
    video: true
};

navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
	
    // for gif recording
    // mediaRecorder.mimeType = 'image/gif';
	
    mediaRecorder.videoWidth = 320;
    mediaRecorder.videoHeight = 240;
	
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2

        // or read as DataURL
        var reader = new FileReader();
        reader.onload = function (e) {
            var dataURL = e.target.result;
            window.open(dataURL);
        };
        reader.readAsDataURL(blob);
    };
    mediaRecorder.start(3000);
}

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

=

Browser Support

Browser	Support
Firefox	Stable / Aurora / Nightly
Google Chrome	Stable / Canary / Beta / Dev
Android	Chrome Beta

=

Demos

1. Audio Recording using MediaStreamRecorder
2. Video/Gif Recording using MediaStreamRecorder

=

License

MediaStreamRecorder.js library is released under MIT licence . Copyright (c) 2013 Muaz Khan and neizerth.