recordrtc

RecordRTC: WebRTC audio/video recording

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

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.

Please check dev directory for development files.

1. RecordRTC API Reference
2. MRecordRTC API Reference
3. MediaStreamRecorder API Reference
4. StereoRecorder API Reference
5. StereoAudioRecorder API Reference
6. WhammyRecorder API Reference
7. Whammy API Reference
8. CanvasRecorder API Reference
9. GifRecorder API Reference
10. Global API Reference

Browsers Support:

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

How RecordRTC encodes wav/webm?

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!

How to link?

npm install recordrtc

# you can use with "require" (browserify/nodejs)
var RecordRTC = require('recordrtc');
var recorder = RecordRTC(mediaStream, { type: 'audio'});

or using Bower:

bower install recordrtc

To use it:

<script src="./node_modules/recordrtc/RecordRTC.js"></script>

<!-- or -->
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>

<!-- or -->
<script src="//www.WebRTC-Experiment.com/RecordRTC.js"></script>

There are some other NPM packages regarding RecordRTC:

• https://www.npmjs.org/search?q=RecordRTC

How to capture stream?

<script src="https://cdn.rawgit.com/webrtc/adapter/master/adapter.js"></script>

<script>
function successCallback(stream) {
    // RecordRTC usage goes here
}

function errorCallback(errror) {
    // 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 in Firefox

You'll be recording both audio/video in single WebM container. Though you can edit RecordRTC.js to record in mp4.

var recordRTC;

function successCallback(stream) {
    // RecordRTC usage goes here

    recordRTC = RecordRTC(MediaStream);
    recordRTC.startRecording();
}

function errorCallback(errror) {
    // 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) { });
    });
};

Demo: AudioVideo-on-Firefox.html

Record only Audio

var recordRTC = RecordRTC(mediaStream);
recordRTC.startRecording();
recordRTC.stopRecording(function(audioURL) {
    audio.src = audioURL;
   
    var recordedBlob = recordRTC.getBlob();
    recordRTC.getDataURL(function(dataURL) { });
});

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(errror) {
    // 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);

• Constraints Reference

Record Video

Everything is optional except type:'video':

var options = {
   type: 'video'
};
var recordRTC = RecordRTC(mediaStream, options);
recordRTC.startRecording();
recordRTC.stopRecording(function(videoURL) {
    video.src = videoURL;
   
    var recordedBlob = recordRTC.getBlob();
    recordRTC.getDataURL(function(dataURL) { });
});

onAudioProcessStarted

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.

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, options);
recordRTC.startRecording();
recordRTC.stopRecording(function(gifURL) {
   mediaElement.src = gifURL;
});

Record a Webpage

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

<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="//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/

API Reference

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.

How to set video width/height?

var options = {
   type: 'video',
   video: {
      width: 320,
      height: 240
   },
   canvas: {
      width: 320,
      height: 240
   }
};

pauseRecording

recordRTC.pauseRecording();

resumeRecording

recordRTC.resumeRecording();

getDataURL

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

getBlob

blob = recordRTC.getBlob();

toURL

window.open( recordRTC.toURL() );

save

recordRTC.save();

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 = {
   bufferSize: 16384
};
var recordRTC = RecordRTC(audioStream, options);

Following values are allowed for buffer-size:

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

You can write like this:

var options = {
   'buffer-size': 16384
};

sampleRate

Here is jow 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 = {
   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.

You can write like this:

var options = {
   'sample-rate': 16384
};

Clarifications

Is WinXP supported?

No WinXP SP2 based "Chrome" support. However, RecordRTC works on WinXP Service Pack 3.

Is Chrome on Android supported?

RecordRTC uses WebAudio API for stereo-audio recording. AFAIK, WebAudio is not supported on android chrome releases, yet.

Stereo or Mono?

Audio recording fails for mono audio. So, try stereo audio only.

Possible issues/failures:

Do you know "RecordRTC" fails recording audio because following conditions fails:

1. Sample rate and channel configuration must be the same for input and output sides on Windows i.e. audio input/output devices mismatch
2. Only the Default microphone device can be used for capturing.
3. The requesting scheme is none of the following: http, https, chrome, extension's, or file (only works with --allow-file-access-from-files)
4. The browser cannot create/initialize the metadata database for the API under the profile directory

If you see this error message: Uncaught Error: SecurityError: DOM Exception 18; it means that you're using HTTP; whilst your webpage is loading worker file (i.e. audio-recorder.js) from HTTPS. Both files's (i.e. RecordRTC.js and audio-recorder.js) scheme MUST be same!

Web Audio APIs requirements

1. If you're on Windows, you have to be running WinXP SP3, Windows Vista or better (will not work on Windows XP SP2 or earlier).
2. On Windows, audio input hardware must be set to the same sample rate as audio output hardware.
3. On Mac and Windows, the audio input device must be at least stereo (i.e. a mono/single-channel USB microphone WILL NOT work).

Why stereo?

If you explorer chromium code; you'll see that some APIs can only be successfully called for WAV files with stereo audio.

Stereo audio is only supported for WAV files.

...still investigating the actual issue of failure with mono audio.

Media Stream Recording API (MediaRecorder object) is being implemented by both Firefox and Chrome. RecordRTC is also using MediaRecorder API for Firefox (nightly).

RecordRTC is unable to record "mono" audio on chrome; however it seems that we can covert channels from "stereo" to "mono" using WebAudio API, though. MediaRecorder API's encoder only support 48k/16k mono audio channel (on Firefox Nightly).

Credits

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

Spec & Reference

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

Contribute in RecordRTC.org

http://recordrtc.org/ is a documentation webpage for RecordRTC.js. It is open-sourced in github and everyone can collaborate to improve documentation.

To contribute:

1. You should modify RecordRTC.js file (aka latest.js file)
2. You'll see that each function/property/method is having comments (format is chosen from http://usejsdoc.org/).
3. Using jsdoc tool, you can generate documentation HTML pages from latest.js file
4. You should NEVER modify HTML pages. You merely need to modify latest.js file for documentation.

Steps to contribute:

1. Modify latest.js file
2. Use below NPM-commands to generate HTML pages.
3. Manually copy/paste latest.js file in the resulting recordrtc.org directory
4. Copy recordrtc.org directory and replace in RecordRTC github clone's gh-pages section
5. Send a pull-request and done!

# First step: install recordrtc.org template and javascript file
npm install recordrtc.org

# Second step: generate HTML files from template & latest.js file
cd .\node_modules\recordrtc.org

# This command generates HTML pages from latest.js file
node_modules\.bin\jsdoc node_modules\recordrtc\RecordRTC.js -d .\..\..\recordrtc.org node_modules\recordrtc\README.md -t template

Now you'll see a directory with name recordrtc.org.

# This command runs index.html file
# You can use it to preview HTML pages (doc files)
.\..\..\recordrtc.org\index.html

Send pull requests

Now, you should fork this repository:

• https://github.com/muaz-khan/RecordRTC

And push/pull recordrtc.org directory to gh-pages.

How to modify latest.js file?

RecordRTC is using comments format from jsdoc:

• http://usejsdoc.org/

E.g.

/**
* Description
* @summary Summary
* @typedef Hello
* @example
* var some = new Something();
*/

Example - stopRecording method:

/**
 * This method stops recording. It takes single "callback" argument. It is suggested to get blob or URI in the callback to make sure all encoders finished their jobs.
 * @param {function} callback - This callback function is invoked after completion of all encoding jobs.
 * @method
 * @memberof RecordRTC
 * @instance
 * @example
 * recordRTC.stopRecording(function(videoURL) {
 *     video.src = videoURL;
 * });
 * @todo Implement <code class="str">recordRTC.stopRecording().getDataURL(callback);</code>
 */
stopRecording: stopRecording,

License

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