MediaStreamRecorder.js - Demos

Demos using MediaStreamRecorder.js library

Experiment Name	Demo	Source Code
Audio Recording	Demo	Source
Video Recording	Demo	Source
Gif Recording	Demo	Source
MultiStreamRecorder Demo	Demo	Source

A cross-browser implementation to record

1. Camera
2. Microphone
3. Screen (full screen, apps’ screens, tab, HTML elements)
4. Canvas 2D as well as 3D animations (gaming/etc.)

You can record above four options altogether (in single container).

MediaStreamRecorder is useful in scenarios where you’re planning to submit/upload recorded blobs in realtime to the server! You can get blobs after specific time-intervals.

Browser Support

Browser	Support	Features
Firefox	Stable / Aurora / Nightly	Audio+Video (Both local/remote)
Google Chrome	Stable / Canary / Beta / Dev	Audio+Video (Both local/remote)
Opera	Stable / NEXT	Audio+Video (Both local/remote)
Android	Chrome / Firefox / Opera	Audio+Video (Both local/remote)
Microsoft Edge	Normal Build	Only Audio - No Video - No Canvas - No Screen
Safari 11	preview	Only Audio - No Video - No Canvas - No Screen

There is a similar project: RecordRTC! Demo - Documentation

How to link scripts?

You can install scripts using NPM:

npm install msr

# or via "bower"
bower install msr

Now try node server.js and open https://localhost:9001/

Test on NPM

var MediaStreamRecorder = require('msr');

console.log('require-msr', MediaStreamRecorder);

console.log('\n\n-------\n\n');

var recorder = new MediaStreamRecorder({});
console.log('MediaStreamRecorder', recorder);

console.log('\n\n-------\n\n');

var multiStreamRecorder = new MediaStreamRecorder.MultiStreamRecorder([]);
console.log('MultiStreamRecorder', multiStreamRecorder);

• Live NPM test: https://tonicdev.com/npm/msr

Or try npm-test.js:

cd node_modules
cd msr
node npm-test.js

Then link single/standalone “MediaStreamRecorder.js” file:

<script src="./node_modules/msr/MediaStreamRecorder.js"> </script>

<!-- or bower -->
<script src="./bower_components/msr/MediaStreamRecorder.js"></script>

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

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

<!-- or link specific release -->
<script src="https://github.com/streamproc/MediaStreamRecorder/releases/download/1.3.4/MediaStreamRecorder.js"></script>

Record audio+video

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        var blobURL = URL.createObjectURL(blob);
        document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
    };
    mediaRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}
</script>

Record Multiple Videos

Record multiple videos in single WebM file.

var arrayOfStreams = [yourVideo, screen, remoteVideo1, remoteVideo2];
var multiStreamRecorder = new MultiStreamRecorder( arrayOfStreams );

You can add additional streams at runtime:

multiStreamRecorder.addStream( anotherStream );

Currently, you can only record 4-maximum videos in single WebM container.

Record audio/wav

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var mediaConstraints = {
    audio: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        var blobURL = URL.createObjectURL(blob);
        document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
    };
    mediaRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}
</script>

How to manually stop recordings?

mediaRecorder.stop();

How to pause recordings?

mediaRecorder.pause();

How to resume recordings?

mediaRecorder.resume();

How to save recordings?

// invoke save-as dialog for all recorded blobs
mediaRecorder.save();

// or pass external blob/file
mediaRecorder.save(YourExternalBlob, 'FileName.webm');

Upload to PHP Server

Your HTML file:

mediaRecorder.ondataavailable = function(blob) {
    // upload each blob to PHP server
    uploadToPHPServer(blob);
};

function uploadToPHPServer(blob) {
    var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
        type: 'video/webm'
    });

    // create FormData
    var formData = new FormData();
    formData.append('video-filename', file.name);
    formData.append('video-blob', file);

    makeXMLHttpRequest('https://path-to-your-server/save.php', formData, function() {
        var downloadURL = 'https://path-to-your-server/uploads/' + file.name;
        console.log('File uploaded to this path:', downloadURL);
    });
}

function makeXMLHttpRequest(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            callback();
        }
    };
    request.open('POST', url);
    request.send(data);
}

Save.php file:

<?php
// via: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-PHP/save.php
header("Access-Control-Allow-Origin: *");
function selfInvoker()
{
    if (!isset($_POST['audio-filename']) && !isset($_POST['video-filename'])) {
        echo 'PermissionDeniedError';
        return;
    }

    $fileName = '';
    $tempName = '';

    if (isset($_POST['audio-filename'])) {
        $fileName = $_POST['audio-filename'];
        $tempName = $_FILES['audio-blob']['tmp_name'];
    } else {
        $fileName = $_POST['video-filename'];
        $tempName = $_FILES['video-blob']['tmp_name'];
    }

    if (empty($fileName) || empty($tempName)) {
        echo 'PermissionDeniedError';
        return;
    }
    $filePath = 'uploads/' . $fileName;

    // make sure that one can upload only allowed audio/video files
    $allowed = array(
        'webm',
        'wav',
        'mp4',
        'mp3',
        'ogg'
    );
    $extension = pathinfo($filePath, PATHINFO_EXTENSION);
    if (!$extension || empty($extension) || !in_array($extension, $allowed)) {
        echo 'PermissionDeniedError';
        continue;
    }

    if (!move_uploaded_file($tempName, $filePath)) {
        echo ('Problem saving file.');
        return;
    }

    echo ($filePath);
}
selfInvoker();
?>

Regarding PHP upload issues:

• https://github.com/muaz-khan/RecordRTC/wiki/PHP-Upload-Issues

Don’t forget to create uploads directory here:

https://path-to-your-server/uploads/ ----- inside same directory as "save.php"

API Documentation

recorderType

You can force StereoAudioRecorder or WhammyRecorder or similar recorders on Firefox or Edge; even on Chrome and Opera.

All browsers will be using your specified recorder:

// force WebAudio API on all browsers
// it allows you record remote audio-streams in Firefox
// it also works in Microsoft Edge
mediaRecorder.recorderType = StereoAudioRecorder;

// force webp based webm encoder on all browsers
mediaRecorder.recorderType = WhammyRecorder;

// force MediaRecorder API on all browsers
// Chrome Canary/Dev already implemented MediaRecorder API however it is still behind a flag.
// so this property allows you force MediaRecorder in Chrome.
mediaRecorder.recorderType = MediaRecorderWrapper;

// force GifRecorder in all browsers. Both WhammyRecorder and MediaRecorder API will be ignored.
mediaRecorder.recorderType = GifRecorder;

audioChannels

To choose between Stereo or Mono audio.

It is an integer value that accepts either 1 or 2. “1” means record only left-channel and skip right-one. The default value is “2”.

mediaRecorder.audioChannels = 1;

Note: It requires following recorderType:

mediaRecorder.recorderType = StereoAudioRecorder;

bufferSize

You can set following audio-bufferSize values: 0, 256, 512, 1024, 2048, 4096, 8192, and 16384. “0” means: let chrome decide the device’s default bufferSize. Default value is “2048”.

mediaRecorder.bufferSize = 0;

sampleRate

Default “sampleRate” value is “44100”. Currently you can’t modify sample-rate in windows that’s why this property isn’t yet exposed to public API.

It accepts values only in range: 22050 to 96000

// set sampleRate for NON-windows systems
mediaRecorder.sampleRate = 96000;

video

It is recommended to pass your HTMLVideoElement to get most accurate result.

videoRecorder.video = yourHTMLVideoElement;
videoRecorder.onStartedDrawingNonBlankFrames = function() {
    // record audio here to fix sync issues
    videoRecorder.clearOldRecordedFrames(); // clear all blank frames
    audioRecorder.start(interval);
};

stop

This method allows you stop recording.

mediaRecorder.stop();

pause

This method allows you pause recording.

mediaRecorder.pause();

resume

This method allows you resume recording.

mediaRecorder.resume();

save

This method allows you save recording to disk (via save-as dialog).

// invoke save-as dialog for all recorded blobs
mediaRecorder.save();

// or pass external blob/file
mediaRecorder.save(YourExternalBlob, 'FileName.webm');

canvas

Using this property, you can pass video resolutions:

mediaRecorder.canvas = {
    width: 1280,
    height: 720
};

videoWidth and videoHeight

You can stretch video to specific width/height:

mediaRecorder.videoWidth  = 1280;
mediaRecorder.videoHeight = 720;

clearOldRecordedFrames

This method allows you clear current video-frames. You can use it to remove blank-frames.

videoRecorder.video = yourHTMLVideoElement;
videoRecorder.onStartedDrawingNonBlankFrames = function() {
    videoRecorder.clearOldRecordedFrames(); // clear all blank frames
    audioRecorder.start(interval);
};

stop

This method allows you stop entire recording process.

mediaRecorder.stop();

start

This method takes “interval” as the only argument and it starts recording process:

mediaRecorder.start(5 * 1000); // it takes milliseconds

ondataavailable

This event is fired according to your interval and “stop” method.

mediaRecorder.ondataavailable = function(blob) {
    POST_to_Server(blob);
};

onstop

This event is fired when recording is stopped, either by invoking “stop” method or in case of any unexpected error:

mediaRecorder.onstop = function() {
    // recording has been stopped.
};

mimeType

This property allows you set output media type:

// video:
videoRecorder.mimeType = 'video/webm';
videoRecorder.mimeType = 'video/mp4';

// audio:
audioRecorder.mimeType = 'audio/webm'; // MediaRecorderWrapper
audioRecorder.mimeType = 'audio/ogg'; // MediaRecorderWrapper
audioRecorder.mimeType = 'audio/wav'; // StereoAudioRecorder
audioRecorder.mimeType = 'audio/pcm'; // StereoAudioRecorder

// gif:
gifRecorder.mimeType = 'image/gif'; // GifRecorder

bitsPerSecond

// currently supported only in Firefox
videoRecorder.bitsPerSecond = 12800;

quality

// only chrome---whilst using WhammyRecorder
videoRecorder.quality = .8;

speed

// only chrome---whilst using WhammyRecorder
videoRecorder.speed = 100;

Contributors

1. Muaz Khan
2. neizerth
3. andersaloof

License

MediaStreamRecorder.js library is released under MIT licence.