recordrtc
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/recordrtc package

    5.5.0 • Public • Published

    RecordRTC: WebRTC JavaScript Library for Audio+Video+Screen Recording

    Demo: https://www.webrtc-experiment.com/RecordRTC/

    Chrome Extension: Chrome-Extensions/screen-recording

    RecordRTC Documentation / RecordRTC Wiki Pages / RecordRTC Demo / WebRTC Experiments

    npm downloads Build Status: Linux

    RecordRTC is a JavaScript-based media-recording library for modern web-browsers (supporting WebRTC getUserMedia API). It is optimized for different devices and browsers to bring all client-side (pluginfree) recording solutions in single place.

    YouTube Video Tutorial for RecordRTC!

    Check all releases:

    Please check dev directory for development files.

    1. RecordRTC API Reference
    2. MediaStreamRecorder API Reference
    3. StereoAudioRecorder API Reference
    4. WhammyRecorder API Reference
    5. Whammy API Reference
    6. CanvasRecorder API Reference
    7. MultiStreamRecorder API Reference
    8. MRecordRTC API Reference
    9. RecordRTCPromisesHandler API Reference
    10. GifRecorder API Reference
    11. Global API Reference 12 RecordRTC and Upload to PHP Server

    Browsers 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/beta (OSX/iOS11) Only StereoAudioRecorder - No Video - No Canvas - No Screen

    Frameworks

    1. Angular2 - check article and demo github repository - via #186
    2. React.js - check this article and demo github repository
    3. Video.js - check this github repository
    4. meteor - check an old github repository

    Want to add more? Please make a pull-request to update README.md

    Tests?

    Tests source code:

    Free?

    It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost.

    RecordRTC Containers Format

    RecordRTC supports vp9, vp8, h264, mkv, opus/vorbis, and pcm (mono/stereo).

    vp9

    var options = {
        recorderType: MediaStreamRecorder,
        mimeType: 'video/webm\;codecs=vp9'
    };
    var recordRTC = RecordRTC(stream, options);

    RecordRTC vp9

    vp8

    var options = {
        recorderType: MediaStreamRecorder,
        mimeType: 'video/webm\;codecs=vp8'
    };
    var recordRTC = RecordRTC(stream, options);

    RecordRTC vp8

    h264

    var options = {
        recorderType: MediaStreamRecorder,
        mimeType: 'video/webm\;codecs=h264'
    };
    var recordRTC = RecordRTC(stream, options);

    RecordRTC h264

    pcm

    var options = {
        recorderType: StereoAudioRecorder,
        mimeType: 'audio/wav'
    };
    var recordRTC = RecordRTC(stream, options);

    RecordRTC pcm

    opus

    var options = {
        recorderType: MediaStreamRecorder,
        mimeType: 'audio/webm' // Firefox also supports: "audio/ogg"
    };
    var recordRTC = RecordRTC(stream, options);

    RecordRTC opus

    Media File Bitrate/Framerate encoders Framesize additional info
    Audio File (WAV) 1411 kbps pcm_s16le 44100 Hz stereo, s16
    Video File (WebM) 60 kb/s (whammy) vp8 codec yuv420p -- SAR 1:1 DAR 4:3, 1k tbr, 1k tbn, 1k tbc (default)

    RecordRTC Demos

    1. RecordRTC to Node.js
    2. RecordRTC to PHP
    3. RecordRTC to ASP.NET MVC
    4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
    5. MRecordRTC i.e. Multi-RecordRTC!
    6. RecordRTC on Ruby!
    7. RecordRTC over Socket.io
    8. ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
    9. RecordRTC / PHP / FFmpeg
    10. Record Audio and upload to Nodejs server
    11. ConcatenateBlobs.js - Concatenate multiple recordings in single Blob!
    12. Remote audio-stream recording or a real p2p demo
    13. Mp3 or Wav Recording
    14. Record entire DIV including video, image, textarea, input, drag/move/resize, everything
    15. Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
    16. Record Canvas2D Animation
    17. WebGL animation recording
    18. Plotly - WebGL animation recording

    You can also try a chrome extension for screen recording:

    How to link?

    NPM install

    npm install recordrtc
    
    # you can use with "require" (browserify/nodejs)
    var RecordRTC = require('recordrtc');
    
    var recorder = RecordRTC({}, {
        type: 'video',
        recorderType: RecordRTC.WhammyRecorder
    });
    
    console.log('\n--------\nRecordRTC\n--------\n');
    console.log(recorder);
    
    console.log('\n--------\nstartRecording\n--------\n');
    recorder.startRecording();
    console.log('\n--------\nprocess.exit()\n--------\n');
    
    process.exit()
    

    Here is how to use require:

    var RecordRTC = require('recordrtc');
    var Whammy = RecordRTC.Whammy;
    var WhammyRecorder = RecordRTC.WhammyRecorder;
    var StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
    // and so on
     
    var video = new Whammy.Video(100);
    var recorder = new StereoAudioRecorder(stream, options);
    <!-- link npm package scripts -->
    <script src="./node_modules/recordrtc/RecordRTC.js"></script>

    There are some other NPM packages regarding RecordRTC:

    bower install

    bower install recordrtc
    
    <!-- link bower package scripts -->
    <script src="./bower_components/recordrtc/RecordRTC.js"></script>

    CDN

    <!-- CDN -->
    <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
     
    <!-- non-CDN -->
    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

    Otherwise check cdnjs below.

    Releases

    You can even link specific releases:

    <!-- use 5.4.8 or any other version on cdnjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.4.8/RecordRTC.js"></script>

    Note: You can use RecordRTC.min.js as well. (on webrtc-experiment or cdnjs)

    How to capture stream?

    <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
     
    <script>
    function successCallback(stream) {
        // RecordRTC usage goes here
    }
     
    function errorCallback(error) {
        // maybe another application is using the device
    }
     
    var mediaConstraints = { video: true, audio: true };
     
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
    </script> 

    Record audio+video

    You'll be recording both audio/video in single WebM or Mp4 container.

    var recordRTC;
     
    function successCallback(stream) {
        // RecordRTC usage goes here
     
        var options = {
          mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
          audioBitsPerSecond: 128000,
          videoBitsPerSecond: 128000,
          bitsPerSecond: 128000 // if this line is provided, skip above two
        };
        recordRTC = RecordRTC(stream, options);
        recordRTC.startRecording();
    }
     
    function errorCallback(error) {
        // maybe another application is using the device
    }
     
    var mediaConstraints = { video: true, audio: true };
     
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
     
    btnStopRecording.onclick = function () {
        recordRTC.stopRecording(function (audioVideoWebMURL) {
            video.src = audioVideoWebMURL;
     
            var recordedBlob = recordRTC.getBlob();
            recordRTC.getDataURL(function(dataURL) { });
        });
    };

    Record only Audio

    var recordRTC = RecordRTC(audioStream, { type: 'audio' });
    recordRTC.startRecording();
    recordRTC.stopRecording(function(audioURL) {
        audio.src = audioURL;
     
        var recordedBlob = recordRTC.getBlob();
        recordRTC.getDataURL(function(dataURL) { });
    });

    options

    RecordRTC requires a second parameter named as options or configuration or hints or preferences:

    var options = {
        recorderType: MediaStreamRecorder,
        mimeType: 'video/webm\;codecs=vp9'
    };
    var recordRTC = RecordRTC(stream, options);

    You can pass options object over startRecording method as well:

    var recordRTC = RecordRTC(stream);
     
    var options = {
        recorderType: MediaStreamRecorder,
        mimeType: 'video/webm\;codecs=vp9'
    };
    recordRTC.startRecording(options);
    • type accepts video or audio or canvas or gif
    • mimeType accepts all these values
    • recorderType accepts MediaStreamRecorder or StereoAudioRecorder or WhammyRecorder or GifRecorder or any recorder type from this page
    • timeSlice accepts numbers in milliseconds; use this to force intervals-based blobs
    • ondataavailable pass this function along with timeSlice to get intervals based blobs
    • checkForInactiveTracks accepts true or false; use this to disable default inactive-stream-checker functions
    • onTimeStamp it is a function that is called-back by the MediaStreamRecorder; timeSlice parameter is required for this function
    • bitsPerSecond accepts numbers in bits; applies both to audio and video tracks
    • audioBitsPerSecond accepts numbers in bits; applies only to audio tracks
    • videoBitsPerSecond accepts numbers in bits; applies only to video tracks
    • disableLogs accepts true or false; use this to disable console logs
    • frameInterval accepts numbers in milliseconds; use this with MultiStreamRecorder, CanvasRecorder and WhammyRecorder
    • previewStream it is a function that is called-back by the MultiStreamRecorder
    • video accepts object similar to this: {width: 320, height: 240}; pass this parameter for MultiStreamRecorder, CanvasRecorder and WhammyRecorder
    • canvas accepts object similar to this: {width: 320, height: 240}; pass this parameter for MultiStreamRecorder, CanvasRecorder and WhammyRecorder
    • sampleRate used only by the StereoAudioRecorder
    • bufferSize used only by the StereoAudioRecorder
    • numberOfAudioChannels used only by the StereoAudioRecorder

    Record Multiple Videos

    Demos:

    1. Record all your cameras
    2. Record screen as well as your video!

    You can record many videos/streams in single WebM/Mp4 file (WebRTC Conference Recording):

    var arrayOfStreams = [localStream, remoteStream1, remoteStream2, remoteStream3];
     
    var recordRTC = RecordRTC(arrayOfStreams, {
      type: 'video',
      mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
      previewStream: function(stream) {
        // it is optional
        // it allows you preview the recording video
      }
    });
    recordRTC.startRecording();
    recordRTC.stopRecording(function(singleWebM) {
        video.src = singleWebM;
     
        var recordedBlob = recordRTC.getBlob();
        recordRTC.getDataURL(function(dataURL) { });
    });

    Points:

    1. Instead of passing single MediaStream, you are passing array of MediaStreams
    2. You will get single webm or mp4 according to your mimeType

    MultiStreamRecorder.js supports two extra methods:

    1. addStreams
    2. resetVideoStreams
    var msRecorder = recorder.getInternalRecorder();
    if (msRecorder instanceof MultiStreamRecorder) {
        msRecorder.addStreams([newAudioStream]);
        msRecorder.resetVideoStreams([screenStream]);
    }

    Usecases:

    1. You can add more audio and/or video streams during live recording (using addStreams method)
    2. You can reset/remove/replace old videos using resetVideoStreams

    resetVideoStreams can be used to recorded screenStream in full-screen mode e.g.

    if (yourScreen.isScreen === true) {
        yourScreen.fullcanvas = true;
        yourScreen.width = window.screen.width;
        yourScreen.height = window.screen.height;
     
        // now it will record all audios + only_this_screen
        internalRecorder.resetVideoStreams([yourScreen]);
    }

    As soon as screen is stopped:

    addStreamStopListener(yourScreen, function() {
        var cameraStreams = getSingleOrMultipleCameraStreams();
     
        // now it will record all audios + all_your_cameras
        internalRecorder.resetVideoStreams(cameraStreams);
    });

    getInternalRecorder

    You can get access to internal recorders e.g. MultiStreamRecorder, MediaStreamRecorder, StereoAudioRecorder, WhammyRecorder etc.

    Use getInternalRecorder only after startRecording. It may return NULL according to RecordRTC current state.

    // if RecordRTC recording in-progress
    if (recorder.state === 'recording') {
        // get MediaStreamRecorder
        var msRecorder = recorder.getInternalRecorder();
     
        // always check for NULL or verify the recorder type
        if (msRecorder instanceof MultiStreamRecorder) {
            // it is NOT NULL
            // also it is MultiStreamRecorder instance
            // now we can use these extra methods
            msRecorder.addStreams([newAudioStream]);
            msRecorder.resetVideoStreams([screenStream]);
        }
    }

    Internal recorders can add extra methods. Same as MultiStreamRecorder which is supporting two extra methods:

    1. addStreams
    2. resetVideoStreams

    onStateChanged

    Use this method to detect status of the recording:

    recorder = RecordRTC(stream, {
        type: 'video',
        onStateChanged: function(state) {
            alert('Current recorder status: ' + state);
        }
    });
     
    recorder.startRecording();

    state

    Use this property to detect status of the recording:

    recorder = RecordRTC(stream, {
        type: 'video'
    });
     
    alert('Current recorder status: ' + recorder.state);
     
    recorder.startRecording();
     
    alert('Current recorder status: ' + recorder.state);
     
    recorder.stopRecording(function() {
        alert('Current recorder status: ' + recorder.state);
    });

    You can even use getState method:

    alert('Current recorder status: ' + recorder.getState());

    version

    Detect current RecordRTC version:

    recorder = RecordRTC(stream, {
        type: 'video'
    });
     
    alert('Current recorder version: ' + recorder.version);

    You can even use RecordRTC.version:

    alert('Current recorder version: ' + RecordRTC.version);

    Echo Issues

    Simply set volume=0 or muted=true over <audio> or <video> element:

    videoElement.muted = true;
    audioElement.muted = true;

    Otherwise, you can pass some media constraints:

    function successCallback(stream) {
        // RecordRTC usage goes here
    }
     
    function errorCallback(error) {
        // maybe another application is using the device
    }
     
    var mediaConstraints = {
        audio: {
            mandatory: {
                echoCancellation: false,
                googAutoGainControl: false,
                googNoiseSuppression: false,
                googHighpassFilter: false
            },
            optional: [{
              googAudioMirroring: false
            }]
        },
    };
     
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);

    Record Video

    Everything is optional except type:'video':

    var options = {
       type: 'video',
       frameInterval: 20 // minimum time between pushing frames to Whammy (in milliseconds)
    };
    var recordRTC = RecordRTC(mediaStream, options);
    recordRTC.startRecording();
    recordRTC.stopRecording(function(videoURL) {
        video.src = videoURL;
     
        var recordedBlob = recordRTC.getBlob();
        recordRTC.getDataURL(function(dataURL) { });
    });

    Record animated GIF image

    Everything is optional except type:'gif':

    // you must "manually" link:
    // https://cdn.webrtc-experiment.com/gif-recorder.js
     
    var options = {
       type: 'gif',
       frameRate: 200,
       quality: 10
    };
    var recordRTC = RecordRTC(mediaStream || canvas || context, options);
    recordRTC.startRecording();
    recordRTC.stopRecording(function(gifURL) {
       mediaElement.src = gifURL;
    });

    Record a Webpage

    You can say it: "HTML/Canvas Recording using RecordRTC"!

    <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
    <script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>
     
    <div id="elementToShare" style="width:100%;height:100%;background:green;"></div>
    <script>
    var elementToShare = document.getElementById('elementToShare');
    var recordRTC = RecordRTC(elementToShare, {
        type: 'canvas'
    });
    recordRTC.startRecording();
    recordRTC.stopRecording(function(videoURL) {
        video.src = videoURL;
     
        var recordedBlob = recordRTC.getBlob();
        recordRTC.getDataURL(function(dataURL) { });
    });
    </script> 

    See a demo: /Canvas-Recording/

    Record <canvas>

    You can even record Canvas2D drawings:

    <script src="https://cdn.webrtc-experiment.com/RecordRTC/Whammy.js"></script>
    <script src="https://cdn.webrtc-experiment.com/RecordRTC/CanvasRecorder.js"></script>
    <canvas></canvas>
    <script>
    var canvas = document.querySelector('canvas');
    var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
        disableLogs: false
    });
     
    // start recording <canvas> drawings
    recorder.record();
     
    // a few minutes later
    recorder.stop(function(blob) {
        var url = URL.createObjectURL(blob);
        window.open(url);
    });
    </script> 

    Live Demo:

    Watch a video: https://vimeo.com/152119435

    API Reference

    initRecorder

    It is a function that can be used to initiate recorder however skip getting recording outputs. It will provide maximum accuracy in the outputs after using startRecording method. Here is how to use it:

    var audioRecorder = RecordRTC(mediaStream, {
      recorderType: StereoAudioRecorder
    });
     
    var videoRecorder = RecordRTC(mediaStream, {
      recorderType: WhammyRecorder
    });
     
    videoRecorder.initRecorder(function() {
      audioRecorder.initRecorder(function() {
        // Both recorders are ready to record things accurately
        videoRecorder.startRecording();
        audioRecorder.startRecording();
      });
    });

    After using stopRecording, you'll see that both WAV/WebM blobs are having following charachteristics:

    1. Both are having same recording duration i.e. length
    2. Video recorder is having no blank frames
    3. Audio recorder is having no empty buffers

    This method is really useful to sync audio/video outputs.

    setRecordingDuration

    You can ask RecordRTC to auto stop recording after specific duration. It accepts one mandatory and one optional argument:

    recordRTC.setRecordingDuration(milliseconds, stoppedCallback);
     
    // the easiest one:
    recordRTC.setRecordingDuration(milliseconds).onRecordingStopped(stoppedCallback);

    Try a simple demo; paste in the chrome console:

    navigator.mediaDevices.getUserMedia({
        video: true
    }).then(function(stream) {
        var recordRTC = RecordRTC(stream, {
            recorderType: WhammyRecorder
        });
     
        // auto stop recording after 5 seconds
        recordRTC.setRecordingDuration(5 * 1000).onRecordingStopped(function(url) {
            console.debug('setRecordingDuration', url);
            window.open(url);
        })
     
        recordRTC.startRecording();
    }).catch(function(error) {
        console.error(error);
    });

    clearRecordedData

    This method can be used to clear old recorded frames/buffers. Snippet:

    recorder.clearRecordedData();

    recorderType

    If you're using recorderType then you don't need to use type. Second one will be redundant i.e. skipped.

    You can force any Recorder by passing this object over RecordRTC constructor:

    var audioRecorder = RecordRTC(mediaStream, {
      recorderType: StereoAudioRecorder
    })

    It means that ALL_BROWSERS will be using StereoAudioRecorder i.e. WebAudio API for audio recording.

    This feature brings remote audio recording support in Firefox, and local audio recording support in Microsoft Edge.

    Note: Chrome >=50 supports remote audio+video recording.

    You can even force WhammyRecorder on Firefox however webp format isn't yet supported in standard Firefox builds. It simply means that, you're skipping MediaRecorder API in Firefox.

    type

    If you are NOT using recorderType parameter then type parameter can be used to ask RecordRTC choose best recorder-type for recording.

    // if it is Firefox, then RecordRTC will be using MediaStreamRecorder.js
    // if it is Chrome or Opera, then RecordRTC will be using WhammyRecorder.js
    var recordVideo = RecordRTC(mediaStream, {
      type: 'video'
    });
     
    // if it is Firefox, then RecordRTC will be using MediaStreamRecorder.js
    // if it is Chrome or Opera or Edge, then RecordRTC will be using StereoAudioRecorder.js
    var recordVideo = RecordRTC(mediaStream, {
      type: 'audio'
    });

    frameInterval

    Set minimum interval (in milliseconds) between each time we push a frame to Whammy recorder.

    var whammyRecorder = RecordRTC(videoStream, {
      recorderType: WhammyRecorder,
      frameInterval: 1   // setTimeout interval
    });

    disableLogs

    You can disable all the RecordRTC logs by passing this Boolean:

    var recorder = RecordRTC(mediaStream, {
      disableLogs: true
    });

    numberOfAudioChannels

    You can force StereoAudioRecorder to record single-audio-channel only. It allows you reduce WAV file size to half.

    var audioRecorder = RecordRTC(audioStream, {
      recorderType: StereoAudioRecorder,
      numberOfAudioChannels: 1 // or leftChannel:true
    });

    It will reduce WAV size to half!

    This feature is useful only in Chrome and Microsoft Edge (WAV-recorders). It can work in Firefox as well.

    How to set video width/height?

    var options = {
       type: 'video',
       video: {
          width: 320,
          height: 240
       },
       canvas: {
          width: 320,
          height: 240
       }
    };
     
    var recordVideo = RecordRTC(MediaStream, options);

    pauseRecording

    Note: Firefox seems has a bug. It is unable to pause the recording. Seems internal bug because they correctly changes mediaRecorder.state from recording to paused but they are unable to pause internal recorders.

    RecordRTC pauses recording buffers/frames.

    recordRTC.pauseRecording();

    resumeRecording

    If you're using "initRecorder" then it asks RecordRTC that now its time to record buffers/frames. Otherwise, it asks RecordRTC to not only initialize recorder but also record buffers/frames.

    recordRTC.resumeRecording();

    getDataURL

    Optionally get "DataURL" object instead of "Blob".

    recordRTC.getDataURL(function(dataURL) {
       mediaElement.src = dataURL;
    });

    getBlob

    Get "Blob" object. A blob object looks similar to input[type=file]. Which means that you can append it to FormData and upload to server using XMLHttpRequest object. Even socket.io nowadays supports blob-transmission.

    blob = recordRTC.getBlob();

    toURL

    A virtual URL. It can be used only inside the same browser. You can't share it. It is just providing a preview of the recording.

    window.open( recordRTC.toURL() );

    save

    Invoke save-as dialog. You can pass "fileName" as well; though fileName argument is optional.

    recordRTC.save('File Name');

    bufferSize

    Here is how to customize Buffer-Size for audio recording?

    // From the spec: This value controls how frequently the audioprocess event is
    // dispatched and how many sample-frames need to be processed each call.
    // Lower values for buffer size will result in a lower (better) latency.
    // Higher values will be necessary to avoid audio breakup and glitches
    // bug: how to minimize wav size?
    // workaround? obviously ffmpeg!
    // The size of the buffer (in sample-frames) which needs to
    // be processed each time onprocessaudio is called.
     
    // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
     
    var options = {
       type: 'audio',
       recorderType: StereoAudioRecorder,
       bufferSize: 16384
    };
    var recordRTC = RecordRTC(audioStream, options);

    Following values are allowed for buffer-size:

    // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384)

    If you passed invalid value then you'll get blank audio.

    sampleRate

    Here is how to customize Sample-Rate for audio recording?

    // The sample rate (in sample-frames per second) at which the
    // AudioContext handles audio. It is assumed that all AudioNodes
    // in the context run at this rate. In making this assumption,
    // sample-rate converters or "varispeed" processors are not supported
    // in real-time processing.
    // The sampleRate parameter describes the sample-rate of the
    // linear PCM audio data in the buffer in sample-frames per second.
     
    // An implementation must support sample-rates in at least
    // the range 22050 to 96000.
     
    var options = {
       type: 'audio',
       recorderType: StereoAudioRecorder,
       sampleRate: 96000
    };
    var recordRTC = RecordRTC(audioStream, options);

    Values for sample-rate must be greater than or equal to 22050 and less than or equal to 96000.

    If you passed invalid value then you'll get blank audio.

    You can pass custom sample-rate values only on Mac (or additionally maybe on Windows 10).

    desiredSampRate

    Set sample rates such as 8K or 16K. Reference: http://stackoverflow.com/a/28977136/552182

    // record 16khz audio
    var options = {
       type: 'audio',
       recorderType: StereoAudioRecorder,
       desiredSampRate: 16 * 1000 // bits-per-sample * 1000
    };
    var recordRTC = RecordRTC(audioStream, options);

    mimeType

    This option allows you set MediaRecorder output format:

    var options = {
      mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
      bitsPerSecond: 128000
    };
    var recorder = RecordRTC(mediaStream, options);

    Note: For chrome, it will simply auto-set type:audio or video parameters to keep supporting StereoAudioRecorder.js and WhammyRecorder.js.

    That is, you can skip passing type:audio parameter when you're using mimeType parameter.

    isMimeTypeSupported

    function isMimeTypeSupported(mimeType) {
        // if (webrtcDetectedBrowser === 'edge') return false;
     
        if (typeof MediaRecorder.isTypeSupported !== 'function') {
            return true;
        }
     
        return MediaRecorder.isTypeSupported(mimeType);
    }

    Detect Audio Formats:

    var mimeType = 'audio/mpeg';
    var recorderType = MediaStreamRecorder;
     
    if (isMimeTypeSupported(mimeType) === false) {
        console.log(mimeType, 'is not supported.');
        mimeType = 'audio/ogg';
     
        if (isMimeTypeSupported(mimeType) === false) {
            console.log(mimeType, 'is not supported.');
            mimeType = 'audio/webm';
     
            if (isMimeTypeSupported(mimeType) === false) {
                console.log(mimeType, 'is not supported.');
     
                // fallback to WebAudio solution
                mimeType = 'audio/wav';
                recorderType = StereoAudioRecorder;
            }
        }
    }
     
    var recorder = RecordRTC(mediaStream, {
        mimeType: mimeType,
        recorderType: recorderType
    });

    Detect Video Formats:

    var mimeType = 'video/x-matroska;codecs=avc1'; // MKV
    var recorderType = MediaStreamRecorder;
     
    if (isMimeTypeSupported(mimeType) === false) {
        console.log(mimeType, 'is not supported.');
        mimeType = 'video/webm\;codecs=h264'; // H264
     
        if (isMimeTypeSupported(mimeType) === false) {
            console.log(mimeType, 'is not supported.');
            mimeType = 'video/webm\;codecs=vp9'; // VP9
     
            if (isMimeTypeSupported(mimeType) === false) {
                console.log(mimeType, 'is not supported.');
                mimeType = 'video/webm\;codecs=vp8'; // VP8
     
                if (isMimeTypeSupported(mimeType) === false) {
                    console.log(mimeType, 'is not supported.');
                    mimeType = 'video/webm'; // do NOT pass any codecs (vp8 by default)
     
                    if (isMimeTypeSupported(mimeType) === false) {
                        console.log(mimeType, 'is not supported.');
     
                        // fallback to Whammy (WebP+WebM) solution
                        mimeType = 'video/webm';
                        recorderType = WhammyRecorder;
                    }
                }
            }
        }
    }
     
    var recorder = RecordRTC(mediaStream, {
        mimeType: mimeType,
        recorderType: recorderType
    });

    bitsPerSecond

    The chosen bitrate for the audio and video components of the media. If this is specified along with one or the other of the above properties, this will be used for the one that isn't specified.

    var options = {
      mimeType 'video/webm', // or video/mp4 or audio/ogg
      bitsPerSecond: 128000
    };
    var recorder = RecordRTC(mediaStream, options);

    audioBitsPerSecond

    The chosen bitrate for the audio component of the media.

    var options = {
      mimeType 'audio/ogg',
      audioBitsPerSecond: 128000
    };
    var recorder = RecordRTC(mediaStream, options);

    videoBitsPerSecond

    The chosen bitrate for the video component of the media.

    var options = {
      mimeType 'video/webm', // or video/mp4
      videoBitsPerSecond: 128000
    };
    var recorder = RecordRTC(mediaStream, options);

    onAudioProcessStarted

    Note: "initRecorder" is preferred over this old hack. Both works similarly.

    Useful to recover audio/video sync issues inside the browser:

    recordAudio = RecordRTC( stream, {
         onAudioProcessStarted: function( ) {
             recordVideo.startRecording();
         }
    });
     
    recordVideo = RecordRTC(stream, {
        type: 'video'
    });
     
    recordAudio.startRecording();

    onAudioProcessStarted fixes shared/exclusive audio gap (a little bit). Because shared audio sometimes causes 100ms delay... sometime about 400-to-500 ms delay. Delay depends upon number of applications concurrently requesting same audio devices and CPU/Memory available. Shared mode is the only mode currently available on 90% of windows systems especially on windows 7.

    autoWriteToDisk

    Using autoWriteToDisk; you can suggest RecordRTC to auto-write to indexed-db as soon as you call stopRecording method.

    var recordRTC = RecordRTC(MediaStream, {
        autoWriteToDisk: true
    });

    autoWriteToDisk is helpful for single stream recording and writing to disk; however for MRecordRTC; writeToDisk is preferred one.

    writeToDisk

    You can write recorded blob to disk using writeToDisk method:

    recordRTC.stopRecording();
    recordRTC.writeToDisk();

    getFromDisk

    You can get recorded blob from disk using getFromDisk method:

    // get all blobs from disk
    RecordRTC.getFromDisk('all', function(dataURL, type) {
       type == 'audio'
       type == 'video'
       type == 'gif'
    });
     
    // or get just single blob
    RecordRTC.getFromDisk('audio', function(dataURL) {
       // only audio blob is returned from disk!
    });

    For MRecordRTC; you can use word MRecordRTC instead of RecordRTC!

    Another possible situation!

    var recordRTC = RecordRTC(mediaStream);
    recordRTC.startRecording();
    recordRTC.stopRecording(function(audioURL) {
       mediaElement.src = audioURL;
    });
     
    // "recordRTC" instance object to invoke "getFromDisk" method!
    recordRTC.getFromDisk(function(dataURL) {
       // audio blob is automaticlaly returned from disk!
    });

    In the above example; you can see that recordRTC instance object is used instead of global RecordRTC object.

    destroy

    Destroy all internal recorders. Clear memory and ask RecordRTC to stop doing anything internally:

    recorder.destroy();

    Note: You can use this method anytime, anywhere; even during recording a stream.

    Promises

    <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
     
    <script>
    // use "RecordRTCPromisesHandler" instead of "RecordRTC"
    var recorder = new RecordRTCPromisesHandler(mediaStream, options);
    recorder.startRecording().then(function() {
     
    }).catch(function(error) {
        //
    });
     
    recorder.stopRecording().then(function(url) {
        var blob = recorder.blob;
     
        recorder.getDataURL().then(function(dataURL) {
            //
        }).catch(function(error) {})
    }).catch(function(error) {
        //
    });
    </script> 

    Demo:

    Credits

    1. Recorderjs for audio recording
    2. whammy for video recording
    3. jsGif for gif recording

    Spec & Reference

    1. MediaRecorder API
    2. Web Audio API
    3. Canvas2D
    4. Media Capture and Streams

    Contribute in RecordRTC.org domain

    The domain https://RecordRTC.org is open-sourced here:

    Issues/Questions?

    Travis Failed?

    Steps to fix it (for your private projects only):

    Modify package.json and search this line:

    {
        "test": "./node_modules/.bin/protractor test/browserstack.config.js"
    }

    Replace it with (i.e. ignore all "test"):

    {
        "test": "node npm-test.js"
    }

    Why? Reason is this file: test/browserstack.config.js

    'browserstack.user': process.env.BROWSERSTACK_USERNAME,
    'browserstack.key': process.env.BROWSERSTACK_KEY,

    Your travis do NOT have these environment variables. That's why your travis builds fails.

    More info: https://github.com/muaz-khan/RecordRTC/pull/283#issuecomment-308757116

    Caution: NEVER make pull-request for modified package.json. Modify this file only for your own private projects.

    Tests sponsored by

    Check all tests here: https://travis-ci.org/muaz-khan/RecordRTC

    Source code: https://github.com/muaz-khan/RecordRTC/tree/master/test

    License

    RecordRTC.js is released under MIT licence . Copyright (c) Muaz Khan.

    Install

    npm i recordrtc@5.5.0

    Version

    5.5.0

    License

    MIT

    Unpacked Size

    380 kB

    Total Files

    8

    Last publish

    Collaborators

    • muaz-khan