msr

    1.3.4 • Public • Published

    MediaStreamRecorder.js - Demos

    npm downloads Build Status: Linux

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

    1. MediaStreamRecorder can record both audio and video in single WebM file on Firefox.
    2. MediaStreamRecorder can record audio as WAV and video as either WebM or animated gif on Chrome.

    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.

    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

    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);

    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,    // don't forget audio!
        video: true     // don't forget video!
    };
     
    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 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');

    How to upload recorded files using PHP?

    PHP code:

    <?php
    foreach(array('video''audio') as $type{
        if (isset($_FILES["${type}-blob"])) {
            
            $fileName = $_POST["${type}-filename"];
            $uploadDirectory = "uploads/$fileName";
            
            if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"]$uploadDirectory)) {
                echo("problem moving uploaded file");
            }
            
            echo($uploadDirectory);
        }
    }
    ?> 

    JavaScript Code:

    var fileType = 'video'; // or "audio"
    var fileName = 'ABCDEF.webm';  // or "wav" or "ogg"
     
    var formData = new FormData();
    formData.append(fileType + '-filename', fileName);
    formData.append(fileType + '-blob', blob);
     
    xhr('save.php', formData, function (fileURL) {
        window.open(fileURL);
    });
     
    function xhr(url, data, callback) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200) {
                callback(location.href + request.responseText);
            }
        };
        request.open('POST', url);
        request.send(data);
    }

    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
        // Note: MultiStreamRecorder auto handles audio 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;

    Browser Support

    Browser Support
    Firefox Stable / Aurora / Nightly
    Google Chrome Stable / Canary / Beta / Dev
    Opera Stable / NEXT
    Android Chrome / Firefox / Opera
    Microsoft Edge Normal Build

    Contributors

    1. Muaz Khan
    2. neizerth
    3. andersaloof

    License

    MediaStreamRecorder.js library is released under MIT licence.

    Install

    npm i msr

    DownloadsWeekly Downloads

    1,757

    Version

    1.3.4

    License

    MIT

    Last publish

    Collaborators

    • muaz-khan