Nevermore: a Poet's Mantra

    msr-labs

    1.3.6 • Public • Published

    This is forked from MediaStreamRecorder.

    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-labs
     
    # 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,
        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($filePathPATHINFO_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:

    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.

    Install

    npm i msr-labs

    DownloadsWeekly Downloads

    214

    Version

    1.3.6

    License

    MIT

    Unpacked Size

    397 kB

    Total Files

    49

    Last publish

    Collaborators

    • wangpingsx