recordrtc

RecordRTC: WebRTC audio/video recording / Wiki Pages / Demo

RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.

Documentation & Demos: http://RecordRTC.org

// Browsers Support::
// Chrome (all versions) [ audio/video individually ]
// Firefox ( >= 29 ) [ audio/video in single webm/mp4 container or only audio in ogg ]
// Opera (all versions) [ same as chrome ]
// Android (Chrome) [ only video ]
// Android (Opera) [ only video ]
// Android (Firefox) [ only video ]

npm install recordrtc

To use it:

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

There are some other NPM packages regarding RecordRTC:

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

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)

=

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!

=

<script src="http://RecordRTC.org/latest.js"></script>

<!-- or -->
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></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 session = {
    audio: true,
    video: true
};

var recordRTC;

navigator.getUserMedia(session, function (mediaStream) {
    recordRTC = RecordRTC(MediaStream);
    recordRTC.startRecording();
}, onError);

btnStopRecording.onclick = function () {
    recordRTC.stopRecording(function (audioVideoWebMURL) {
        video.src = audioVideoWebMURL;
        
        var recordedBlob = recordRTC.getBlob();
        recordRTC.getDataURL(function(dataURL) { });
    });
};

Demo: https://www.webrtc-experiment.com/RecordRTC/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) { });
});

Remember, you need to invoke navigator.getUserMedia method yourself; it is too easy to use!

var recordRTC;

navigator.getUserMedia({audio: true}, function(mediaStream) {
   recordRTC = RecordRTC(MediaStream);
   recordRTC.startRecording();
});

btnStopRecording.onclick = function() {
   recordRTC.stopRecording(function(audioURL) {
        audio.src = audioURL;
        
        var recordedBlob = recordRTC.getBlob();
        recordRTC.getDataURL(function(dataURL) { });
   });
};

Also, you don't need to use prefixed versions of getUserMedia and URL objects. RecordRTC auto handles such things for you! Just use non-prefixed version:

navigator.getUserMedia(media_constraints, onsuccess, onfailure);
URL.createObjectURL(MediaStream);

Echo Issues

Simply set volume=0 or muted=true:

navigator.getUserMedia({
    audio: {
        mandatory: {
            googEchoCancellation: false,
            googAutoGainControl: false,
            googNoiseSuppression: false,
            googHighpassFilter: false
        },
        optional: []
    },
}, onSuccess, onFailure);

var recordRTC;
function onSuccess(mediaStream) {
    recordRTC = RecordRTC(mediaStream);
    recordRTC.startRecording();
}

Constraints Reference:

• https://chromium.googlesource.com/external/webrtc/+/master/talk/app/webrtc/mediaconstraintsinterface.cc

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: https://www.webrtc-experiment.com/RecordRTC/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
   }
};

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

Browser Support

RecordRTC Demo works fine on following web-browsers:

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

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

License

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