RecordRTC(mediaStream, config)

new RecordRTC(mediaStream, config)

Record audio, video or screen inside the browser.

RecordRTC is a WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

Parameters:
Name Type Description
mediaStream MediaStream

Single media-stream object, array of media-streams, html-canvas-element, etc.

config object

{type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, desiredSampRate: 16000, video: HTMLVideoElement, etc.}

Author:
License:
Source:
See:
Example
var recorder = RecordRTC(mediaStream or [arrayOfMediaStream], {
    type: 'video', // audio or video or gif or canvas
    recorderType: MediaStreamRecorder || CanvasRecorder || StereoAudioRecorder || Etc
});
recorder.startRecording();

Members

(static, readonly) state

A recorder can have inactive, recording, paused or stopped states.

A recorder can have inactive, recording, paused or stopped states.

Properties:
Name Type Description
state String

A recorder's state can be: recording, paused, stopped or inactive.

Source:
Example
// this looper function will keep you updated about the recorder's states.
(function looper() {
    document.querySelector('h1').innerHTML = 'Recorder's state is: ' + recorder.state;
    if(recorder.state === 'stopped') return; // ignore+stop
    setTimeout(looper, 1000); // update after every 3-seconds
})();
recorder.startRecording();

(static, readonly) version

RecordRTC version number

.

RecordRTC version number

Properties:
Name Type Description
version String

Release version number.

Source:
Example
alert(recorder.version);

(readonly) blob

It is equivalent to "recorder.getBlob()" method.

It is equivalent to "recorder.getBlob()" method. Usage of "getBlob" is recommended, though.

Properties:
Name Type Description
blob Blob

Recorded Blob can be accessed using this property.

Source:
Example
recorder.stopRecording(function() {
    var blob = this.blob;

    // below one is recommended
    var blob = this.getBlob();
});

(readonly) buffer

{recorderType:StereoAudioRecorder} returns ArrayBuffer object.

{recorderType:StereoAudioRecorder} returns ArrayBuffer object.

Properties:
Name Type Description
buffer ArrayBuffer

Audio ArrayBuffer, supported only in Chrome.

Source:
Example
recorder.stopRecording(function() {
    var arrayBuffer = this.buffer;
    alert(arrayBuffer.byteLength);
});

(readonly) bufferSize

This works only with {recorderType:StereoAudioRecorder}.

This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.

Properties:
Name Type Description
bufferSize number

Buffer-size used to encode the WAV container

Source:
Example
recorder.stopRecording(function() {
    alert('Recorder used this buffer-size: ' + this.bufferSize);
});

(readonly) sampleRate

This works only with {recorderType:StereoAudioRecorder}.

This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.

Properties:
Name Type Description
sampleRate number

Sample-rates used to encode the WAV container

Source:
Example
recorder.stopRecording(function() {
    alert('Recorder used these sample-rates: ' + this.sampleRate);
});

Methods

(static) destroy()

Destroy RecordRTC instance.

Destroy RecordRTC instance. Clear all recorders and objects.

Source:
Example
recorder.destroy();

(static) getState() → {String}

Get recorder's readonly state.

Get recorder's readonly state.

Source:
Returns:

Returns recording state.

Type
String
Example
var state = recorder.getState();

(static) writeToDisk(options)

This method can be used to store recorded blobs into IndexedDB storage.

This method can be used to store recorded blobs into IndexedDB storage.

Parameters:
Name Type Description
options object

{audio: Blob, video: Blob, gif: Blob}

Source:
Example
RecordRTC.writeToDisk({
    audio: audioBlob,
    video: videoBlob,
    gif  : gifBlob
});

clearRecordedData()

This method can be used to clear/reset all the recorded data.

This method can be used to clear/reset all the recorded data.

Source:
To Do:
  • Figure out the difference between "reset" and "clearRecordedData" methods.
Example
recorder.clearRecordedData();

getBlob() → {Blob}

Get the recorded blob.

Get the recorded blob. Use this method inside the "stopRecording" callback.

Source:
Returns:

Returns recorded data as "Blob" object.

Type
Blob
Example
recorder.stopRecording(function() {
    var blob = this.getBlob();

    var file = new File([blob], 'filename.webm', {
        type: 'video/webm'
    });

    var formData = new FormData();
    formData.append('file', file); // upload "File" object rather than a "Blob"
    uploadToServer(formData);
});

getDataURL(callback)

Get data-URI instead of Blob.

Get data-URI instead of Blob.

Parameters:
Name Type Description
callback function

Callback to get the Data-URI.

Source:
Example
recorder.stopRecording(function() {
    recorder.getDataURL(function(dataURI) {
        video.src = dataURI;
    });
});

getFromDisk(callback)

This method gets a blob from indexed-DB storage.

This method gets a blob from indexed-DB storage.

Parameters:
Name Type Description
callback function

Callback to get the recorded blob.

Source:
Example
recorder.getFromDisk(function(dataURL) {
    video.src = dataURL;
});

getInternalRecorder() → {Object}

Get internal recording object (i.e.

Get internal recording object (i.e. internal module) e.g. MutliStreamRecorder, MediaStreamRecorder, StereoAudioRecorder or WhammyRecorder etc.

Source:
Returns:

Returns internal recording object.

Type
Object
Example
var internal = recorder.getInternalRecorder();
if(internal instanceof MultiStreamRecorder) {
    internal.addStreams([newAudioStream]);
    internal.resetVideoStreams([screenStream]);
}

initRecorder()

This method initializes the recording.

This method initializes the recording.

Source:
To Do:
  • This method should be deprecated.
Example
recorder.initRecorder();

onStateChanged()

This method is called whenever recorder's state changes.

This method is called whenever recorder's state changes. Use this as an "event".

Properties:
Name Type Description
state String

A recorder's state can be: recording, paused, stopped or inactive.

Source:
Example
recorder.onStateChanged = function(state) {
    console.log('Recorder state: ', state);
};

pauseRecording()

This method pauses the recording.

This method pauses the recording. You can resume recording using "resumeRecording" method.

Source:
To Do:
  • Firefox is unable to pause the recording. Fix it.
Example
recorder.pauseRecording();  // pause the recording
recorder.resumeRecording(); // resume again

reset()

This method resets the recorder.

This method resets the recorder. So that you can reuse single recorder instance many times.

Source:
Example
recorder.reset();
recorder.startRecording();

resumeRecording()

This method resumes the recording.

This method resumes the recording.

Source:
Example
recorder.pauseRecording();  // first of all, pause the recording
recorder.resumeRecording(); // now resume it

save(fileName)

Invoke save-as dialog to save the recorded blob into your disk.

Invoke save-as dialog to save the recorded blob into your disk.

Parameters:
Name Type Description
fileName string

Set your own file name.

Source:
Example
recorder.stopRecording(function() {
    this.save('file-name');

    // or manually:
    invokeSaveAsDialog(this.getBlob(), 'filename.webm');
});

setAdvertisementArray(arrayOfWebPImages)

This method appends an array of webp images to the recorded video-blob.

This method appends an array of webp images to the recorded video-blob. It takes an "array" object.

Parameters:
Name Type Description
arrayOfWebPImages Array

Array of webp images.

Source:
To Do:
  • This method should be deprecated.
Example
var arrayOfWebPImages = [];
arrayOfWebPImages.push({
    duration: index,
    image: 'data:image/webp;base64,...'
});
recorder.setAdvertisementArray(arrayOfWebPImages);

setRecordingDuration()

Ask RecordRTC to auto-stop the recording after 5 minutes.

Ask RecordRTC to auto-stop the recording after 5 minutes.

Source:
Example
var fiveMinutes = 5 * 1000 * 60;
recorder.setRecordingDuration(fiveMinutes, function() {
   var blob = this.getBlob();
   video.src = this.toURL();
});

// or otherwise
recorder.setRecordingDuration(fiveMinutes).onRecordingStopped(function() {
   var blob = this.getBlob();
   video.src = this.toURL();
});

startRecording()

This method starts the recording.

This method starts the recording.

Source:
Example
var recorder = RecordRTC(mediaStream, {
    type: 'video'
});
recorder.startRecording();

stopRecording(callback)

This method stops the recording.

This method stops the recording. It is strongly recommended to get "blob" or "URI" inside the callback to make sure all recorders finished their job.

Parameters:
Name Type Description
callback function

Callback to get the recorded blob.

Source:
Example
recorder.stopRecording(function() {
    // use either "this" or "recorder" object; both are identical
    video.src = this.toURL();
    var blob = this.getBlob();
});

toURL() → {String}

Get virtual/temporary URL.

Get virtual/temporary URL. Usage of this URL is limited to current tab.

Source:
Returns:

Returns a virtual/temporary URL for the recorded "Blob".

Type
String
Example
recorder.stopRecording(function() {
    video.src = this.toURL();
});