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

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.

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 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 ={

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